@telepix-lab/telepix-ui 0.0.1

package/dist/cjs/input/index.d.ts

@@ -0,0 +1,28 @@
+import React, { ReactNode } from "react";
+import { InputWrapperSizeStyles } from "./styles";
+export interface InputProps extends React.DetailedHTMLProps<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">, HTMLInputElement> {
+    size?: InputWrapperSizeStyles;
+    leftIcon?: ReactNode;
+    rightIcon?: ReactNode;
+    wrapperClassName?: string;
+}
+/**
+ * 다양한 크기와 아이콘을 지원하는 입력 필드 컴포넌트입니다.<br/>
+ * 사용자는 크기(size), 왼쪽 아이콘(leftIcon), 오른쪽 아이콘(rightIcon) 등을 지정할 수 있습니다.<br/>
+ * 기본적으로 regular 크기를 가지며, large 크기도 선택할 수 있습니다.<br/>
+ * input의 너비는 부모 요소에 따라 결정됩니다.<br/>
+ * input 자체의 클래스는 `className` 속성을 통해 추가할 수 있습니다.<br/>
+ * wrapperClassName을 통해 input을 감싸는 div의 클래스도 추가할 수 있습니다.<br/>
+ * <br/>
+ * ### 사용 예시
+ * ```tsx
+ * <Input
+ *   size="large"
+ *   leftIcon={<SearchIcon />}
+ *   rightIcon={<ClearIcon />}
+ *   placeholder="Search..."
+ *   className="custom-input"
+ * />
+ * ```
+ */
+export declare const Input: React.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;

package/dist/cjs/input/styles.d.ts

@@ -0,0 +1,75 @@
+export declare const inputWrapperStyles: Readonly<{
+    readonly base: Readonly<{
+        readonly display: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"display", "flex">;
+        readonly alignItems: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"alignItems", "center">;
+        readonly justifyContent: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"justifyContent", "center">;
+        readonly borderRadius: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"borderRadius", string>;
+        readonly backgroundColor: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"backgroundColor", string>;
+        readonly border: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"border", `1px solid ${import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>}`>;
+    }>;
+}>;
+export declare const inputWrapperSizeStyles: Readonly<{
+    readonly regular: Readonly<{
+        readonly padding: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"padding", "6px 8px">;
+        readonly fontSize: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"fontSize", string>;
+        readonly lineHeight: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"lineHeight", string>;
+        readonly fontWeight: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"fontWeight", string>;
+        readonly gap: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"gap", "8px">;
+    }>;
+    readonly large: Readonly<{
+        readonly padding: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"padding", "11px 16px">;
+        readonly fontSize: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"fontSize", string>;
+        readonly lineHeight: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"lineHeight", string>;
+        readonly fontWeight: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"fontWeight", string>;
+        readonly gap: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"gap", "12px">;
+    }>;
+}>;
+export declare const inputStyles: Readonly<{
+    readonly base: Readonly<{
+        readonly border: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"border", "none">;
+        readonly outline: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"outline", "none">;
+        readonly padding: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"padding", 0>;
+        readonly flex: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"flex", 1>;
+        readonly backgroundColor: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"backgroundColor", "transparent">;
+        readonly color: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"color", string>;
+        readonly "::placeholder": import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"::placeholder", {
+            readonly color: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>;
+        }>;
+        readonly ":hover": import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<":hover", {
+            readonly "::placeholder": {
+                readonly color: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>;
+            };
+        }>;
+        readonly ":focus": import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<":focus", {
+            readonly "::placeholder": {
+                readonly color: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>;
+            };
+        }>;
+        readonly ":disabled": import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<":disabled", {
+            readonly color: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>;
+            readonly "::placeholder": {
+                readonly color: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>;
+            };
+        }>;
+    }>;
+    readonly regular: Readonly<{
+        readonly fontSize: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"fontSize", string>;
+        readonly lineHeight: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"lineHeight", string>;
+        readonly fontWeight: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"fontWeight", string>;
+    }>;
+    readonly large: Readonly<{
+        readonly fontSize: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"fontSize", string>;
+        readonly lineHeight: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"lineHeight", string>;
+        readonly fontWeight: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"fontWeight", string>;
+    }>;
+}>;
+/**
+ *
+ *
+        ":hover": semanticColors.compMonoSubtleHovered,
+        ":focused": semanticColors.compMonoSubtleSelected,
+        ":disabled": semanticColors.compDisabled,
+ */
+export type InputWrapperStyles = keyof typeof inputWrapperStyles;
+export type InputStyles = keyof typeof inputStyles;
+export type InputWrapperSizeStyles = keyof typeof inputWrapperSizeStyles;

