Add main start, end adorment

src/components/Select/Select.stories.tsx

@@ -1,5 +1,6 @@
 import { Meta, StoryObj } from "@storybook/react";
 import { useState } from "react";
+import { Option } from "~/components/BaseSelect";
 
 import { Box } from "../Box";
 import { Select } from ".";
@@ -41,7 +42,11 @@ const SelectTemplate: Story = {
  const [value, setValue] = useState(options[0]);
 
  return (
- <Select {...args} value={value} onChange={(value) => setValue(value)} />
+ <Select
+ {...args}
+ value={value}
+ onChange={(value) => setValue(value as Option)}
+ />
  );
  },
 };
@@ -155,6 +160,48 @@ export const WithStringValue = () => {
  );
 };
 
+export const WithStartAdornment = () => {
+ const [value, setValue] = useState("color-black");
+
+ return (
+ <Select
+ label="Pick a color"
+ size="large"
+ value={value}
+ onChange={(value) => setValue(value)}
+ startAdornment={(value) => {
+ if (!value) {
+ return null;
+ }
+
+ return (
+ <Box
+ width={4}
+ height={4}
+ marginRight={2}
+ __backgroundColor={value}
+ ></Box>
+ );
+ }}
+ options={options.map((option) => {
+ const value = option.value.split("color-")[1];
+ return {
+ ...option,
+ value,
+ startAdornment: (
+ <Box
+ __backgroundColor={value}
+ marginRight={2}
+ width={4}
+ height={4}
+ ></Box>
+ ),
+ };
+ })}
+ />
+ );
+};
+
 export const WithEllipsis = () => {
  const values = [
  { value: "color-black", label: "Long black label here" },

src/components/Select/Select.tsx

@@ -47,11 +47,14 @@ export type SelectProps<T, V> = PropsWithBox<
  | "nonce"
  > & {
  label?: ReactNode;
+
  error?: boolean;
  helperText?: ReactNode;
  options: T[];
  onChange?: SingleChangeHandler<V>;
  value: V | null;
+ startAdornment?: (inputValue: V | null) => ReactNode;
+ endAdornment?: (inputValue: V | null) => ReactNode;
  children?: ReactNode;
  }
 > &
@@ -82,6 +85,8 @@ const SelectInner = <T extends Option, V extends Option | string>(
  onChange,
  onFocus,
  onBlur,
+ startAdornment,
+ endAdornment,
  children,
  ...props
  }: SelectProps<T, V>,
@@ -146,14 +151,17 @@ const SelectInner = <T extends Option, V extends Option | string>(
  whiteSpace="nowrap"
  overflow="hidden"
  textOverflow="ellipsis"
+ display="flex"
  >
+ {startAdornment && typed && <Box>{startAdornment(value)}</Box>}
  <Text
  size={convertSizeToScale(size)}
  color={labelColor}
  title={selectedItem?.label}
  >
  {selectedItem?.label}
  </Text>
+ {endAdornment && typed && <Box>{endAdornment(value)}</Box>}
  </Box>
  </SelectWrapper>
  <Portal asChild ref={refs.setFloating} style={floatingStyles}>