@fransek/ui 0.2.0 → 0.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/field/Field.js +1 -1
- package/dist/cjs/components/field/Field.js.map +1 -1
- package/dist/cjs/components/select/Select.d.ts +7 -8
- package/dist/cjs/components/select/Select.js +4 -4
- package/dist/cjs/components/select/Select.js.map +1 -1
- package/dist/cjs/index.css +1 -1
- package/dist/esm/components/field/Field.js +1 -1
- package/dist/esm/components/field/Field.js.map +1 -1
- package/dist/esm/components/select/Select.d.ts +7 -8
- package/dist/esm/components/select/Select.js +4 -4
- package/dist/esm/components/select/Select.js.map +1 -1
- package/dist/esm/index.css +1 -1
- package/package.json +3 -3
|
@@ -11,7 +11,7 @@ function Field({ label, isValidating, isValidatingMessage, errorMessage, classNa
|
|
|
11
11
|
label && (React.createElement(field.Field.Label, { className: utils.cn("text-foreground text-sm font-semibold", labelClassName), ...labelProps }, label)),
|
|
12
12
|
children,
|
|
13
13
|
React.createElement(field.Field.Error, { className: utils.cn("text-error-foreground text-sm", errorMessageClassName), match: invalid, ...errorMessageProps }, errorMessage),
|
|
14
|
-
isValidating && isValidatingMessage && !errorMessage && (React.createElement(field.Field.Description, { className: utils.cn("text-primary-foreground text-sm", isValidatingMessageClassName), ...isValidatingMessageProps }, isValidatingMessage)),
|
|
14
|
+
isValidating && isValidatingMessage && !errorMessage && (React.createElement(field.Field.Description, { className: utils.cn("text-primary-foreground animate-validating-message text-sm", isValidatingMessageClassName), ...isValidatingMessageProps }, isValidatingMessage)),
|
|
15
15
|
description && (React.createElement(field.Field.Description, { className: utils.cn("text-muted-foreground text-sm", descriptionClassName), ...descriptionProps }, description)))));
|
|
16
16
|
}
|
|
17
17
|
const FieldContext = React.createContext({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Field.js","sources":["../../../../src/components/field/Field.tsx"],"sourcesContent":["import {\n Field as BaseField,\n FieldRootProps as BaseFieldRootProps,\n FieldDescriptionProps,\n FieldErrorProps,\n FieldLabelProps,\n} from \"@base-ui/react/field\";\nimport React from \"react\";\nimport { BasicFieldProps, cn } from \"../../lib/utils\";\n\nexport interface FieldProps extends BaseFieldRootProps, BasicFieldProps {\n labelProps?: FieldLabelProps;\n errorMessageProps?: FieldErrorProps;\n descriptionProps?: FieldDescriptionProps;\n isValidatingMessageProps?: FieldDescriptionProps;\n}\n\nexport function Field({\n label,\n isValidating,\n isValidatingMessage,\n errorMessage,\n className,\n description,\n children,\n labelProps: { className: labelClassName, ...labelProps } = {},\n errorMessageProps: {\n className: errorMessageClassName,\n ...errorMessageProps\n } = {},\n descriptionProps: {\n className: descriptionClassName,\n ...descriptionProps\n } = {},\n isValidatingMessageProps: {\n className: isValidatingMessageClassName,\n ...isValidatingMessageProps\n } = {},\n ...props\n}: FieldProps) {\n const invalid = !!errorMessage;\n\n return (\n <FieldContext.Provider value={{ isValidating: !!isValidating }}>\n <BaseField.Root\n className={cn(\"flex flex-col gap-1\", className)}\n invalid={invalid}\n data-validating={isValidating ? \"\" : undefined}\n {...props}\n >\n {label && (\n <BaseField.Label\n className={cn(\n \"text-foreground text-sm font-semibold\",\n labelClassName,\n )}\n {...labelProps}\n >\n {label}\n </BaseField.Label>\n )}\n {children}\n <BaseField.Error\n className={cn(\"text-error-foreground text-sm\", errorMessageClassName)}\n match={invalid}\n {...errorMessageProps}\n >\n {errorMessage}\n </BaseField.Error>\n {isValidating && isValidatingMessage && !errorMessage && (\n <BaseField.Description\n className={cn(\n \"text-primary-foreground text-sm\",\n isValidatingMessageClassName,\n )}\n {...isValidatingMessageProps}\n >\n {isValidatingMessage}\n </BaseField.Description>\n )}\n {description && (\n <BaseField.Description\n className={cn(\n \"text-muted-foreground text-sm\",\n descriptionClassName,\n )}\n {...descriptionProps}\n >\n {description}\n </BaseField.Description>\n )}\n </BaseField.Root>\n </FieldContext.Provider>\n );\n}\n\nexport const FieldContext = React.createContext({\n isValidating: false,\n});\n\nexport function useFieldContext() {\n return React.useContext(FieldContext);\n}\n"],"names":["BaseField","cn"],"mappings":";;;;;;AAiBM,SAAU,KAAK,CAAC,EACpB,KAAK,EACL,YAAY,EACZ,mBAAmB,EACnB,YAAY,EACZ,SAAS,EACT,WAAW,EACX,QAAQ,EACR,UAAU,EAAE,EAAE,SAAS,EAAE,cAAc,EAAE,GAAG,UAAU,EAAE,GAAG,EAAE,EAC7D,iBAAiB,EAAE,EACjB,SAAS,EAAE,qBAAqB,EAChC,GAAG,iBAAiB,EACrB,GAAG,EAAE,EACN,gBAAgB,EAAE,EAChB,SAAS,EAAE,oBAAoB,EAC/B,GAAG,gBAAgB,EACpB,GAAG,EAAE,EACN,wBAAwB,EAAE,EACxB,SAAS,EAAE,4BAA4B,EACvC,GAAG,wBAAwB,EAC5B,GAAG,EAAE,EACN,GAAG,KAAK,EACG,EAAA;AACX,IAAA,MAAM,OAAO,GAAG,CAAC,CAAC,YAAY;AAE9B,IAAA,QACE,KAAA,CAAA,aAAA,CAAC,YAAY,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,EAAE,YAAY,EAAE,CAAC,CAAC,YAAY,EAAE,EAAA;QAC5D,KAAA,CAAA,aAAA,CAACA,WAAS,CAAC,IAAI,EAAA,EACb,SAAS,EAAEC,QAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,EAC/C,OAAO,EAAE,OAAO,EAAA,iBAAA,EACC,YAAY,GAAG,EAAE,GAAG,SAAS,EAAA,GAC1C,KAAK,EAAA;YAER,KAAK,KACJ,KAAA,CAAA,aAAA,CAACD,WAAS,CAAC,KAAK,EAAA,EACd,SAAS,EAAEC,QAAE,CACX,uCAAuC,EACvC,cAAc,CACf,EAAA,GACG,UAAU,EAAA,EAEb,KAAK,CACU,CACnB;YACA,QAAQ;YACT,KAAA,CAAA,aAAA,CAACD,WAAS,CAAC,KAAK,EAAA,EACd,SAAS,EAAEC,QAAE,CAAC,+BAA+B,EAAE,qBAAqB,CAAC,EACrE,KAAK,EAAE,OAAO,KACV,iBAAiB,EAAA,EAEpB,YAAY,CACG;YACjB,YAAY,IAAI,mBAAmB,IAAI,CAAC,YAAY,KACnD,KAAA,CAAA,aAAA,CAACD,WAAS,CAAC,WAAW,EAAA,EACpB,SAAS,EAAEC,QAAE,CACX,
|
|
1
|
+
{"version":3,"file":"Field.js","sources":["../../../../src/components/field/Field.tsx"],"sourcesContent":["import {\n Field as BaseField,\n FieldRootProps as BaseFieldRootProps,\n FieldDescriptionProps,\n FieldErrorProps,\n FieldLabelProps,\n} from \"@base-ui/react/field\";\nimport React from \"react\";\nimport { BasicFieldProps, cn } from \"../../lib/utils\";\n\nexport interface FieldProps extends BaseFieldRootProps, BasicFieldProps {\n labelProps?: FieldLabelProps;\n errorMessageProps?: FieldErrorProps;\n descriptionProps?: FieldDescriptionProps;\n isValidatingMessageProps?: FieldDescriptionProps;\n}\n\nexport function Field({\n label,\n isValidating,\n isValidatingMessage,\n errorMessage,\n className,\n description,\n children,\n labelProps: { className: labelClassName, ...labelProps } = {},\n errorMessageProps: {\n className: errorMessageClassName,\n ...errorMessageProps\n } = {},\n descriptionProps: {\n className: descriptionClassName,\n ...descriptionProps\n } = {},\n isValidatingMessageProps: {\n className: isValidatingMessageClassName,\n ...isValidatingMessageProps\n } = {},\n ...props\n}: FieldProps) {\n const invalid = !!errorMessage;\n\n return (\n <FieldContext.Provider value={{ isValidating: !!isValidating }}>\n <BaseField.Root\n className={cn(\"flex flex-col gap-1\", className)}\n invalid={invalid}\n data-validating={isValidating ? \"\" : undefined}\n {...props}\n >\n {label && (\n <BaseField.Label\n className={cn(\n \"text-foreground text-sm font-semibold\",\n labelClassName,\n )}\n {...labelProps}\n >\n {label}\n </BaseField.Label>\n )}\n {children}\n <BaseField.Error\n className={cn(\"text-error-foreground text-sm\", errorMessageClassName)}\n match={invalid}\n {...errorMessageProps}\n >\n {errorMessage}\n </BaseField.Error>\n {isValidating && isValidatingMessage && !errorMessage && (\n <BaseField.Description\n className={cn(\n \"text-primary-foreground animate-validating-message text-sm\",\n isValidatingMessageClassName,\n )}\n {...isValidatingMessageProps}\n >\n {isValidatingMessage}\n </BaseField.Description>\n )}\n {description && (\n <BaseField.Description\n className={cn(\n \"text-muted-foreground text-sm\",\n descriptionClassName,\n )}\n {...descriptionProps}\n >\n {description}\n </BaseField.Description>\n )}\n </BaseField.Root>\n </FieldContext.Provider>\n );\n}\n\nexport const FieldContext = React.createContext({\n isValidating: false,\n});\n\nexport function useFieldContext() {\n return React.useContext(FieldContext);\n}\n"],"names":["BaseField","cn"],"mappings":";;;;;;AAiBM,SAAU,KAAK,CAAC,EACpB,KAAK,EACL,YAAY,EACZ,mBAAmB,EACnB,YAAY,EACZ,SAAS,EACT,WAAW,EACX,QAAQ,EACR,UAAU,EAAE,EAAE,SAAS,EAAE,cAAc,EAAE,GAAG,UAAU,EAAE,GAAG,EAAE,EAC7D,iBAAiB,EAAE,EACjB,SAAS,EAAE,qBAAqB,EAChC,GAAG,iBAAiB,EACrB,GAAG,EAAE,EACN,gBAAgB,EAAE,EAChB,SAAS,EAAE,oBAAoB,EAC/B,GAAG,gBAAgB,EACpB,GAAG,EAAE,EACN,wBAAwB,EAAE,EACxB,SAAS,EAAE,4BAA4B,EACvC,GAAG,wBAAwB,EAC5B,GAAG,EAAE,EACN,GAAG,KAAK,EACG,EAAA;AACX,IAAA,MAAM,OAAO,GAAG,CAAC,CAAC,YAAY;AAE9B,IAAA,QACE,KAAA,CAAA,aAAA,CAAC,YAAY,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,EAAE,YAAY,EAAE,CAAC,CAAC,YAAY,EAAE,EAAA;QAC5D,KAAA,CAAA,aAAA,CAACA,WAAS,CAAC,IAAI,EAAA,EACb,SAAS,EAAEC,QAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,EAC/C,OAAO,EAAE,OAAO,EAAA,iBAAA,EACC,YAAY,GAAG,EAAE,GAAG,SAAS,EAAA,GAC1C,KAAK,EAAA;YAER,KAAK,KACJ,KAAA,CAAA,aAAA,CAACD,WAAS,CAAC,KAAK,EAAA,EACd,SAAS,EAAEC,QAAE,CACX,uCAAuC,EACvC,cAAc,CACf,EAAA,GACG,UAAU,EAAA,EAEb,KAAK,CACU,CACnB;YACA,QAAQ;YACT,KAAA,CAAA,aAAA,CAACD,WAAS,CAAC,KAAK,EAAA,EACd,SAAS,EAAEC,QAAE,CAAC,+BAA+B,EAAE,qBAAqB,CAAC,EACrE,KAAK,EAAE,OAAO,KACV,iBAAiB,EAAA,EAEpB,YAAY,CACG;YACjB,YAAY,IAAI,mBAAmB,IAAI,CAAC,YAAY,KACnD,KAAA,CAAA,aAAA,CAACD,WAAS,CAAC,WAAW,EAAA,EACpB,SAAS,EAAEC,QAAE,CACX,4DAA4D,EAC5D,4BAA4B,CAC7B,EAAA,GACG,wBAAwB,EAAA,EAE3B,mBAAmB,CACE,CACzB;YACA,WAAW,KACV,KAAA,CAAA,aAAA,CAACD,WAAS,CAAC,WAAW,EAAA,EACpB,SAAS,EAAEC,QAAE,CACX,+BAA+B,EAC/B,oBAAoB,CACrB,EAAA,GACG,gBAAgB,EAAA,EAEnB,WAAW,CACU,CACzB,CACc,CACK;AAE5B;AAEO,MAAM,YAAY,GAAG,KAAK,CAAC,aAAa,CAAC;AAC9C,IAAA,YAAY,EAAE,KAAK;AACpB,CAAA;SAEe,eAAe,GAAA;AAC7B,IAAA,OAAO,KAAK,CAAC,UAAU,CAAC,YAAY,CAAC;AACvC;;;;;;"}
|
|
@@ -1,14 +1,13 @@
|
|
|
1
|
-
import { SelectIconProps, SelectItemIndicatorProps, SelectItemProps, SelectItemTextProps, SelectListProps, SelectPopupProps, SelectPortalProps, SelectPositionerProps, SelectScrollDownArrowProps, SelectScrollUpArrowProps, SelectTriggerProps, SelectValueProps } from "@base-ui/react/select";
|
|
1
|
+
import { SelectIconProps, SelectItemIndicatorProps, SelectItemProps, SelectItemTextProps, SelectListProps, SelectPopupProps, SelectPortalProps, SelectPositionerProps, SelectRootProps, SelectScrollDownArrowProps, SelectScrollUpArrowProps, SelectTriggerProps, SelectValueProps } from "@base-ui/react/select";
|
|
2
2
|
import React from "react";
|
|
3
3
|
import { BasicFieldProps } from "../../lib/utils";
|
|
4
4
|
import { FieldProps } from "../field/Field";
|
|
5
|
-
export interface SelectProps<T> extends SelectTriggerProps, BasicFieldProps {
|
|
6
|
-
items?: ReadonlyArray<{
|
|
7
|
-
label: React.ReactNode;
|
|
8
|
-
value: T;
|
|
9
|
-
}>;
|
|
10
|
-
className?: string;
|
|
5
|
+
export interface SelectProps<T> extends Omit<SelectTriggerProps, "value">, SelectRootProps<T>, BasicFieldProps {
|
|
11
6
|
placeholder?: React.ReactNode;
|
|
7
|
+
triggerDisabled?: SelectTriggerProps["disabled"];
|
|
8
|
+
triggerId?: SelectTriggerProps["id"];
|
|
9
|
+
triggerName?: SelectTriggerProps["name"];
|
|
10
|
+
triggerValue?: SelectTriggerProps["value"];
|
|
12
11
|
fieldProps?: FieldProps;
|
|
13
12
|
triggerProps?: SelectTriggerProps;
|
|
14
13
|
valueProps?: SelectValueProps;
|
|
@@ -25,4 +24,4 @@ export interface SelectProps<T> extends SelectTriggerProps, BasicFieldProps {
|
|
|
25
24
|
itemTextProps?: SelectItemTextProps;
|
|
26
25
|
scrollDownArrowProps?: SelectScrollDownArrowProps;
|
|
27
26
|
}
|
|
28
|
-
export declare function Select<T>({ label, isValidating, isValidatingMessage, errorMessage, className, description, fieldProps, items, placeholder, valueProps: { className: valueClassName, ...valueProps }, selectIconProps: { className: selectIconClassName, ...selectIconProps }, iconProps: { className: iconClassName, ...iconProps }, portalProps, positionerProps: { className: positionerClassName, ...positionerProps }, popupProps: { className: popupClassName, ...popupProps }, scrollUpArrowProps: { className: scrollUpArrowClassName, ...scrollUpArrowProps }, listProps: { className: listClassName, ...listProps }, itemProps: { className: itemClassName, ...itemProps }, itemIndicatorProps: { className: itemIndicatorClassName, ...itemIndicatorProps }, checkIconProps: { className: checkIconClassName, ...checkIconProps }, itemTextProps: { className: itemTextClassName, ...itemTextProps }, scrollDownArrowProps: { className: scrollDownArrowClassName, ...scrollDownArrowProps }, ...props }: SelectProps<T>): React.JSX.Element;
|
|
27
|
+
export declare function Select<T>({ label, isValidating, isValidatingMessage, errorMessage, className, description, fieldProps, items, placeholder, actionsRef, autoComplete, defaultOpen, defaultValue, disabled, highlightItemOnHover, id, inputRef, isItemEqualToValue, itemToStringLabel, itemToStringValue, modal, multiple, name, onOpenChange, onOpenChangeComplete, onValueChange, open, readOnly, required, value, triggerDisabled, triggerId, triggerName, triggerValue, valueProps: { className: valueClassName, ...valueProps }, selectIconProps: { className: selectIconClassName, ...selectIconProps }, iconProps: { className: iconClassName, ...iconProps }, portalProps, positionerProps: { className: positionerClassName, ...positionerProps }, popupProps: { className: popupClassName, ...popupProps }, scrollUpArrowProps: { className: scrollUpArrowClassName, ...scrollUpArrowProps }, listProps: { className: listClassName, ...listProps }, itemProps: { className: itemClassName, ...itemProps }, itemIndicatorProps: { className: itemIndicatorClassName, ...itemIndicatorProps }, checkIconProps: { className: checkIconClassName, ...checkIconProps }, itemTextProps: { className: itemTextClassName, ...itemTextProps }, scrollDownArrowProps: { className: scrollDownArrowClassName, ...scrollDownArrowProps }, ...props }: SelectProps<T>): React.JSX.Element;
|
|
@@ -6,10 +6,10 @@ var React = require('react');
|
|
|
6
6
|
var utils = require('../../lib/utils.js');
|
|
7
7
|
var Field = require('../field/Field.js');
|
|
8
8
|
|
|
9
|
-
function Select({ label, isValidating, isValidatingMessage, errorMessage, className, description, fieldProps, items, placeholder, valueProps: { className: valueClassName, ...valueProps } = {}, selectIconProps: { className: selectIconClassName, ...selectIconProps } = {}, iconProps: { className: iconClassName, ...iconProps } = {}, portalProps, positionerProps: { className: positionerClassName, ...positionerProps } = {}, popupProps: { className: popupClassName, ...popupProps } = {}, scrollUpArrowProps: { className: scrollUpArrowClassName, ...scrollUpArrowProps } = {}, listProps: { className: listClassName, ...listProps } = {}, itemProps: { className: itemClassName, ...itemProps } = {}, itemIndicatorProps: { className: itemIndicatorClassName, ...itemIndicatorProps } = {}, checkIconProps: { className: checkIconClassName, ...checkIconProps } = {}, itemTextProps: { className: itemTextClassName, ...itemTextProps } = {}, scrollDownArrowProps: { className: scrollDownArrowClassName, ...scrollDownArrowProps } = {}, ...props }) {
|
|
9
|
+
function Select({ label, isValidating, isValidatingMessage, errorMessage, className, description, fieldProps, items, placeholder, actionsRef, autoComplete, defaultOpen, defaultValue, disabled, highlightItemOnHover, id, inputRef, isItemEqualToValue, itemToStringLabel, itemToStringValue, modal, multiple, name, onOpenChange, onOpenChangeComplete, onValueChange, open, readOnly, required, value, triggerDisabled, triggerId, triggerName, triggerValue, valueProps: { className: valueClassName, ...valueProps } = {}, selectIconProps: { className: selectIconClassName, ...selectIconProps } = {}, iconProps: { className: iconClassName, ...iconProps } = {}, portalProps, positionerProps: { className: positionerClassName, ...positionerProps } = {}, popupProps: { className: popupClassName, ...popupProps } = {}, scrollUpArrowProps: { className: scrollUpArrowClassName, ...scrollUpArrowProps } = {}, listProps: { className: listClassName, ...listProps } = {}, itemProps: { className: itemClassName, ...itemProps } = {}, itemIndicatorProps: { className: itemIndicatorClassName, ...itemIndicatorProps } = {}, checkIconProps: { className: checkIconClassName, ...checkIconProps } = {}, itemTextProps: { className: itemTextClassName, ...itemTextProps } = {}, scrollDownArrowProps: { className: scrollDownArrowClassName, ...scrollDownArrowProps } = {}, ...props }) {
|
|
10
10
|
return (React.createElement(Field.Field, { label: label, isValidating: isValidating, isValidatingMessage: isValidatingMessage, errorMessage: errorMessage, description: description, ...fieldProps },
|
|
11
|
-
React.createElement(select.Select.Root, { items: items },
|
|
12
|
-
React.createElement(select.Select.Trigger, { className: utils.cn("data-invalid:not-focus:border-error-foreground data-validating:not-data-invalid:animate-validating bg-background hover:bg-card data-popup-open:bg-card focus-visible:border-highlight flex min-w-40 items-center justify-between gap-3 rounded-lg border p-2 text-base transition-colors outline-none select-none", className), "data-validating": isValidating ? "" : undefined, ...props },
|
|
11
|
+
React.createElement(select.Select.Root, { items: items, actionsRef: actionsRef, autoComplete: autoComplete, defaultOpen: defaultOpen, defaultValue: defaultValue, disabled: disabled, highlightItemOnHover: highlightItemOnHover, id: id, inputRef: inputRef, isItemEqualToValue: isItemEqualToValue, itemToStringLabel: itemToStringLabel, itemToStringValue: itemToStringValue, modal: modal, multiple: multiple, name: name, onOpenChange: onOpenChange, onOpenChangeComplete: onOpenChangeComplete, onValueChange: onValueChange, open: open, readOnly: readOnly, required: required, value: value },
|
|
12
|
+
React.createElement(select.Select.Trigger, { className: utils.cn("data-invalid:not-focus:border-error-foreground data-validating:not-data-invalid:animate-validating bg-background hover:bg-card data-popup-open:bg-card focus-visible:border-highlight flex min-w-40 items-center justify-between gap-3 rounded-lg border p-2 text-base transition-colors outline-none select-none", className), "data-validating": isValidating ? "" : undefined, disabled: triggerDisabled, id: triggerId, name: triggerName, value: triggerValue, ...props },
|
|
13
13
|
React.createElement(select.Select.Value, { className: utils.cn("data-placeholder:opacity-60", valueClassName), placeholder: placeholder, ...valueProps }),
|
|
14
14
|
React.createElement(select.Select.Icon, { className: utils.cn("flex", selectIconClassName), ...selectIconProps },
|
|
15
15
|
React.createElement(lucideReact.ChevronsUpDown, { className: utils.cn("size-4", iconClassName), ...iconProps }))),
|
|
@@ -18,7 +18,7 @@ function Select({ label, isValidating, isValidatingMessage, errorMessage, classN
|
|
|
18
18
|
React.createElement(select.Select.Popup, { className: utils.cn("group bg-background outline-border min-w-(--anchor-width) origin-(--transform-origin) rounded-lg bg-clip-padding shadow-lg outline transition-[transform,scale,opacity] data-ending-style:scale-90 data-ending-style:opacity-0 data-starting-style:scale-90 data-starting-style:opacity-0 data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] data-[side=none]:data-ending-style:transition-none data-[side=none]:data-starting-style:scale-100 data-[side=none]:data-starting-style:opacity-100 data-[side=none]:data-starting-style:transition-none", popupClassName), ...popupProps },
|
|
19
19
|
React.createElement(select.Select.ScrollUpArrow, { className: utils.cn("bg-background top-0 z-1 flex h-4 w-full cursor-default items-center justify-center rounded-lg text-center text-xs before:absolute before:left-0 before:h-full before:w-full before:content-[''] data-[side=none]:before:-top-full", scrollUpArrowClassName), ...scrollUpArrowProps }),
|
|
20
20
|
React.createElement(select.Select.List, { className: utils.cn("relative max-h-(--available-height) scroll-py-6 overflow-y-auto py-1", listClassName), ...listProps }, Array.isArray(items) &&
|
|
21
|
-
items.map(({ label, value }) => (React.createElement(select.Select.Item, { key:
|
|
21
|
+
items.map(({ label, value }) => (React.createElement(select.Select.Item, { key: String(value), value: value, className: utils.cn("data-highlighted:before:bg-primary data-highlighted:text-on-primary grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-4 pl-2.5 text-sm leading-4 outline-none select-none group-data-[side=none]:pr-12 group-data-[side=none]:text-base group-data-[side=none]:leading-4 data-highlighted:relative data-highlighted:z-0 data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:rounded-sm pointer-coarse:py-2.5 pointer-coarse:text-[0.925rem]", itemClassName), ...itemProps },
|
|
22
22
|
React.createElement(select.Select.ItemIndicator, { className: utils.cn("col-start-1", itemIndicatorClassName), ...itemIndicatorProps },
|
|
23
23
|
React.createElement(lucideReact.Check, { className: utils.cn("size-3", checkIconClassName), ...checkIconProps })),
|
|
24
24
|
React.createElement(select.Select.ItemText, { className: utils.cn("col-start-2", itemTextClassName), ...itemTextProps }, label))))),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.js","sources":["../../../../src/components/select/Select.tsx"],"sourcesContent":["import {\n Select as BaseSelect,\n SelectIconProps,\n SelectItemIndicatorProps,\n SelectItemProps,\n SelectItemTextProps,\n SelectListProps,\n SelectPopupProps,\n SelectPortalProps,\n SelectPositionerProps,\n SelectScrollDownArrowProps,\n SelectScrollUpArrowProps,\n SelectTriggerProps,\n SelectValueProps,\n} from \"@base-ui/react/select\";\nimport { Check, ChevronsUpDown } from \"lucide-react\";\nimport React from \"react\";\nimport { BasicFieldProps, cn } from \"../../lib/utils\";\nimport { Field, FieldProps } from \"../field/Field\";\n\nexport interface SelectProps<T> extends SelectTriggerProps, BasicFieldProps {\n items?: ReadonlyArray<{\n label: React.ReactNode;\n value: T;\n }>;\n className?: string;\n placeholder?: React.ReactNode;\n fieldProps?: FieldProps;\n triggerProps?: SelectTriggerProps;\n valueProps?: SelectValueProps;\n selectIconProps?: SelectIconProps;\n iconProps?: React.ComponentPropsWithoutRef<\"svg\">;\n portalProps?: SelectPortalProps;\n positionerProps?: SelectPositionerProps;\n popupProps?: SelectPopupProps;\n scrollUpArrowProps?: SelectScrollUpArrowProps;\n listProps?: SelectListProps;\n itemProps?: SelectItemProps;\n itemIndicatorProps?: SelectItemIndicatorProps;\n checkIconProps?: React.ComponentPropsWithoutRef<\"svg\">;\n itemTextProps?: SelectItemTextProps;\n scrollDownArrowProps?: SelectScrollDownArrowProps;\n}\n\nexport function Select<T>({\n label,\n isValidating,\n isValidatingMessage,\n errorMessage,\n className,\n description,\n fieldProps,\n items,\n placeholder,\n valueProps: { className: valueClassName, ...valueProps } = {},\n selectIconProps: { className: selectIconClassName, ...selectIconProps } = {},\n iconProps: { className: iconClassName, ...iconProps } = {},\n portalProps,\n positionerProps: { className: positionerClassName, ...positionerProps } = {},\n popupProps: { className: popupClassName, ...popupProps } = {},\n scrollUpArrowProps: {\n className: scrollUpArrowClassName,\n ...scrollUpArrowProps\n } = {},\n listProps: { className: listClassName, ...listProps } = {},\n itemProps: { className: itemClassName, ...itemProps } = {},\n itemIndicatorProps: {\n className: itemIndicatorClassName,\n ...itemIndicatorProps\n } = {},\n checkIconProps: { className: checkIconClassName, ...checkIconProps } = {},\n itemTextProps: { className: itemTextClassName, ...itemTextProps } = {},\n scrollDownArrowProps: {\n className: scrollDownArrowClassName,\n ...scrollDownArrowProps\n } = {},\n ...props\n}: SelectProps<T>) {\n return (\n <Field\n label={label}\n isValidating={isValidating}\n isValidatingMessage={isValidatingMessage}\n errorMessage={errorMessage}\n description={description}\n {...fieldProps}\n >\n <BaseSelect.Root items={items}>\n <BaseSelect.Trigger\n className={cn(\n \"data-invalid:not-focus:border-error-foreground data-validating:not-data-invalid:animate-validating bg-background hover:bg-card data-popup-open:bg-card focus-visible:border-highlight flex min-w-40 items-center justify-between gap-3 rounded-lg border p-2 text-base transition-colors outline-none select-none\",\n className,\n )}\n data-validating={isValidating ? \"\" : undefined}\n {...props}\n >\n <BaseSelect.Value\n className={cn(\"data-placeholder:opacity-60\", valueClassName)}\n placeholder={placeholder}\n {...valueProps}\n />\n <BaseSelect.Icon\n className={cn(\"flex\", selectIconClassName)}\n {...selectIconProps}\n >\n <ChevronsUpDown\n className={cn(\"size-4\", iconClassName)}\n {...iconProps}\n />\n </BaseSelect.Icon>\n </BaseSelect.Trigger>\n <BaseSelect.Portal {...portalProps}>\n <BaseSelect.Positioner\n className={cn(\"z-10 outline-none select-none\", positionerClassName)}\n sideOffset={8}\n {...positionerProps}\n >\n <BaseSelect.Popup\n className={cn(\n \"group bg-background outline-border min-w-(--anchor-width) origin-(--transform-origin) rounded-lg bg-clip-padding shadow-lg outline transition-[transform,scale,opacity] data-ending-style:scale-90 data-ending-style:opacity-0 data-starting-style:scale-90 data-starting-style:opacity-0 data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] data-[side=none]:data-ending-style:transition-none data-[side=none]:data-starting-style:scale-100 data-[side=none]:data-starting-style:opacity-100 data-[side=none]:data-starting-style:transition-none\",\n popupClassName,\n )}\n {...popupProps}\n >\n <BaseSelect.ScrollUpArrow\n className={cn(\n \"bg-background top-0 z-1 flex h-4 w-full cursor-default items-center justify-center rounded-lg text-center text-xs before:absolute before:left-0 before:h-full before:w-full before:content-[''] data-[side=none]:before:-top-full\",\n scrollUpArrowClassName,\n )}\n {...scrollUpArrowProps}\n />\n <BaseSelect.List\n className={cn(\n \"relative max-h-(--available-height) scroll-py-6 overflow-y-auto py-1\",\n listClassName,\n )}\n {...listProps}\n >\n {Array.isArray(items) &&\n items.map(({ label, value }) => (\n <BaseSelect.Item\n key={label}\n value={value}\n className={cn(\n \"data-highlighted:before:bg-primary data-highlighted:text-on-primary grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-4 pl-2.5 text-sm leading-4 outline-none select-none group-data-[side=none]:pr-12 group-data-[side=none]:text-base group-data-[side=none]:leading-4 data-highlighted:relative data-highlighted:z-0 data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:rounded-sm pointer-coarse:py-2.5 pointer-coarse:text-[0.925rem]\",\n itemClassName,\n )}\n {...itemProps}\n >\n <BaseSelect.ItemIndicator\n className={cn(\"col-start-1\", itemIndicatorClassName)}\n {...itemIndicatorProps}\n >\n <Check\n className={cn(\"size-3\", checkIconClassName)}\n {...checkIconProps}\n />\n </BaseSelect.ItemIndicator>\n <BaseSelect.ItemText\n className={cn(\"col-start-2\", itemTextClassName)}\n {...itemTextProps}\n >\n {label}\n </BaseSelect.ItemText>\n </BaseSelect.Item>\n ))}\n </BaseSelect.List>\n <BaseSelect.ScrollDownArrow\n className={cn(\n \"bg-background bottom-0 z-1 flex h-4 w-full cursor-default items-center justify-center rounded-lg text-center text-xs before:absolute before:left-0 before:h-full before:w-full before:content-[''] data-[side=none]:before:-bottom-full\",\n scrollDownArrowClassName,\n )}\n {...scrollDownArrowProps}\n />\n </BaseSelect.Popup>\n </BaseSelect.Positioner>\n </BaseSelect.Portal>\n </BaseSelect.Root>\n </Field>\n );\n}\n"],"names":["Field","BaseSelect","cn","ChevronsUpDown","Check"],"mappings":";;;;;;;;SA4CgB,MAAM,CAAI,EACxB,KAAK,EACL,YAAY,EACZ,mBAAmB,EACnB,YAAY,EACZ,SAAS,EACT,WAAW,EACX,UAAU,EACV,KAAK,EACL,WAAW,EACX,UAAU,EAAE,EAAE,SAAS,EAAE,cAAc,EAAE,GAAG,UAAU,EAAE,GAAG,EAAE,EAC7D,eAAe,EAAE,EAAE,SAAS,EAAE,mBAAmB,EAAE,GAAG,eAAe,EAAE,GAAG,EAAE,EAC5E,SAAS,EAAE,EAAE,SAAS,EAAE,aAAa,EAAE,GAAG,SAAS,EAAE,GAAG,EAAE,EAC1D,WAAW,EACX,eAAe,EAAE,EAAE,SAAS,EAAE,mBAAmB,EAAE,GAAG,eAAe,EAAE,GAAG,EAAE,EAC5E,UAAU,EAAE,EAAE,SAAS,EAAE,cAAc,EAAE,GAAG,UAAU,EAAE,GAAG,EAAE,EAC7D,kBAAkB,EAAE,EAClB,SAAS,EAAE,sBAAsB,EACjC,GAAG,kBAAkB,EACtB,GAAG,EAAE,EACN,SAAS,EAAE,EAAE,SAAS,EAAE,aAAa,EAAE,GAAG,SAAS,EAAE,GAAG,EAAE,EAC1D,SAAS,EAAE,EAAE,SAAS,EAAE,aAAa,EAAE,GAAG,SAAS,EAAE,GAAG,EAAE,EAC1D,kBAAkB,EAAE,EAClB,SAAS,EAAE,sBAAsB,EACjC,GAAG,kBAAkB,EACtB,GAAG,EAAE,EACN,cAAc,EAAE,EAAE,SAAS,EAAE,kBAAkB,EAAE,GAAG,cAAc,EAAE,GAAG,EAAE,EACzE,aAAa,EAAE,EAAE,SAAS,EAAE,iBAAiB,EAAE,GAAG,aAAa,EAAE,GAAG,EAAE,EACtE,oBAAoB,EAAE,EACpB,SAAS,EAAE,wBAAwB,EACnC,GAAG,oBAAoB,EACxB,GAAG,EAAE,EACN,GAAG,KAAK,EACO,EAAA;IACf,QACE,KAAA,CAAA,aAAA,CAACA,WAAK,EAAA,EACJ,KAAK,EAAE,KAAK,EACZ,YAAY,EAAE,YAAY,EAC1B,mBAAmB,EAAE,mBAAmB,EACxC,YAAY,EAAE,YAAY,EAC1B,WAAW,EAAE,WAAW,EAAA,GACpB,UAAU,EAAA;AAEd,QAAA,KAAA,CAAA,aAAA,CAACC,aAAU,CAAC,IAAI,EAAA,EAAC,KAAK,EAAE,KAAK,EAAA;YAC3B,KAAA,CAAA,aAAA,CAACA,aAAU,CAAC,OAAO,EAAA,EACjB,SAAS,EAAEC,QAAE,CACX,mTAAmT,EACnT,SAAS,CACV,EAAA,iBAAA,EACgB,YAAY,GAAG,EAAE,GAAG,SAAS,EAAA,GAC1C,KAAK,EAAA;AAET,gBAAA,KAAA,CAAA,aAAA,CAACD,aAAU,CAAC,KAAK,IACf,SAAS,EAAEC,QAAE,CAAC,6BAA6B,EAAE,cAAc,CAAC,EAC5D,WAAW,EAAE,WAAW,EAAA,GACpB,UAAU,EAAA,CACd;AACF,gBAAA,KAAA,CAAA,aAAA,CAACD,aAAU,CAAC,IAAI,EAAA,EACd,SAAS,EAAEC,QAAE,CAAC,MAAM,EAAE,mBAAmB,CAAC,KACtC,eAAe,EAAA;AAEnB,oBAAA,KAAA,CAAA,aAAA,CAACC,0BAAc,EAAA,EACb,SAAS,EAAED,QAAE,CAAC,QAAQ,EAAE,aAAa,CAAC,EAAA,GAClC,SAAS,EAAA,CACb,CACc,CACC;AACrB,YAAA,KAAA,CAAA,aAAA,CAACD,aAAU,CAAC,MAAM,EAAA,EAAA,GAAK,WAAW,EAAA;AAChC,gBAAA,KAAA,CAAA,aAAA,CAACA,aAAU,CAAC,UAAU,EAAA,EACpB,SAAS,EAAEC,QAAE,CAAC,+BAA+B,EAAE,mBAAmB,CAAC,EACnE,UAAU,EAAE,CAAC,KACT,eAAe,EAAA;AAEnB,oBAAA,KAAA,CAAA,aAAA,CAACD,aAAU,CAAC,KAAK,EAAA,EACf,SAAS,EAAEC,QAAE,CACX,8hBAA8hB,EAC9hB,cAAc,CACf,KACG,UAAU,EAAA;AAEd,wBAAA,KAAA,CAAA,aAAA,CAACD,aAAU,CAAC,aAAa,EAAA,EACvB,SAAS,EAAEC,QAAE,CACX,mOAAmO,EACnO,sBAAsB,CACvB,EAAA,GACG,kBAAkB,EAAA,CACtB;wBACF,KAAA,CAAA,aAAA,CAACD,aAAU,CAAC,IAAI,EAAA,EACd,SAAS,EAAEC,QAAE,CACX,sEAAsE,EACtE,aAAa,CACd,EAAA,GACG,SAAS,EAAA,EAEZ,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC;AACnB,4BAAA,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,MACzB,KAAA,CAAA,aAAA,CAACD,aAAU,CAAC,IAAI,EAAA,EACd,GAAG,EAAE,KAAK,EACV,KAAK,EAAE,KAAK,EACZ,SAAS,EAAEC,QAAE,CACX,0iBAA0iB,EAC1iB,aAAa,CACd,KACG,SAAS,EAAA;AAEb,gCAAA,KAAA,CAAA,aAAA,CAACD,aAAU,CAAC,aAAa,EAAA,EACvB,SAAS,EAAEC,QAAE,CAAC,aAAa,EAAE,sBAAsB,CAAC,KAChD,kBAAkB,EAAA;AAEtB,oCAAA,KAAA,CAAA,aAAA,CAACE,iBAAK,EAAA,EACJ,SAAS,EAAEF,QAAE,CAAC,QAAQ,EAAE,kBAAkB,CAAC,EAAA,GACvC,cAAc,GAClB,CACuB;gCAC3B,KAAA,CAAA,aAAA,CAACD,aAAU,CAAC,QAAQ,EAAA,EAClB,SAAS,EAAEC,QAAE,CAAC,aAAa,EAAE,iBAAiB,CAAC,EAAA,GAC3C,aAAa,EAAA,EAEhB,KAAK,CACc,CACN,CACnB,CAAC,CACY;wBAClB,KAAA,CAAA,aAAA,CAACD,aAAU,CAAC,eAAe,EAAA,EACzB,SAAS,EAAEC,QAAE,CACX,yOAAyO,EACzO,wBAAwB,CACzB,EAAA,GACG,oBAAoB,EAAA,CACxB,CACe,CACG,CACN,CACJ,CACZ;AAEZ;;;;"}
|
|
1
|
+
{"version":3,"file":"Select.js","sources":["../../../../src/components/select/Select.tsx"],"sourcesContent":["import {\n Select as BaseSelect,\n SelectIconProps,\n SelectItemIndicatorProps,\n SelectItemProps,\n SelectItemTextProps,\n SelectListProps,\n SelectPopupProps,\n SelectPortalProps,\n SelectPositionerProps,\n SelectRootProps,\n SelectScrollDownArrowProps,\n SelectScrollUpArrowProps,\n SelectTriggerProps,\n SelectValueProps,\n} from \"@base-ui/react/select\";\nimport { Check, ChevronsUpDown } from \"lucide-react\";\nimport React from \"react\";\nimport { BasicFieldProps, cn } from \"../../lib/utils\";\nimport { Field, FieldProps } from \"../field/Field\";\n\nexport interface SelectProps<T>\n extends\n Omit<SelectTriggerProps, \"value\">,\n SelectRootProps<T>,\n BasicFieldProps {\n placeholder?: React.ReactNode;\n triggerDisabled?: SelectTriggerProps[\"disabled\"];\n triggerId?: SelectTriggerProps[\"id\"];\n triggerName?: SelectTriggerProps[\"name\"];\n triggerValue?: SelectTriggerProps[\"value\"];\n fieldProps?: FieldProps;\n triggerProps?: SelectTriggerProps;\n valueProps?: SelectValueProps;\n selectIconProps?: SelectIconProps;\n iconProps?: React.ComponentPropsWithoutRef<\"svg\">;\n portalProps?: SelectPortalProps;\n positionerProps?: SelectPositionerProps;\n popupProps?: SelectPopupProps;\n scrollUpArrowProps?: SelectScrollUpArrowProps;\n listProps?: SelectListProps;\n itemProps?: SelectItemProps;\n itemIndicatorProps?: SelectItemIndicatorProps;\n checkIconProps?: React.ComponentPropsWithoutRef<\"svg\">;\n itemTextProps?: SelectItemTextProps;\n scrollDownArrowProps?: SelectScrollDownArrowProps;\n}\n\nexport function Select<T>({\n label,\n isValidating,\n isValidatingMessage,\n errorMessage,\n className,\n description,\n fieldProps,\n items,\n placeholder,\n actionsRef,\n autoComplete,\n defaultOpen,\n defaultValue,\n disabled,\n highlightItemOnHover,\n id,\n inputRef,\n isItemEqualToValue,\n itemToStringLabel,\n itemToStringValue,\n modal,\n multiple,\n name,\n onOpenChange,\n onOpenChangeComplete,\n onValueChange,\n open,\n readOnly,\n required,\n value,\n triggerDisabled,\n triggerId,\n triggerName,\n triggerValue,\n valueProps: { className: valueClassName, ...valueProps } = {},\n selectIconProps: { className: selectIconClassName, ...selectIconProps } = {},\n iconProps: { className: iconClassName, ...iconProps } = {},\n portalProps,\n positionerProps: { className: positionerClassName, ...positionerProps } = {},\n popupProps: { className: popupClassName, ...popupProps } = {},\n scrollUpArrowProps: {\n className: scrollUpArrowClassName,\n ...scrollUpArrowProps\n } = {},\n listProps: { className: listClassName, ...listProps } = {},\n itemProps: { className: itemClassName, ...itemProps } = {},\n itemIndicatorProps: {\n className: itemIndicatorClassName,\n ...itemIndicatorProps\n } = {},\n checkIconProps: { className: checkIconClassName, ...checkIconProps } = {},\n itemTextProps: { className: itemTextClassName, ...itemTextProps } = {},\n scrollDownArrowProps: {\n className: scrollDownArrowClassName,\n ...scrollDownArrowProps\n } = {},\n ...props\n}: SelectProps<T>) {\n return (\n <Field\n label={label}\n isValidating={isValidating}\n isValidatingMessage={isValidatingMessage}\n errorMessage={errorMessage}\n description={description}\n {...fieldProps}\n >\n <BaseSelect.Root\n items={items}\n actionsRef={actionsRef}\n autoComplete={autoComplete}\n defaultOpen={defaultOpen}\n defaultValue={defaultValue}\n disabled={disabled}\n highlightItemOnHover={highlightItemOnHover}\n id={id}\n inputRef={inputRef}\n isItemEqualToValue={isItemEqualToValue}\n itemToStringLabel={itemToStringLabel}\n itemToStringValue={itemToStringValue}\n modal={modal}\n multiple={multiple}\n name={name}\n onOpenChange={onOpenChange}\n onOpenChangeComplete={onOpenChangeComplete}\n onValueChange={onValueChange}\n open={open}\n readOnly={readOnly}\n required={required}\n value={value}\n >\n <BaseSelect.Trigger\n className={cn(\n \"data-invalid:not-focus:border-error-foreground data-validating:not-data-invalid:animate-validating bg-background hover:bg-card data-popup-open:bg-card focus-visible:border-highlight flex min-w-40 items-center justify-between gap-3 rounded-lg border p-2 text-base transition-colors outline-none select-none\",\n className,\n )}\n data-validating={isValidating ? \"\" : undefined}\n disabled={triggerDisabled}\n id={triggerId}\n name={triggerName}\n value={triggerValue}\n {...props}\n >\n <BaseSelect.Value\n className={cn(\"data-placeholder:opacity-60\", valueClassName)}\n placeholder={placeholder}\n {...valueProps}\n />\n <BaseSelect.Icon\n className={cn(\"flex\", selectIconClassName)}\n {...selectIconProps}\n >\n <ChevronsUpDown\n className={cn(\"size-4\", iconClassName)}\n {...iconProps}\n />\n </BaseSelect.Icon>\n </BaseSelect.Trigger>\n <BaseSelect.Portal {...portalProps}>\n <BaseSelect.Positioner\n className={cn(\"z-10 outline-none select-none\", positionerClassName)}\n sideOffset={8}\n {...positionerProps}\n >\n <BaseSelect.Popup\n className={cn(\n \"group bg-background outline-border min-w-(--anchor-width) origin-(--transform-origin) rounded-lg bg-clip-padding shadow-lg outline transition-[transform,scale,opacity] data-ending-style:scale-90 data-ending-style:opacity-0 data-starting-style:scale-90 data-starting-style:opacity-0 data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] data-[side=none]:data-ending-style:transition-none data-[side=none]:data-starting-style:scale-100 data-[side=none]:data-starting-style:opacity-100 data-[side=none]:data-starting-style:transition-none\",\n popupClassName,\n )}\n {...popupProps}\n >\n <BaseSelect.ScrollUpArrow\n className={cn(\n \"bg-background top-0 z-1 flex h-4 w-full cursor-default items-center justify-center rounded-lg text-center text-xs before:absolute before:left-0 before:h-full before:w-full before:content-[''] data-[side=none]:before:-top-full\",\n scrollUpArrowClassName,\n )}\n {...scrollUpArrowProps}\n />\n <BaseSelect.List\n className={cn(\n \"relative max-h-(--available-height) scroll-py-6 overflow-y-auto py-1\",\n listClassName,\n )}\n {...listProps}\n >\n {Array.isArray(items) &&\n items.map(({ label, value }) => (\n <BaseSelect.Item\n key={String(value)}\n value={value}\n className={cn(\n \"data-highlighted:before:bg-primary data-highlighted:text-on-primary grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-4 pl-2.5 text-sm leading-4 outline-none select-none group-data-[side=none]:pr-12 group-data-[side=none]:text-base group-data-[side=none]:leading-4 data-highlighted:relative data-highlighted:z-0 data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:rounded-sm pointer-coarse:py-2.5 pointer-coarse:text-[0.925rem]\",\n itemClassName,\n )}\n {...itemProps}\n >\n <BaseSelect.ItemIndicator\n className={cn(\"col-start-1\", itemIndicatorClassName)}\n {...itemIndicatorProps}\n >\n <Check\n className={cn(\"size-3\", checkIconClassName)}\n {...checkIconProps}\n />\n </BaseSelect.ItemIndicator>\n <BaseSelect.ItemText\n className={cn(\"col-start-2\", itemTextClassName)}\n {...itemTextProps}\n >\n {label}\n </BaseSelect.ItemText>\n </BaseSelect.Item>\n ))}\n </BaseSelect.List>\n <BaseSelect.ScrollDownArrow\n className={cn(\n \"bg-background bottom-0 z-1 flex h-4 w-full cursor-default items-center justify-center rounded-lg text-center text-xs before:absolute before:left-0 before:h-full before:w-full before:content-[''] data-[side=none]:before:-bottom-full\",\n scrollDownArrowClassName,\n )}\n {...scrollDownArrowProps}\n />\n </BaseSelect.Popup>\n </BaseSelect.Positioner>\n </BaseSelect.Portal>\n </BaseSelect.Root>\n </Field>\n );\n}\n"],"names":["Field","BaseSelect","cn","ChevronsUpDown","Check"],"mappings":"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"}
|
package/dist/cjs/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap");@import "tailwindcss";@source "./components/**/*.{ts,tsx,js,jsx}";:root{--background:#f8f8f8;--foreground:#141414;--border:#cacaca;--card:#eee;--highlight:#3a3a3a;--primary:#6453ad;--on-primary:#fff;--primary-foreground:#493991;--secondary:#141414;--on-secondary:#f0f0f0;--secondary-foreground:#141414;--muted:#555;--on-muted:#d4d4d4;--muted-foreground:#555;--error:#b63e3e;--on-error:#fff;--error-foreground:#ac3333;--warning:#e9bd44;--on-warning:#141414;--warning-foreground:#9b4f0d;--success:#307c47;--on-success:#fff;--success-foreground:#25693a;--link-foreground:#3766b3}.dark{--background:#0a0a0a;--foreground:#ededed;--border:#333;--card:#141414;--highlight:#ededed;--primary:#493991;--on-primary:#fff;--primary-foreground:#946fd1;--secondary:#ededed;--on-secondary:#0a0a0a;--secondary-foreground:#fff;--muted:#555;--on-muted:#d4d4d4;--muted-foreground:#919191;--error:#972626;--on-error:#fff;--error-foreground:#dd4b4b;--warning:#e7b62e;--on-warning:#000;--warning-foreground:#e7b62e;--success:#2d7e45;--on-success:#fff;--success-foreground:#47c26c;--link-foreground:#3b82f6}@theme inline{--color-background:var(--background);--color-foreground:var(--foreground);--color-border:var(--border);--color-card:var(--card);--color-highlight:var(--highlight);--color-primary:var(--primary);--color-on-primary:var(--on-primary);--color-primary-foreground:var(--primary-foreground);--color-secondary:var(--secondary);--color-on-secondary:var(--on-secondary);--color-secondary-foreground:var(--secondary-foreground);--color-muted:var(--muted);--color-on-muted:var(--on-muted);--color-muted-foreground:var(--muted-foreground);--color-error:var(--error);--color-on-error:var(--on-error);--color-error-foreground:var(--error-foreground);--color-warning:var(--warning);--color-on-warning:var(--on-warning);--color-warning-foreground:var(--warning-foreground);--color-success:var(--success);--color-on-success:var(--on-success);--color-success-foreground:var(--success-foreground);--color-link-foreground:var(--link-foreground);--animate-validating:validating 1.5s ease-in-out infinite;@keyframes validating{0%,to{border-color:var(--primary);box-shadow:0 0 4px
|
|
1
|
+
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap");@import "tailwindcss";@source "./components/**/*.{ts,tsx,js,jsx}";:root{--background:#f8f8f8;--foreground:#141414;--border:#cacaca;--card:#eee;--highlight:#3a3a3a;--primary:#6453ad;--on-primary:#fff;--primary-foreground:#493991;--secondary:#141414;--on-secondary:#f0f0f0;--secondary-foreground:#141414;--muted:#555;--on-muted:#d4d4d4;--muted-foreground:#555;--error:#b63e3e;--on-error:#fff;--error-foreground:#ac3333;--warning:#e9bd44;--on-warning:#141414;--warning-foreground:#9b4f0d;--success:#307c47;--on-success:#fff;--success-foreground:#25693a;--link-foreground:#3766b3}.dark{--background:#0a0a0a;--foreground:#ededed;--border:#333;--card:#141414;--highlight:#ededed;--primary:#493991;--on-primary:#fff;--primary-foreground:#946fd1;--secondary:#ededed;--on-secondary:#0a0a0a;--secondary-foreground:#fff;--muted:#555;--on-muted:#d4d4d4;--muted-foreground:#919191;--error:#972626;--on-error:#fff;--error-foreground:#dd4b4b;--warning:#e7b62e;--on-warning:#000;--warning-foreground:#e7b62e;--success:#2d7e45;--on-success:#fff;--success-foreground:#47c26c;--link-foreground:#3b82f6}@theme inline{--color-background:var(--background);--color-foreground:var(--foreground);--color-border:var(--border);--color-card:var(--card);--color-highlight:var(--highlight);--color-primary:var(--primary);--color-on-primary:var(--on-primary);--color-primary-foreground:var(--primary-foreground);--color-secondary:var(--secondary);--color-on-secondary:var(--on-secondary);--color-secondary-foreground:var(--secondary-foreground);--color-muted:var(--muted);--color-on-muted:var(--on-muted);--color-muted-foreground:var(--muted-foreground);--color-error:var(--error);--color-on-error:var(--on-error);--color-error-foreground:var(--error-foreground);--color-warning:var(--warning);--color-on-warning:var(--on-warning);--color-warning-foreground:var(--warning-foreground);--color-success:var(--success);--color-on-success:var(--on-success);--color-success-foreground:var(--success-foreground);--color-link-foreground:var(--link-foreground);--animate-validating:validating 1.5s ease-in-out infinite;--animate-validating-message:validating-message 1.5s ease-in-out infinite;@keyframes validating{0%,to{border-color:var(--primary);box-shadow:none}50%{border-color:color-mix(in oklab,var(--foreground) 40%,var(--primary));box-shadow:0 0 4px 4px color-mix(in oklab,var(--primary) 15%,transparent)}}@keyframes validating-message{0%,to{color:var(--primary-foreground);text-shadow:none}50%{color:color-mix(in oklab,var(--foreground) 40%,var(--primary-foreground));text-shadow:color-mix(in oklab,var(--primary-foreground) 25%,transparent) 0 0 4px}}}@layer base{body{background-color:var(--background);color:var(--foreground);font-family:Noto Sans,sans-serif;font-optical-sizing:auto;font-style:normal;font-variation-settings:"wdth" 100}*{border-color:var(--border)}}
|
|
@@ -9,7 +9,7 @@ function Field({ label, isValidating, isValidatingMessage, errorMessage, classNa
|
|
|
9
9
|
label && (React__default.createElement(Field$1.Label, { className: cn("text-foreground text-sm font-semibold", labelClassName), ...labelProps }, label)),
|
|
10
10
|
children,
|
|
11
11
|
React__default.createElement(Field$1.Error, { className: cn("text-error-foreground text-sm", errorMessageClassName), match: invalid, ...errorMessageProps }, errorMessage),
|
|
12
|
-
isValidating && isValidatingMessage && !errorMessage && (React__default.createElement(Field$1.Description, { className: cn("text-primary-foreground text-sm", isValidatingMessageClassName), ...isValidatingMessageProps }, isValidatingMessage)),
|
|
12
|
+
isValidating && isValidatingMessage && !errorMessage && (React__default.createElement(Field$1.Description, { className: cn("text-primary-foreground animate-validating-message text-sm", isValidatingMessageClassName), ...isValidatingMessageProps }, isValidatingMessage)),
|
|
13
13
|
description && (React__default.createElement(Field$1.Description, { className: cn("text-muted-foreground text-sm", descriptionClassName), ...descriptionProps }, description)))));
|
|
14
14
|
}
|
|
15
15
|
const FieldContext = React__default.createContext({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Field.js","sources":["../../../../src/components/field/Field.tsx"],"sourcesContent":["import {\n Field as BaseField,\n FieldRootProps as BaseFieldRootProps,\n FieldDescriptionProps,\n FieldErrorProps,\n FieldLabelProps,\n} from \"@base-ui/react/field\";\nimport React from \"react\";\nimport { BasicFieldProps, cn } from \"../../lib/utils\";\n\nexport interface FieldProps extends BaseFieldRootProps, BasicFieldProps {\n labelProps?: FieldLabelProps;\n errorMessageProps?: FieldErrorProps;\n descriptionProps?: FieldDescriptionProps;\n isValidatingMessageProps?: FieldDescriptionProps;\n}\n\nexport function Field({\n label,\n isValidating,\n isValidatingMessage,\n errorMessage,\n className,\n description,\n children,\n labelProps: { className: labelClassName, ...labelProps } = {},\n errorMessageProps: {\n className: errorMessageClassName,\n ...errorMessageProps\n } = {},\n descriptionProps: {\n className: descriptionClassName,\n ...descriptionProps\n } = {},\n isValidatingMessageProps: {\n className: isValidatingMessageClassName,\n ...isValidatingMessageProps\n } = {},\n ...props\n}: FieldProps) {\n const invalid = !!errorMessage;\n\n return (\n <FieldContext.Provider value={{ isValidating: !!isValidating }}>\n <BaseField.Root\n className={cn(\"flex flex-col gap-1\", className)}\n invalid={invalid}\n data-validating={isValidating ? \"\" : undefined}\n {...props}\n >\n {label && (\n <BaseField.Label\n className={cn(\n \"text-foreground text-sm font-semibold\",\n labelClassName,\n )}\n {...labelProps}\n >\n {label}\n </BaseField.Label>\n )}\n {children}\n <BaseField.Error\n className={cn(\"text-error-foreground text-sm\", errorMessageClassName)}\n match={invalid}\n {...errorMessageProps}\n >\n {errorMessage}\n </BaseField.Error>\n {isValidating && isValidatingMessage && !errorMessage && (\n <BaseField.Description\n className={cn(\n \"text-primary-foreground text-sm\",\n isValidatingMessageClassName,\n )}\n {...isValidatingMessageProps}\n >\n {isValidatingMessage}\n </BaseField.Description>\n )}\n {description && (\n <BaseField.Description\n className={cn(\n \"text-muted-foreground text-sm\",\n descriptionClassName,\n )}\n {...descriptionProps}\n >\n {description}\n </BaseField.Description>\n )}\n </BaseField.Root>\n </FieldContext.Provider>\n );\n}\n\nexport const FieldContext = React.createContext({\n isValidating: false,\n});\n\nexport function useFieldContext() {\n return React.useContext(FieldContext);\n}\n"],"names":["React","BaseField"],"mappings":";;;;AAiBM,SAAU,KAAK,CAAC,EACpB,KAAK,EACL,YAAY,EACZ,mBAAmB,EACnB,YAAY,EACZ,SAAS,EACT,WAAW,EACX,QAAQ,EACR,UAAU,EAAE,EAAE,SAAS,EAAE,cAAc,EAAE,GAAG,UAAU,EAAE,GAAG,EAAE,EAC7D,iBAAiB,EAAE,EACjB,SAAS,EAAE,qBAAqB,EAChC,GAAG,iBAAiB,EACrB,GAAG,EAAE,EACN,gBAAgB,EAAE,EAChB,SAAS,EAAE,oBAAoB,EAC/B,GAAG,gBAAgB,EACpB,GAAG,EAAE,EACN,wBAAwB,EAAE,EACxB,SAAS,EAAE,4BAA4B,EACvC,GAAG,wBAAwB,EAC5B,GAAG,EAAE,EACN,GAAG,KAAK,EACG,EAAA;AACX,IAAA,MAAM,OAAO,GAAG,CAAC,CAAC,YAAY;AAE9B,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,YAAY,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,EAAE,YAAY,EAAE,CAAC,CAAC,YAAY,EAAE,EAAA;QAC5DA,cAAA,CAAA,aAAA,CAACC,OAAS,CAAC,IAAI,EAAA,EACb,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,EAC/C,OAAO,EAAE,OAAO,EAAA,iBAAA,EACC,YAAY,GAAG,EAAE,GAAG,SAAS,EAAA,GAC1C,KAAK,EAAA;YAER,KAAK,KACJD,cAAA,CAAA,aAAA,CAACC,OAAS,CAAC,KAAK,EAAA,EACd,SAAS,EAAE,EAAE,CACX,uCAAuC,EACvC,cAAc,CACf,EAAA,GACG,UAAU,EAAA,EAEb,KAAK,CACU,CACnB;YACA,QAAQ;YACTD,cAAA,CAAA,aAAA,CAACC,OAAS,CAAC,KAAK,EAAA,EACd,SAAS,EAAE,EAAE,CAAC,+BAA+B,EAAE,qBAAqB,CAAC,EACrE,KAAK,EAAE,OAAO,KACV,iBAAiB,EAAA,EAEpB,YAAY,CACG;YACjB,YAAY,IAAI,mBAAmB,IAAI,CAAC,YAAY,KACnDD,cAAA,CAAA,aAAA,CAACC,OAAS,CAAC,WAAW,EAAA,EACpB,SAAS,EAAE,EAAE,CACX,
|
|
1
|
+
{"version":3,"file":"Field.js","sources":["../../../../src/components/field/Field.tsx"],"sourcesContent":["import {\n Field as BaseField,\n FieldRootProps as BaseFieldRootProps,\n FieldDescriptionProps,\n FieldErrorProps,\n FieldLabelProps,\n} from \"@base-ui/react/field\";\nimport React from \"react\";\nimport { BasicFieldProps, cn } from \"../../lib/utils\";\n\nexport interface FieldProps extends BaseFieldRootProps, BasicFieldProps {\n labelProps?: FieldLabelProps;\n errorMessageProps?: FieldErrorProps;\n descriptionProps?: FieldDescriptionProps;\n isValidatingMessageProps?: FieldDescriptionProps;\n}\n\nexport function Field({\n label,\n isValidating,\n isValidatingMessage,\n errorMessage,\n className,\n description,\n children,\n labelProps: { className: labelClassName, ...labelProps } = {},\n errorMessageProps: {\n className: errorMessageClassName,\n ...errorMessageProps\n } = {},\n descriptionProps: {\n className: descriptionClassName,\n ...descriptionProps\n } = {},\n isValidatingMessageProps: {\n className: isValidatingMessageClassName,\n ...isValidatingMessageProps\n } = {},\n ...props\n}: FieldProps) {\n const invalid = !!errorMessage;\n\n return (\n <FieldContext.Provider value={{ isValidating: !!isValidating }}>\n <BaseField.Root\n className={cn(\"flex flex-col gap-1\", className)}\n invalid={invalid}\n data-validating={isValidating ? \"\" : undefined}\n {...props}\n >\n {label && (\n <BaseField.Label\n className={cn(\n \"text-foreground text-sm font-semibold\",\n labelClassName,\n )}\n {...labelProps}\n >\n {label}\n </BaseField.Label>\n )}\n {children}\n <BaseField.Error\n className={cn(\"text-error-foreground text-sm\", errorMessageClassName)}\n match={invalid}\n {...errorMessageProps}\n >\n {errorMessage}\n </BaseField.Error>\n {isValidating && isValidatingMessage && !errorMessage && (\n <BaseField.Description\n className={cn(\n \"text-primary-foreground animate-validating-message text-sm\",\n isValidatingMessageClassName,\n )}\n {...isValidatingMessageProps}\n >\n {isValidatingMessage}\n </BaseField.Description>\n )}\n {description && (\n <BaseField.Description\n className={cn(\n \"text-muted-foreground text-sm\",\n descriptionClassName,\n )}\n {...descriptionProps}\n >\n {description}\n </BaseField.Description>\n )}\n </BaseField.Root>\n </FieldContext.Provider>\n );\n}\n\nexport const FieldContext = React.createContext({\n isValidating: false,\n});\n\nexport function useFieldContext() {\n return React.useContext(FieldContext);\n}\n"],"names":["React","BaseField"],"mappings":";;;;AAiBM,SAAU,KAAK,CAAC,EACpB,KAAK,EACL,YAAY,EACZ,mBAAmB,EACnB,YAAY,EACZ,SAAS,EACT,WAAW,EACX,QAAQ,EACR,UAAU,EAAE,EAAE,SAAS,EAAE,cAAc,EAAE,GAAG,UAAU,EAAE,GAAG,EAAE,EAC7D,iBAAiB,EAAE,EACjB,SAAS,EAAE,qBAAqB,EAChC,GAAG,iBAAiB,EACrB,GAAG,EAAE,EACN,gBAAgB,EAAE,EAChB,SAAS,EAAE,oBAAoB,EAC/B,GAAG,gBAAgB,EACpB,GAAG,EAAE,EACN,wBAAwB,EAAE,EACxB,SAAS,EAAE,4BAA4B,EACvC,GAAG,wBAAwB,EAC5B,GAAG,EAAE,EACN,GAAG,KAAK,EACG,EAAA;AACX,IAAA,MAAM,OAAO,GAAG,CAAC,CAAC,YAAY;AAE9B,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,YAAY,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,EAAE,YAAY,EAAE,CAAC,CAAC,YAAY,EAAE,EAAA;QAC5DA,cAAA,CAAA,aAAA,CAACC,OAAS,CAAC,IAAI,EAAA,EACb,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,EAC/C,OAAO,EAAE,OAAO,EAAA,iBAAA,EACC,YAAY,GAAG,EAAE,GAAG,SAAS,EAAA,GAC1C,KAAK,EAAA;YAER,KAAK,KACJD,cAAA,CAAA,aAAA,CAACC,OAAS,CAAC,KAAK,EAAA,EACd,SAAS,EAAE,EAAE,CACX,uCAAuC,EACvC,cAAc,CACf,EAAA,GACG,UAAU,EAAA,EAEb,KAAK,CACU,CACnB;YACA,QAAQ;YACTD,cAAA,CAAA,aAAA,CAACC,OAAS,CAAC,KAAK,EAAA,EACd,SAAS,EAAE,EAAE,CAAC,+BAA+B,EAAE,qBAAqB,CAAC,EACrE,KAAK,EAAE,OAAO,KACV,iBAAiB,EAAA,EAEpB,YAAY,CACG;YACjB,YAAY,IAAI,mBAAmB,IAAI,CAAC,YAAY,KACnDD,cAAA,CAAA,aAAA,CAACC,OAAS,CAAC,WAAW,EAAA,EACpB,SAAS,EAAE,EAAE,CACX,4DAA4D,EAC5D,4BAA4B,CAC7B,EAAA,GACG,wBAAwB,EAAA,EAE3B,mBAAmB,CACE,CACzB;YACA,WAAW,KACVD,cAAA,CAAA,aAAA,CAACC,OAAS,CAAC,WAAW,EAAA,EACpB,SAAS,EAAE,EAAE,CACX,+BAA+B,EAC/B,oBAAoB,CACrB,EAAA,GACG,gBAAgB,EAAA,EAEnB,WAAW,CACU,CACzB,CACc,CACK;AAE5B;AAEO,MAAM,YAAY,GAAGD,cAAK,CAAC,aAAa,CAAC;AAC9C,IAAA,YAAY,EAAE,KAAK;AACpB,CAAA;SAEe,eAAe,GAAA;AAC7B,IAAA,OAAOA,cAAK,CAAC,UAAU,CAAC,YAAY,CAAC;AACvC;;;;"}
|
|
@@ -1,14 +1,13 @@
|
|
|
1
|
-
import { SelectIconProps, SelectItemIndicatorProps, SelectItemProps, SelectItemTextProps, SelectListProps, SelectPopupProps, SelectPortalProps, SelectPositionerProps, SelectScrollDownArrowProps, SelectScrollUpArrowProps, SelectTriggerProps, SelectValueProps } from "@base-ui/react/select";
|
|
1
|
+
import { SelectIconProps, SelectItemIndicatorProps, SelectItemProps, SelectItemTextProps, SelectListProps, SelectPopupProps, SelectPortalProps, SelectPositionerProps, SelectRootProps, SelectScrollDownArrowProps, SelectScrollUpArrowProps, SelectTriggerProps, SelectValueProps } from "@base-ui/react/select";
|
|
2
2
|
import React from "react";
|
|
3
3
|
import { BasicFieldProps } from "../../lib/utils";
|
|
4
4
|
import { FieldProps } from "../field/Field";
|
|
5
|
-
export interface SelectProps<T> extends SelectTriggerProps, BasicFieldProps {
|
|
6
|
-
items?: ReadonlyArray<{
|
|
7
|
-
label: React.ReactNode;
|
|
8
|
-
value: T;
|
|
9
|
-
}>;
|
|
10
|
-
className?: string;
|
|
5
|
+
export interface SelectProps<T> extends Omit<SelectTriggerProps, "value">, SelectRootProps<T>, BasicFieldProps {
|
|
11
6
|
placeholder?: React.ReactNode;
|
|
7
|
+
triggerDisabled?: SelectTriggerProps["disabled"];
|
|
8
|
+
triggerId?: SelectTriggerProps["id"];
|
|
9
|
+
triggerName?: SelectTriggerProps["name"];
|
|
10
|
+
triggerValue?: SelectTriggerProps["value"];
|
|
12
11
|
fieldProps?: FieldProps;
|
|
13
12
|
triggerProps?: SelectTriggerProps;
|
|
14
13
|
valueProps?: SelectValueProps;
|
|
@@ -25,4 +24,4 @@ export interface SelectProps<T> extends SelectTriggerProps, BasicFieldProps {
|
|
|
25
24
|
itemTextProps?: SelectItemTextProps;
|
|
26
25
|
scrollDownArrowProps?: SelectScrollDownArrowProps;
|
|
27
26
|
}
|
|
28
|
-
export declare function Select<T>({ label, isValidating, isValidatingMessage, errorMessage, className, description, fieldProps, items, placeholder, valueProps: { className: valueClassName, ...valueProps }, selectIconProps: { className: selectIconClassName, ...selectIconProps }, iconProps: { className: iconClassName, ...iconProps }, portalProps, positionerProps: { className: positionerClassName, ...positionerProps }, popupProps: { className: popupClassName, ...popupProps }, scrollUpArrowProps: { className: scrollUpArrowClassName, ...scrollUpArrowProps }, listProps: { className: listClassName, ...listProps }, itemProps: { className: itemClassName, ...itemProps }, itemIndicatorProps: { className: itemIndicatorClassName, ...itemIndicatorProps }, checkIconProps: { className: checkIconClassName, ...checkIconProps }, itemTextProps: { className: itemTextClassName, ...itemTextProps }, scrollDownArrowProps: { className: scrollDownArrowClassName, ...scrollDownArrowProps }, ...props }: SelectProps<T>): React.JSX.Element;
|
|
27
|
+
export declare function Select<T>({ label, isValidating, isValidatingMessage, errorMessage, className, description, fieldProps, items, placeholder, actionsRef, autoComplete, defaultOpen, defaultValue, disabled, highlightItemOnHover, id, inputRef, isItemEqualToValue, itemToStringLabel, itemToStringValue, modal, multiple, name, onOpenChange, onOpenChangeComplete, onValueChange, open, readOnly, required, value, triggerDisabled, triggerId, triggerName, triggerValue, valueProps: { className: valueClassName, ...valueProps }, selectIconProps: { className: selectIconClassName, ...selectIconProps }, iconProps: { className: iconClassName, ...iconProps }, portalProps, positionerProps: { className: positionerClassName, ...positionerProps }, popupProps: { className: popupClassName, ...popupProps }, scrollUpArrowProps: { className: scrollUpArrowClassName, ...scrollUpArrowProps }, listProps: { className: listClassName, ...listProps }, itemProps: { className: itemClassName, ...itemProps }, itemIndicatorProps: { className: itemIndicatorClassName, ...itemIndicatorProps }, checkIconProps: { className: checkIconClassName, ...checkIconProps }, itemTextProps: { className: itemTextClassName, ...itemTextProps }, scrollDownArrowProps: { className: scrollDownArrowClassName, ...scrollDownArrowProps }, ...props }: SelectProps<T>): React.JSX.Element;
|
|
@@ -4,10 +4,10 @@ import React__default from 'react';
|
|
|
4
4
|
import { cn } from '../../lib/utils.js';
|
|
5
5
|
import { Field } from '../field/Field.js';
|
|
6
6
|
|
|
7
|
-
function Select({ label, isValidating, isValidatingMessage, errorMessage, className, description, fieldProps, items, placeholder, valueProps: { className: valueClassName, ...valueProps } = {}, selectIconProps: { className: selectIconClassName, ...selectIconProps } = {}, iconProps: { className: iconClassName, ...iconProps } = {}, portalProps, positionerProps: { className: positionerClassName, ...positionerProps } = {}, popupProps: { className: popupClassName, ...popupProps } = {}, scrollUpArrowProps: { className: scrollUpArrowClassName, ...scrollUpArrowProps } = {}, listProps: { className: listClassName, ...listProps } = {}, itemProps: { className: itemClassName, ...itemProps } = {}, itemIndicatorProps: { className: itemIndicatorClassName, ...itemIndicatorProps } = {}, checkIconProps: { className: checkIconClassName, ...checkIconProps } = {}, itemTextProps: { className: itemTextClassName, ...itemTextProps } = {}, scrollDownArrowProps: { className: scrollDownArrowClassName, ...scrollDownArrowProps } = {}, ...props }) {
|
|
7
|
+
function Select({ label, isValidating, isValidatingMessage, errorMessage, className, description, fieldProps, items, placeholder, actionsRef, autoComplete, defaultOpen, defaultValue, disabled, highlightItemOnHover, id, inputRef, isItemEqualToValue, itemToStringLabel, itemToStringValue, modal, multiple, name, onOpenChange, onOpenChangeComplete, onValueChange, open, readOnly, required, value, triggerDisabled, triggerId, triggerName, triggerValue, valueProps: { className: valueClassName, ...valueProps } = {}, selectIconProps: { className: selectIconClassName, ...selectIconProps } = {}, iconProps: { className: iconClassName, ...iconProps } = {}, portalProps, positionerProps: { className: positionerClassName, ...positionerProps } = {}, popupProps: { className: popupClassName, ...popupProps } = {}, scrollUpArrowProps: { className: scrollUpArrowClassName, ...scrollUpArrowProps } = {}, listProps: { className: listClassName, ...listProps } = {}, itemProps: { className: itemClassName, ...itemProps } = {}, itemIndicatorProps: { className: itemIndicatorClassName, ...itemIndicatorProps } = {}, checkIconProps: { className: checkIconClassName, ...checkIconProps } = {}, itemTextProps: { className: itemTextClassName, ...itemTextProps } = {}, scrollDownArrowProps: { className: scrollDownArrowClassName, ...scrollDownArrowProps } = {}, ...props }) {
|
|
8
8
|
return (React__default.createElement(Field, { label: label, isValidating: isValidating, isValidatingMessage: isValidatingMessage, errorMessage: errorMessage, description: description, ...fieldProps },
|
|
9
|
-
React__default.createElement(Select$1.Root, { items: items },
|
|
10
|
-
React__default.createElement(Select$1.Trigger, { className: cn("data-invalid:not-focus:border-error-foreground data-validating:not-data-invalid:animate-validating bg-background hover:bg-card data-popup-open:bg-card focus-visible:border-highlight flex min-w-40 items-center justify-between gap-3 rounded-lg border p-2 text-base transition-colors outline-none select-none", className), "data-validating": isValidating ? "" : undefined, ...props },
|
|
9
|
+
React__default.createElement(Select$1.Root, { items: items, actionsRef: actionsRef, autoComplete: autoComplete, defaultOpen: defaultOpen, defaultValue: defaultValue, disabled: disabled, highlightItemOnHover: highlightItemOnHover, id: id, inputRef: inputRef, isItemEqualToValue: isItemEqualToValue, itemToStringLabel: itemToStringLabel, itemToStringValue: itemToStringValue, modal: modal, multiple: multiple, name: name, onOpenChange: onOpenChange, onOpenChangeComplete: onOpenChangeComplete, onValueChange: onValueChange, open: open, readOnly: readOnly, required: required, value: value },
|
|
10
|
+
React__default.createElement(Select$1.Trigger, { className: cn("data-invalid:not-focus:border-error-foreground data-validating:not-data-invalid:animate-validating bg-background hover:bg-card data-popup-open:bg-card focus-visible:border-highlight flex min-w-40 items-center justify-between gap-3 rounded-lg border p-2 text-base transition-colors outline-none select-none", className), "data-validating": isValidating ? "" : undefined, disabled: triggerDisabled, id: triggerId, name: triggerName, value: triggerValue, ...props },
|
|
11
11
|
React__default.createElement(Select$1.Value, { className: cn("data-placeholder:opacity-60", valueClassName), placeholder: placeholder, ...valueProps }),
|
|
12
12
|
React__default.createElement(Select$1.Icon, { className: cn("flex", selectIconClassName), ...selectIconProps },
|
|
13
13
|
React__default.createElement(ChevronsUpDown, { className: cn("size-4", iconClassName), ...iconProps }))),
|
|
@@ -16,7 +16,7 @@ function Select({ label, isValidating, isValidatingMessage, errorMessage, classN
|
|
|
16
16
|
React__default.createElement(Select$1.Popup, { className: cn("group bg-background outline-border min-w-(--anchor-width) origin-(--transform-origin) rounded-lg bg-clip-padding shadow-lg outline transition-[transform,scale,opacity] data-ending-style:scale-90 data-ending-style:opacity-0 data-starting-style:scale-90 data-starting-style:opacity-0 data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] data-[side=none]:data-ending-style:transition-none data-[side=none]:data-starting-style:scale-100 data-[side=none]:data-starting-style:opacity-100 data-[side=none]:data-starting-style:transition-none", popupClassName), ...popupProps },
|
|
17
17
|
React__default.createElement(Select$1.ScrollUpArrow, { className: cn("bg-background top-0 z-1 flex h-4 w-full cursor-default items-center justify-center rounded-lg text-center text-xs before:absolute before:left-0 before:h-full before:w-full before:content-[''] data-[side=none]:before:-top-full", scrollUpArrowClassName), ...scrollUpArrowProps }),
|
|
18
18
|
React__default.createElement(Select$1.List, { className: cn("relative max-h-(--available-height) scroll-py-6 overflow-y-auto py-1", listClassName), ...listProps }, Array.isArray(items) &&
|
|
19
|
-
items.map(({ label, value }) => (React__default.createElement(Select$1.Item, { key:
|
|
19
|
+
items.map(({ label, value }) => (React__default.createElement(Select$1.Item, { key: String(value), value: value, className: cn("data-highlighted:before:bg-primary data-highlighted:text-on-primary grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-4 pl-2.5 text-sm leading-4 outline-none select-none group-data-[side=none]:pr-12 group-data-[side=none]:text-base group-data-[side=none]:leading-4 data-highlighted:relative data-highlighted:z-0 data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:rounded-sm pointer-coarse:py-2.5 pointer-coarse:text-[0.925rem]", itemClassName), ...itemProps },
|
|
20
20
|
React__default.createElement(Select$1.ItemIndicator, { className: cn("col-start-1", itemIndicatorClassName), ...itemIndicatorProps },
|
|
21
21
|
React__default.createElement(Check, { className: cn("size-3", checkIconClassName), ...checkIconProps })),
|
|
22
22
|
React__default.createElement(Select$1.ItemText, { className: cn("col-start-2", itemTextClassName), ...itemTextProps }, label))))),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.js","sources":["../../../../src/components/select/Select.tsx"],"sourcesContent":["import {\n Select as BaseSelect,\n SelectIconProps,\n SelectItemIndicatorProps,\n SelectItemProps,\n SelectItemTextProps,\n SelectListProps,\n SelectPopupProps,\n SelectPortalProps,\n SelectPositionerProps,\n SelectScrollDownArrowProps,\n SelectScrollUpArrowProps,\n SelectTriggerProps,\n SelectValueProps,\n} from \"@base-ui/react/select\";\nimport { Check, ChevronsUpDown } from \"lucide-react\";\nimport React from \"react\";\nimport { BasicFieldProps, cn } from \"../../lib/utils\";\nimport { Field, FieldProps } from \"../field/Field\";\n\nexport interface SelectProps<T> extends SelectTriggerProps, BasicFieldProps {\n items?: ReadonlyArray<{\n label: React.ReactNode;\n value: T;\n }>;\n className?: string;\n placeholder?: React.ReactNode;\n fieldProps?: FieldProps;\n triggerProps?: SelectTriggerProps;\n valueProps?: SelectValueProps;\n selectIconProps?: SelectIconProps;\n iconProps?: React.ComponentPropsWithoutRef<\"svg\">;\n portalProps?: SelectPortalProps;\n positionerProps?: SelectPositionerProps;\n popupProps?: SelectPopupProps;\n scrollUpArrowProps?: SelectScrollUpArrowProps;\n listProps?: SelectListProps;\n itemProps?: SelectItemProps;\n itemIndicatorProps?: SelectItemIndicatorProps;\n checkIconProps?: React.ComponentPropsWithoutRef<\"svg\">;\n itemTextProps?: SelectItemTextProps;\n scrollDownArrowProps?: SelectScrollDownArrowProps;\n}\n\nexport function Select<T>({\n label,\n isValidating,\n isValidatingMessage,\n errorMessage,\n className,\n description,\n fieldProps,\n items,\n placeholder,\n valueProps: { className: valueClassName, ...valueProps } = {},\n selectIconProps: { className: selectIconClassName, ...selectIconProps } = {},\n iconProps: { className: iconClassName, ...iconProps } = {},\n portalProps,\n positionerProps: { className: positionerClassName, ...positionerProps } = {},\n popupProps: { className: popupClassName, ...popupProps } = {},\n scrollUpArrowProps: {\n className: scrollUpArrowClassName,\n ...scrollUpArrowProps\n } = {},\n listProps: { className: listClassName, ...listProps } = {},\n itemProps: { className: itemClassName, ...itemProps } = {},\n itemIndicatorProps: {\n className: itemIndicatorClassName,\n ...itemIndicatorProps\n } = {},\n checkIconProps: { className: checkIconClassName, ...checkIconProps } = {},\n itemTextProps: { className: itemTextClassName, ...itemTextProps } = {},\n scrollDownArrowProps: {\n className: scrollDownArrowClassName,\n ...scrollDownArrowProps\n } = {},\n ...props\n}: SelectProps<T>) {\n return (\n <Field\n label={label}\n isValidating={isValidating}\n isValidatingMessage={isValidatingMessage}\n errorMessage={errorMessage}\n description={description}\n {...fieldProps}\n >\n <BaseSelect.Root items={items}>\n <BaseSelect.Trigger\n className={cn(\n \"data-invalid:not-focus:border-error-foreground data-validating:not-data-invalid:animate-validating bg-background hover:bg-card data-popup-open:bg-card focus-visible:border-highlight flex min-w-40 items-center justify-between gap-3 rounded-lg border p-2 text-base transition-colors outline-none select-none\",\n className,\n )}\n data-validating={isValidating ? \"\" : undefined}\n {...props}\n >\n <BaseSelect.Value\n className={cn(\"data-placeholder:opacity-60\", valueClassName)}\n placeholder={placeholder}\n {...valueProps}\n />\n <BaseSelect.Icon\n className={cn(\"flex\", selectIconClassName)}\n {...selectIconProps}\n >\n <ChevronsUpDown\n className={cn(\"size-4\", iconClassName)}\n {...iconProps}\n />\n </BaseSelect.Icon>\n </BaseSelect.Trigger>\n <BaseSelect.Portal {...portalProps}>\n <BaseSelect.Positioner\n className={cn(\"z-10 outline-none select-none\", positionerClassName)}\n sideOffset={8}\n {...positionerProps}\n >\n <BaseSelect.Popup\n className={cn(\n \"group bg-background outline-border min-w-(--anchor-width) origin-(--transform-origin) rounded-lg bg-clip-padding shadow-lg outline transition-[transform,scale,opacity] data-ending-style:scale-90 data-ending-style:opacity-0 data-starting-style:scale-90 data-starting-style:opacity-0 data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] data-[side=none]:data-ending-style:transition-none data-[side=none]:data-starting-style:scale-100 data-[side=none]:data-starting-style:opacity-100 data-[side=none]:data-starting-style:transition-none\",\n popupClassName,\n )}\n {...popupProps}\n >\n <BaseSelect.ScrollUpArrow\n className={cn(\n \"bg-background top-0 z-1 flex h-4 w-full cursor-default items-center justify-center rounded-lg text-center text-xs before:absolute before:left-0 before:h-full before:w-full before:content-[''] data-[side=none]:before:-top-full\",\n scrollUpArrowClassName,\n )}\n {...scrollUpArrowProps}\n />\n <BaseSelect.List\n className={cn(\n \"relative max-h-(--available-height) scroll-py-6 overflow-y-auto py-1\",\n listClassName,\n )}\n {...listProps}\n >\n {Array.isArray(items) &&\n items.map(({ label, value }) => (\n <BaseSelect.Item\n key={label}\n value={value}\n className={cn(\n \"data-highlighted:before:bg-primary data-highlighted:text-on-primary grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-4 pl-2.5 text-sm leading-4 outline-none select-none group-data-[side=none]:pr-12 group-data-[side=none]:text-base group-data-[side=none]:leading-4 data-highlighted:relative data-highlighted:z-0 data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:rounded-sm pointer-coarse:py-2.5 pointer-coarse:text-[0.925rem]\",\n itemClassName,\n )}\n {...itemProps}\n >\n <BaseSelect.ItemIndicator\n className={cn(\"col-start-1\", itemIndicatorClassName)}\n {...itemIndicatorProps}\n >\n <Check\n className={cn(\"size-3\", checkIconClassName)}\n {...checkIconProps}\n />\n </BaseSelect.ItemIndicator>\n <BaseSelect.ItemText\n className={cn(\"col-start-2\", itemTextClassName)}\n {...itemTextProps}\n >\n {label}\n </BaseSelect.ItemText>\n </BaseSelect.Item>\n ))}\n </BaseSelect.List>\n <BaseSelect.ScrollDownArrow\n className={cn(\n \"bg-background bottom-0 z-1 flex h-4 w-full cursor-default items-center justify-center rounded-lg text-center text-xs before:absolute before:left-0 before:h-full before:w-full before:content-[''] data-[side=none]:before:-bottom-full\",\n scrollDownArrowClassName,\n )}\n {...scrollDownArrowProps}\n />\n </BaseSelect.Popup>\n </BaseSelect.Positioner>\n </BaseSelect.Portal>\n </BaseSelect.Root>\n </Field>\n );\n}\n"],"names":["React","BaseSelect"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Select.js","sources":["../../../../src/components/select/Select.tsx"],"sourcesContent":["import {\n Select as BaseSelect,\n SelectIconProps,\n SelectItemIndicatorProps,\n SelectItemProps,\n SelectItemTextProps,\n SelectListProps,\n SelectPopupProps,\n SelectPortalProps,\n SelectPositionerProps,\n SelectRootProps,\n SelectScrollDownArrowProps,\n SelectScrollUpArrowProps,\n SelectTriggerProps,\n SelectValueProps,\n} from \"@base-ui/react/select\";\nimport { Check, ChevronsUpDown } from \"lucide-react\";\nimport React from \"react\";\nimport { BasicFieldProps, cn } from \"../../lib/utils\";\nimport { Field, FieldProps } from \"../field/Field\";\n\nexport interface SelectProps<T>\n extends\n Omit<SelectTriggerProps, \"value\">,\n SelectRootProps<T>,\n BasicFieldProps {\n placeholder?: React.ReactNode;\n triggerDisabled?: SelectTriggerProps[\"disabled\"];\n triggerId?: SelectTriggerProps[\"id\"];\n triggerName?: SelectTriggerProps[\"name\"];\n triggerValue?: SelectTriggerProps[\"value\"];\n fieldProps?: FieldProps;\n triggerProps?: SelectTriggerProps;\n valueProps?: SelectValueProps;\n selectIconProps?: SelectIconProps;\n iconProps?: React.ComponentPropsWithoutRef<\"svg\">;\n portalProps?: SelectPortalProps;\n positionerProps?: SelectPositionerProps;\n popupProps?: SelectPopupProps;\n scrollUpArrowProps?: SelectScrollUpArrowProps;\n listProps?: SelectListProps;\n itemProps?: SelectItemProps;\n itemIndicatorProps?: SelectItemIndicatorProps;\n checkIconProps?: React.ComponentPropsWithoutRef<\"svg\">;\n itemTextProps?: SelectItemTextProps;\n scrollDownArrowProps?: SelectScrollDownArrowProps;\n}\n\nexport function Select<T>({\n label,\n isValidating,\n isValidatingMessage,\n errorMessage,\n className,\n description,\n fieldProps,\n items,\n placeholder,\n actionsRef,\n autoComplete,\n defaultOpen,\n defaultValue,\n disabled,\n highlightItemOnHover,\n id,\n inputRef,\n isItemEqualToValue,\n itemToStringLabel,\n itemToStringValue,\n modal,\n multiple,\n name,\n onOpenChange,\n onOpenChangeComplete,\n onValueChange,\n open,\n readOnly,\n required,\n value,\n triggerDisabled,\n triggerId,\n triggerName,\n triggerValue,\n valueProps: { className: valueClassName, ...valueProps } = {},\n selectIconProps: { className: selectIconClassName, ...selectIconProps } = {},\n iconProps: { className: iconClassName, ...iconProps } = {},\n portalProps,\n positionerProps: { className: positionerClassName, ...positionerProps } = {},\n popupProps: { className: popupClassName, ...popupProps } = {},\n scrollUpArrowProps: {\n className: scrollUpArrowClassName,\n ...scrollUpArrowProps\n } = {},\n listProps: { className: listClassName, ...listProps } = {},\n itemProps: { className: itemClassName, ...itemProps } = {},\n itemIndicatorProps: {\n className: itemIndicatorClassName,\n ...itemIndicatorProps\n } = {},\n checkIconProps: { className: checkIconClassName, ...checkIconProps } = {},\n itemTextProps: { className: itemTextClassName, ...itemTextProps } = {},\n scrollDownArrowProps: {\n className: scrollDownArrowClassName,\n ...scrollDownArrowProps\n } = {},\n ...props\n}: SelectProps<T>) {\n return (\n <Field\n label={label}\n isValidating={isValidating}\n isValidatingMessage={isValidatingMessage}\n errorMessage={errorMessage}\n description={description}\n {...fieldProps}\n >\n <BaseSelect.Root\n items={items}\n actionsRef={actionsRef}\n autoComplete={autoComplete}\n defaultOpen={defaultOpen}\n defaultValue={defaultValue}\n disabled={disabled}\n highlightItemOnHover={highlightItemOnHover}\n id={id}\n inputRef={inputRef}\n isItemEqualToValue={isItemEqualToValue}\n itemToStringLabel={itemToStringLabel}\n itemToStringValue={itemToStringValue}\n modal={modal}\n multiple={multiple}\n name={name}\n onOpenChange={onOpenChange}\n onOpenChangeComplete={onOpenChangeComplete}\n onValueChange={onValueChange}\n open={open}\n readOnly={readOnly}\n required={required}\n value={value}\n >\n <BaseSelect.Trigger\n className={cn(\n \"data-invalid:not-focus:border-error-foreground data-validating:not-data-invalid:animate-validating bg-background hover:bg-card data-popup-open:bg-card focus-visible:border-highlight flex min-w-40 items-center justify-between gap-3 rounded-lg border p-2 text-base transition-colors outline-none select-none\",\n className,\n )}\n data-validating={isValidating ? \"\" : undefined}\n disabled={triggerDisabled}\n id={triggerId}\n name={triggerName}\n value={triggerValue}\n {...props}\n >\n <BaseSelect.Value\n className={cn(\"data-placeholder:opacity-60\", valueClassName)}\n placeholder={placeholder}\n {...valueProps}\n />\n <BaseSelect.Icon\n className={cn(\"flex\", selectIconClassName)}\n {...selectIconProps}\n >\n <ChevronsUpDown\n className={cn(\"size-4\", iconClassName)}\n {...iconProps}\n />\n </BaseSelect.Icon>\n </BaseSelect.Trigger>\n <BaseSelect.Portal {...portalProps}>\n <BaseSelect.Positioner\n className={cn(\"z-10 outline-none select-none\", positionerClassName)}\n sideOffset={8}\n {...positionerProps}\n >\n <BaseSelect.Popup\n className={cn(\n \"group bg-background outline-border min-w-(--anchor-width) origin-(--transform-origin) rounded-lg bg-clip-padding shadow-lg outline transition-[transform,scale,opacity] data-ending-style:scale-90 data-ending-style:opacity-0 data-starting-style:scale-90 data-starting-style:opacity-0 data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] data-[side=none]:data-ending-style:transition-none data-[side=none]:data-starting-style:scale-100 data-[side=none]:data-starting-style:opacity-100 data-[side=none]:data-starting-style:transition-none\",\n popupClassName,\n )}\n {...popupProps}\n >\n <BaseSelect.ScrollUpArrow\n className={cn(\n \"bg-background top-0 z-1 flex h-4 w-full cursor-default items-center justify-center rounded-lg text-center text-xs before:absolute before:left-0 before:h-full before:w-full before:content-[''] data-[side=none]:before:-top-full\",\n scrollUpArrowClassName,\n )}\n {...scrollUpArrowProps}\n />\n <BaseSelect.List\n className={cn(\n \"relative max-h-(--available-height) scroll-py-6 overflow-y-auto py-1\",\n listClassName,\n )}\n {...listProps}\n >\n {Array.isArray(items) &&\n items.map(({ label, value }) => (\n <BaseSelect.Item\n key={String(value)}\n value={value}\n className={cn(\n \"data-highlighted:before:bg-primary data-highlighted:text-on-primary grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-4 pl-2.5 text-sm leading-4 outline-none select-none group-data-[side=none]:pr-12 group-data-[side=none]:text-base group-data-[side=none]:leading-4 data-highlighted:relative data-highlighted:z-0 data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:rounded-sm pointer-coarse:py-2.5 pointer-coarse:text-[0.925rem]\",\n itemClassName,\n )}\n {...itemProps}\n >\n <BaseSelect.ItemIndicator\n className={cn(\"col-start-1\", itemIndicatorClassName)}\n {...itemIndicatorProps}\n >\n <Check\n className={cn(\"size-3\", checkIconClassName)}\n {...checkIconProps}\n />\n </BaseSelect.ItemIndicator>\n <BaseSelect.ItemText\n className={cn(\"col-start-2\", itemTextClassName)}\n {...itemTextProps}\n >\n {label}\n </BaseSelect.ItemText>\n </BaseSelect.Item>\n ))}\n </BaseSelect.List>\n <BaseSelect.ScrollDownArrow\n className={cn(\n \"bg-background bottom-0 z-1 flex h-4 w-full cursor-default items-center justify-center rounded-lg text-center text-xs before:absolute before:left-0 before:h-full before:w-full before:content-[''] data-[side=none]:before:-bottom-full\",\n scrollDownArrowClassName,\n )}\n {...scrollDownArrowProps}\n />\n </BaseSelect.Popup>\n </BaseSelect.Positioner>\n </BaseSelect.Portal>\n </BaseSelect.Root>\n </Field>\n );\n}\n"],"names":["React","BaseSelect"],"mappings":"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"}
|
package/dist/esm/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap");@import "tailwindcss";@source "./components/**/*.{ts,tsx,js,jsx}";:root{--background:#f8f8f8;--foreground:#141414;--border:#cacaca;--card:#eee;--highlight:#3a3a3a;--primary:#6453ad;--on-primary:#fff;--primary-foreground:#493991;--secondary:#141414;--on-secondary:#f0f0f0;--secondary-foreground:#141414;--muted:#555;--on-muted:#d4d4d4;--muted-foreground:#555;--error:#b63e3e;--on-error:#fff;--error-foreground:#ac3333;--warning:#e9bd44;--on-warning:#141414;--warning-foreground:#9b4f0d;--success:#307c47;--on-success:#fff;--success-foreground:#25693a;--link-foreground:#3766b3}.dark{--background:#0a0a0a;--foreground:#ededed;--border:#333;--card:#141414;--highlight:#ededed;--primary:#493991;--on-primary:#fff;--primary-foreground:#946fd1;--secondary:#ededed;--on-secondary:#0a0a0a;--secondary-foreground:#fff;--muted:#555;--on-muted:#d4d4d4;--muted-foreground:#919191;--error:#972626;--on-error:#fff;--error-foreground:#dd4b4b;--warning:#e7b62e;--on-warning:#000;--warning-foreground:#e7b62e;--success:#2d7e45;--on-success:#fff;--success-foreground:#47c26c;--link-foreground:#3b82f6}@theme inline{--color-background:var(--background);--color-foreground:var(--foreground);--color-border:var(--border);--color-card:var(--card);--color-highlight:var(--highlight);--color-primary:var(--primary);--color-on-primary:var(--on-primary);--color-primary-foreground:var(--primary-foreground);--color-secondary:var(--secondary);--color-on-secondary:var(--on-secondary);--color-secondary-foreground:var(--secondary-foreground);--color-muted:var(--muted);--color-on-muted:var(--on-muted);--color-muted-foreground:var(--muted-foreground);--color-error:var(--error);--color-on-error:var(--on-error);--color-error-foreground:var(--error-foreground);--color-warning:var(--warning);--color-on-warning:var(--on-warning);--color-warning-foreground:var(--warning-foreground);--color-success:var(--success);--color-on-success:var(--on-success);--color-success-foreground:var(--success-foreground);--color-link-foreground:var(--link-foreground);--animate-validating:validating 1.5s ease-in-out infinite;@keyframes validating{0%,to{border-color:var(--primary);box-shadow:0 0 4px
|
|
1
|
+
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap");@import "tailwindcss";@source "./components/**/*.{ts,tsx,js,jsx}";:root{--background:#f8f8f8;--foreground:#141414;--border:#cacaca;--card:#eee;--highlight:#3a3a3a;--primary:#6453ad;--on-primary:#fff;--primary-foreground:#493991;--secondary:#141414;--on-secondary:#f0f0f0;--secondary-foreground:#141414;--muted:#555;--on-muted:#d4d4d4;--muted-foreground:#555;--error:#b63e3e;--on-error:#fff;--error-foreground:#ac3333;--warning:#e9bd44;--on-warning:#141414;--warning-foreground:#9b4f0d;--success:#307c47;--on-success:#fff;--success-foreground:#25693a;--link-foreground:#3766b3}.dark{--background:#0a0a0a;--foreground:#ededed;--border:#333;--card:#141414;--highlight:#ededed;--primary:#493991;--on-primary:#fff;--primary-foreground:#946fd1;--secondary:#ededed;--on-secondary:#0a0a0a;--secondary-foreground:#fff;--muted:#555;--on-muted:#d4d4d4;--muted-foreground:#919191;--error:#972626;--on-error:#fff;--error-foreground:#dd4b4b;--warning:#e7b62e;--on-warning:#000;--warning-foreground:#e7b62e;--success:#2d7e45;--on-success:#fff;--success-foreground:#47c26c;--link-foreground:#3b82f6}@theme inline{--color-background:var(--background);--color-foreground:var(--foreground);--color-border:var(--border);--color-card:var(--card);--color-highlight:var(--highlight);--color-primary:var(--primary);--color-on-primary:var(--on-primary);--color-primary-foreground:var(--primary-foreground);--color-secondary:var(--secondary);--color-on-secondary:var(--on-secondary);--color-secondary-foreground:var(--secondary-foreground);--color-muted:var(--muted);--color-on-muted:var(--on-muted);--color-muted-foreground:var(--muted-foreground);--color-error:var(--error);--color-on-error:var(--on-error);--color-error-foreground:var(--error-foreground);--color-warning:var(--warning);--color-on-warning:var(--on-warning);--color-warning-foreground:var(--warning-foreground);--color-success:var(--success);--color-on-success:var(--on-success);--color-success-foreground:var(--success-foreground);--color-link-foreground:var(--link-foreground);--animate-validating:validating 1.5s ease-in-out infinite;--animate-validating-message:validating-message 1.5s ease-in-out infinite;@keyframes validating{0%,to{border-color:var(--primary);box-shadow:none}50%{border-color:color-mix(in oklab,var(--foreground) 40%,var(--primary));box-shadow:0 0 4px 4px color-mix(in oklab,var(--primary) 15%,transparent)}}@keyframes validating-message{0%,to{color:var(--primary-foreground);text-shadow:none}50%{color:color-mix(in oklab,var(--foreground) 40%,var(--primary-foreground));text-shadow:color-mix(in oklab,var(--primary-foreground) 25%,transparent) 0 0 4px}}}@layer base{body{background-color:var(--background);color:var(--foreground);font-family:Noto Sans,sans-serif;font-optical-sizing:auto;font-style:normal;font-variation-settings:"wdth" 100}*{border-color:var(--border)}}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fransek/ui",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.2",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"private": false,
|
|
6
6
|
"author": "Frans Ekman <fransedvinekman@gmail.com>",
|
|
@@ -88,8 +88,8 @@
|
|
|
88
88
|
"vitest": "^4.0.18"
|
|
89
89
|
},
|
|
90
90
|
"peerDependencies": {
|
|
91
|
-
"react": "
|
|
92
|
-
"react-dom": "
|
|
91
|
+
"react": ">=18.0.0",
|
|
92
|
+
"react-dom": ">=18.0.0",
|
|
93
93
|
"@base-ui/react": "^1.2.0",
|
|
94
94
|
"clsx": "^2.0.0",
|
|
95
95
|
"tailwind-merge": "^3.0.0",
|