package/dist/cjs/mode-tab/index.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+interface ModeTabsProps extends React.HTMLAttributes<HTMLDivElement> {
+    disabled?: boolean;
+    value?: string;
+    onValueChange?: (value: string) => void;
+}
+export declare const ModeTabs: React.ForwardRefExoticComponent<ModeTabsProps & React.RefAttributes<HTMLDivElement>>;
+interface ModeTabProps extends React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
+    value: string;
+    label?: string;
+    icon?: React.ReactNode;
+}
+export declare const ModeTab: React.ForwardRefExoticComponent<Omit<ModeTabProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/cjs/mode-tab/styles.d.ts

@@ -0,0 +1,49 @@
+export declare const modeTabWrapperStyles: Readonly<{
+    readonly base: Readonly<{
+        readonly display: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"display", "flex">;
+        readonly alignItems: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"alignItems", "center">;
+        readonly width: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"width", "100%">;
+        readonly backgroundColor: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"backgroundColor", string>;
+        readonly borderRadius: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"borderRadius", "8px">;
+        readonly padding: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"padding", "4px">;
+    }>;
+}>;
+export declare const modeTabStyles: Readonly<{
+    readonly base: Readonly<{
+        readonly padding: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"padding", "4px 8px">;
+        readonly display: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"display", "flex">;
+        readonly alignItems: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"alignItems", "center">;
+        readonly justifyContent: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"justifyContent", "center">;
+        readonly gap: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"gap", "10px">;
+        readonly flex: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"flex", "1">;
+        readonly color: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"color", string>;
+        readonly fontSize: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"fontSize", string>;
+        readonly lineHeight: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"lineHeight", string>;
+        readonly fontWeight: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"fontWeight", string>;
+        readonly cursor: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"cursor", "pointer">;
+        readonly backgroundColor: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"backgroundColor", string>;
+        readonly border: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"border", "none">;
+        readonly borderRadius: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"borderRadius", "4px">;
+        readonly ":hover:not(:is([data-selected='true'])):not(:disabled)": import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<":hover:not(:is([data-selected='true'])):not(:disabled)", {
+            readonly color: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>;
+        }>;
+        readonly ":active:not(:disabled)": import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<":active:not(:disabled)", {
+            readonly color: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>;
+        }>;
+        readonly ":is([data-selected='true'])": import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<":is([data-selected='true'])", {
+            readonly color: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>;
+            readonly backgroundColor: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>;
+        }>;
+        readonly ":disabled": import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<":disabled", {
+            readonly color: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>;
+            readonly cursor: "not-allowed";
+        }>;
+    }>;
+    readonly icon: Readonly<{
+        readonly display: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"display", "flex">;
+        readonly alignItems: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"alignItems", "center">;
+        readonly justifyContent: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"justifyContent", "center">;
+        readonly width: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"width", "20px">;
+        readonly height: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"height", "20px">;
+    }>;
+}>;

package/dist/cjs/radio-group/index.d.ts

@@ -0,0 +1,32 @@
+import React from "react";
+import { RadioGroup as RadioGroupRadix } from "radix-ui";
+interface RadioGroupProps extends RadioGroupRadix.RadioGroupProps {
+    className?: string;
+    orientation?: "horizontal" | "vertical";
+}
+/**
+ * 라디오 버튼 그룹을 생성하는 컴포넌트입니다.<br/>
+ * orientation prop을 통해 수평 또는 수직 방향으로 배치할 수 있습니다.<br/>
+ * value prop을 통해 현재 선택된 라디오 버튼의 값을 관리합니다.<br/>
+ * disabled prop을 통해 그룹 전체를 비활성화할 수 있습니다.<br/>
+ * 또는 개별 RadioItem 컴포넌트에 disabled prop을 설정하여 특정 라디오 버튼을 비활성화할 수 있습니다.<br/>
+ * RadioItem 컴포넌트를 자식으로 받아 라디오 버튼을 구성합니다.<br/>
+ * <br/>
+ * ### 사용 예시
+ * ```tsx
+ * <RadioGroup value={selectedValue} onValueChange={setSelectedValue}>
+ *   <RadioItem value="option1" label="Option 1" />
+ *   <RadioItem value="option2" label="Option 2" />
+ *   <RadioItem value="option3" label="Option 3" />
+ * </RadioGroup>
+ * ```
+ */
+export declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+interface RadioItemProps extends RadioGroupRadix.RadioGroupItemProps {
+    label?: string;
+    labelClassName?: string;
+    wrapperClassName?: string;
+    className?: string;
+}
+export declare const RadioItem: React.ForwardRefExoticComponent<RadioItemProps & React.RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/cjs/radio-group/styles.d.ts

@@ -0,0 +1,47 @@
+export declare const radioGroupStyles: Readonly<{
+    readonly base: Readonly<{
+        readonly display: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"display", "flex">;
+        readonly flexDirection: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"flexDirection", "column">;
+        readonly gap: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"gap", "12px">;
+    }>;
+    readonly horizontal: Readonly<{
+        readonly flexDirection: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"flexDirection", "row">;
+    }>;
+}>;
+export declare const radioItemWrapperStyles: Readonly<{
+    readonly base: Readonly<{
+        readonly display: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"display", "flex">;
+        readonly alignItems: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"alignItems", "center">;
+        readonly gap: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"gap", "6px">;
+        readonly cursor: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"cursor", "pointer">;
+        readonly backgroundColor: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"backgroundColor", string>;
+        readonly border: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"border", "none">;
+    }>;
+}>;
+export declare const radioItemStyles: Readonly<{
+    readonly base: Readonly<{
+        readonly backgroundColor: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"backgroundColor", string>;
+        readonly border: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"border", "none">;
+        readonly padding: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"padding", "0">;
+        readonly display: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"display", "flex">;
+        readonly alignItems: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"alignItems", "center">;
+        readonly justifyContent: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"justifyContent", "center">;
+        readonly cursor: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"cursor", "pointer">;
+    }>;
+}>;
+export declare const radioItemLabelStyles: Readonly<{
+    readonly base: Readonly<{
+        readonly fontSize: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"fontSize", string>;
+        readonly lineHeight: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"lineHeight", string>;
+        readonly color: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"color", string>;
+        readonly fontWeight: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"fontWeight", string>;
+        readonly cursor: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"cursor", "pointer">;
+    }>;
+    readonly disabled: Readonly<{
+        readonly color: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"color", string>;
+        readonly cursor: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"cursor", "default">;
+    }>;
+    readonly selected: Readonly<{
+        readonly color: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"color", string>;
+    }>;
+}>;

package/dist/cjs/select/index.d.ts

@@ -0,0 +1,61 @@
+import React from "react";
+import { Select as SelectRadix } from "radix-ui";
+import { SelectTriggerSizeStyles, SelectTriggerVariantStyles } from "./styles";
+/**
+ * Select 컴포넌트는 드롭다운 선택 상자를 생성하는 데 사용됩니다.<br/>
+ * 이 컴포넌트는 Radix UI의 Select 컴포넌트를 래핑하여 사용합니다.<br/>
+ * SelectTrigger는 드롭다운을 여는 트리거 버튼 역할을 하며, SelectContent는 드롭다운의 실제 콘텐츠를 렌더링합니다.<br/>
+ * SelectGroup, SelectLabel, SelectSeparator는 드롭다운의 그룹화 및 레이블링을 지원합니다.<br/>
+ * SelectItem은 드롭다운에서 선택 가능한 항목을 나타냅니다.<br/>
+ * 이 컴포넌트는 드롭다운 선택 상자를 쉽게 구현할 수 있도록 도와줍니다.<br/>
+ * <br/>
+ * ### 사용 예시
+ * ```tsx
+ * <Select>
+ *   <SelectTrigger placeholder="Select an option" />
+ *   <SelectContent>
+ *     <SelectItem value="option1">Option 1</SelectItem>
+ *     <SelectItem value="option2">Option 2</SelectItem>
+ *     <SelectItem value="option3">Option 3</SelectItem>
+ *   </SelectContent>
+ * </Select>
+ */
+export declare const Select: {
+    (props: React.ComponentProps<typeof SelectRadix.Root>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+interface SelectTrigger extends React.ComponentProps<typeof SelectRadix.Trigger> {
+    placeholder?: string;
+    variant?: SelectTriggerVariantStyles;
+    size?: SelectTriggerSizeStyles;
+    icon?: React.ReactNode;
+}
+export declare const SelectTrigger: {
+    ({ placeholder, variant, size, icon, ...rest }: SelectTrigger): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+interface SelectContent extends React.ComponentProps<typeof SelectRadix.Content> {
+    children: React.ReactNode;
+}
+export declare const SelectContent: {
+    ({ children, ...rest }: SelectContent): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export declare const SelectGroup: React.ForwardRefExoticComponent<SelectRadix.SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
+export declare const SelectLabel: {
+    (props: React.ComponentProps<typeof SelectRadix.Label>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export declare const SelectSeparator: {
+    (props: React.ComponentProps<typeof SelectRadix.Separator>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+interface SelectItem extends React.ComponentProps<typeof SelectRadix.Item> {
+    label: string;
+    indicator?: React.ReactNode;
+}
+export declare const SelectItem: {
+    ({ label, indicator, ...rest }: SelectItem): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/cjs/select/styles.d.ts

@@ -0,0 +1,107 @@
+export declare const selectIconWrapperStyles: Readonly<{
+    readonly base: Readonly<{
+        readonly display: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"display", "flex">;
+        readonly alignItems: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"alignItems", "center">;
+        readonly justifyContent: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"justifyContent", "center">;
+    }>;
+}>;
+export declare const selectTriggerStyles: Readonly<{
+    readonly base: Readonly<{
+        readonly display: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"display", "flex">;
+        readonly alignItems: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"alignItems", "center">;
+        readonly justifyContent: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"justifyContent", "space-between">;
+        readonly width: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"width", "100%">;
+        readonly backgroundColor: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"backgroundColor", string>;
+        readonly outline: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"outline", "none">;
+        readonly cursor: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"cursor", "pointer">;
+        readonly color: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"color", string>;
+    }>;
+    readonly outline: Readonly<{
+        readonly border: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"border", "none" | `1px solid ${import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>}`>;
+        readonly borderRadius: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"borderRadius", "4px">;
+        readonly padding: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"padding", "0 8px">;
+    }>;
+    readonly ghost: Readonly<{
+        readonly border: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"border", "none">;
+        readonly padding: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"padding", "0 8px">;
+        readonly ":has(button:has([data-placeholder]))": import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<":has(button:has([data-placeholder]))", {
+            readonly borderColor: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>;
+        }>;
+    }>;
+    readonly regular: Readonly<{
+        readonly padding: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"padding", "6px 8px">;
+        readonly fontSize: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"fontSize", string>;
+        readonly fontWeight: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"fontWeight", string>;
+        readonly lineHeight: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"lineHeight", string>;
+        readonly gap: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"gap", "8px">;
+    }>;
+    readonly large: Readonly<{
+        readonly padding: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"padding", "12px 16px">;
+        readonly fontSize: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"fontSize", string>;
+        readonly fontWeight: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"fontWeight", string>;
+        readonly lineHeight: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"lineHeight", string>;
+        readonly gap: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"gap", "12px">;
+    }>;
+}>;
+export type SelectTriggerVariantStyles = Extract<keyof typeof selectTriggerStyles, "outline" | "ghost">;
+export type SelectTriggerSizeStyles = Extract<keyof typeof selectTriggerStyles, "regular" | "large">;
+export declare const selectContentStyles: Readonly<{
+    readonly base: Readonly<{
+        readonly padding: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"padding", "8px">;
+        readonly minWidth: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"minWidth", "var(--radix-select-trigger-width)">;
+        readonly border: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"border", `1px solid ${import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>}`>;
+        readonly borderRadius: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"borderRadius", string>;
+        readonly backgroundColor: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"backgroundColor", string>;
+        readonly boxShadow: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"boxShadow", string>;
+    }>;
+}>;
+export declare const selectItemStyles: Readonly<{
+    readonly base: Readonly<{
+        readonly display: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"display", "flex">;
+        readonly alignItems: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"alignItems", "center">;
+        readonly justifyContent: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"justifyContent", "space-between">;
+        readonly gap: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"gap", "8px">;
+        readonly padding: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"padding", "6px 8px">;
+        readonly cursor: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"cursor", "pointer">;
+        readonly color: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"color", string>;
+        readonly fontSize: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"fontSize", string>;
+        readonly fontWeight: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"fontWeight", string>;
+        readonly lineHeight: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"lineHeight", string>;
+        readonly outline: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"outline", "none">;
+        readonly borderRadius: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"borderRadius", string>;
+        readonly ":hover:not(:is([data-disabled]))": import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<":hover:not(:is([data-disabled]))", {
+            readonly backgroundColor: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>;
+            readonly color: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>;
+        }>;
+        readonly ":is([data-disabled])": import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<":is([data-disabled])", {
+            readonly cursor: "not-allowed";
+            readonly color: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>;
+        }>;
+        readonly ":is([data-state='checked'])": import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<":is([data-state='checked'])", {
+            readonly backgroundColor: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>;
+            readonly color: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>;
+        }>;
+    }>;
+    readonly indicator: Readonly<{
+        readonly width: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"width", "16px">;
+        readonly display: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"display", "flex">;
+        readonly alignItems: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"alignItems", "center">;
+        readonly justifyContent: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"justifyContent", "center">;
+    }>;
+}>;
+export declare const selectSeparatorStyles: Readonly<{
+    readonly base: Readonly<{
+        readonly height: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"height", "1px">;
+        readonly backgroundColor: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"backgroundColor", string>;
+        readonly margin: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"margin", "5px 0">;
+    }>;
+}>;
+export declare const selectGroupLabelStyles: Readonly<{
+    readonly base: Readonly<{
+        readonly padding: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"padding", "6px 8px">;
+        readonly color: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"color", string>;
+        readonly fontSize: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"fontSize", string>;
+        readonly fontWeight: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"fontWeight", string>;
+        readonly lineHeight: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"lineHeight", string>;
+    }>;
+}>;

package/dist/cjs/styles/common.d.ts

@@ -0,0 +1,7 @@
+export declare const commonStyles: Readonly<{
+    readonly flexCenter: Readonly<{
+        readonly display: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"display", "flex">;
+        readonly alignItems: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"alignItems", "center">;
+        readonly justifyContent: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"justifyContent", "center">;
+    }>;
+}>;

package/dist/cjs/styles/layout.stylex.d.ts

@@ -0,0 +1,19 @@
+import * as stylex from "@stylexjs/stylex";
+export declare const spacing: stylex.VarGroup<Readonly<{
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    xxl: string;
+    xxxl: string;
+}>, symbol>;
+export declare const borderRadius: stylex.VarGroup<Readonly<{
+    none: string;
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    full: string;
+}>, symbol>;

package/dist/cjs/styles/primitiveColors.stylex.d.ts

@@ -0,0 +1,175 @@
+import * as stylex from "@stylexjs/stylex";
+export declare const primitiveColors: stylex.VarGroup<Readonly<{
+    blue100: string;
+    blue200: string;
+    blue300: string;
+    blue400: string;
+    blue500: string;
+    blue600: string;
+    blue700: string;
+    blue800: string;
+    blue900: string;
+    cyan100: string;
+    cyan200: string;
+    cyan300: string;
+    cyan400: string;
+    cyan500: string;
+    cyan600: string;
+    cyan700: string;
+    cyan800: string;
+    cyan900: string;
+    darkOpacity100: string;
+    darkOpacity150: string;
+    darkOpacity200: string;
+    darkOpacity25: string;
+    darkOpacity250: string;
+    darkOpacity300: string;
+    darkOpacity350: string;
+    darkOpacity400: string;
+    darkOpacity450: string;
+    darkOpacity50: string;
+    darkOpacity500: string;
+    darkOpacity550: string;
+    darkOpacity600: string;
+    darkOpacity650: string;
+    darkOpacity700: string;
+    darkOpacity750: string;
+    darkOpacity800: string;
+    darkOpacity850: string;
+    darkOpacity900: string;
+    green100: string;
+    green200: string;
+    green300: string;
+    green400: string;
+    green500: string;
+    green600: string;
+    green700: string;
+    green800: string;
+    green900: string;
+    lightOpacity100: string;
+    lightOpacity150: string;
+    lightOpacity200: string;
+    lightOpacity25: string;
+    lightOpacity250: string;
+    lightOpacity300: string;
+    lightOpacity350: string;
+    lightOpacity400: string;
+    lightOpacity450: string;
+    lightOpacity50: string;
+    lightOpacity500: string;
+    lightOpacity550: string;
+    lightOpacity600: string;
+    lightOpacity650: string;
+    lightOpacity700: string;
+    lightOpacity750: string;
+    lightOpacity800: string;
+    lightOpacity850: string;
+    lightOpacity900: string;
+    magenta100: string;
+    magenta200: string;
+    magenta300: string;
+    magenta400: string;
+    magenta500: string;
+    magenta600: string;
+    magenta700: string;
+    magenta800: string;
+    magenta900: string;
+    neutral100: string;
+    neutral150: string;
+    neutral200: string;
+    neutral25: string;
+    neutral250: string;
+    neutral300: string;
+    neutral350: string;
+    neutral400: string;
+    neutral450: string;
+    neutral50: string;
+    neutral500: string;
+    neutral550: string;
+    neutral600: string;
+    neutral650: string;
+    neutral700: string;
+    neutral750: string;
+    neutral800: string;
+    neutral850: string;
+    neutral900: string;
+    neutral950: string;
+    orange100: string;
+    orange200: string;
+    orange300: string;
+    orange400: string;
+    orange500: string;
+    orange600: string;
+    orange700: string;
+    orange800: string;
+    orange900: string;
+    pink100: string;
+    pink200: string;
+    pink300: string;
+    pink400: string;
+    pink500: string;
+    pink600: string;
+    pink700: string;
+    pink800: string;
+    pink900: string;
+    pureBlack: string;
+    pureBlack50: string;
+    pureBlack75: string;
+    pureTransparent: string;
+    pureWhite: string;
+    pureWhite50: string;
+    purple100: string;
+    purple200: string;
+    purple300: string;
+    purple400: string;
+    purple500: string;
+    purple600: string;
+    purple700: string;
+    purple800: string;
+    purple900: string;
+    red100: string;
+    red200: string;
+    red300: string;
+    red400: string;
+    red500: string;
+    red600: string;
+    red700: string;
+    red800: string;
+    red900: string;
+    teal100: string;
+    teal200: string;
+    teal300: string;
+    teal400: string;
+    teal500: string;
+    teal600: string;
+    teal700: string;
+    teal800: string;
+    teal900: string;
+    telepixRed100: string;
+    telepixRed200: string;
+    telepixRed300: string;
+    telepixRed400: string;
+    telepixRed500: string;
+    telepixRed600: string;
+    telepixRed700: string;
+    telepixRed800: string;
+    telepixRed900: string;
+    violet100: string;
+    violet200: string;
+    violet300: string;
+    violet400: string;
+    violet500: string;
+    violet600: string;
+    violet700: string;
+    violet800: string;
+    violet900: string;
+    yellow100: string;
+    yellow200: string;
+    yellow300: string;
+    yellow400: string;
+    yellow500: string;
+    yellow600: string;
+    yellow700: string;
+    yellow800: string;
+    yellow900: string;
+}>, symbol>;