@wallarm-org/design-system 0.71.4 → 0.72.0

package/dist/components/InlineEdit/classes.js

@@ -0,0 +1,35 @@
+import { cva } from "class-variance-authority";
+const inlineEditPreviewVariants = cva('group flex w-full min-w-0 gap-4 rounded-8 border border-transparent px-6 -ml-7 font-sans text-sm text-text-primary transition-colors', {
+    variants: {
+        multiline: {
+            true: 'items-start py-0',
+            false: 'items-center py-2 h-24'
+        },
+        activatable: {
+            true: '',
+            false: ''
+        },
+        invalid: {
+            true: '',
+            false: ''
+        }
+    },
+    compoundVariants: [
+        {
+            activatable: true,
+            invalid: false,
+            className: 'cursor-pointer hover:bg-states-primary-hover active:bg-states-primary-pressed focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-focus-primary'
+        },
+        {
+            activatable: true,
+            invalid: true,
+            className: 'cursor-pointer bg-component-input-bg hover:border-border-strong-danger hover:ring-3 hover:ring-focus-destructive focus-visible:border-border-strong-danger focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-focus-destructive'
+        }
+    ],
+    defaultVariants: {
+        multiline: false,
+        activatable: false,
+        invalid: false
+    }
+});
+export { inlineEditPreviewVariants };

package/dist/components/InlineEdit/dateValueCast.d.ts

@@ -0,0 +1,25 @@
+import type { DateValue as ReactAriaDateValue } from '@react-aria/datepicker';
+import type { DateValue } from '../Calendar';
+/**
+ * Calendar's `DateValue` (Ark) and DateInput's `DateValue` (react-aria) are
+ * structurally identical `@internationalized/date` classes from different
+ * package copies — the story-documented interop hazard (Ark values fail an
+ * `instanceof` check against react-aria's copy, and vice versa). Cast across
+ * the boundary rather than validate, mirroring `toDateValue`/
+ * `toReactAriaDateValue` in Calendar/dateValue.ts. Use these when composing a
+ * `DateInput` trigger inside `InlineEditDate`/`InlineEditDateTime`.
+ */
+export declare const toReactAriaDateValue: (date: DateValue | null) => ReactAriaDateValue | null;
+export declare const toCalendarDateValue: (date: ReactAriaDateValue | null) => DateValue | null;
+/**
+ * `DateInput` at `granularity='minute'` requires an hour/minute component —
+ * react-aria's `useDateFieldState` throws "Invalid granularity" otherwise. A
+ * committed value can be day-only (e.g. a consumer's initial `CalendarDate`,
+ * before any time has been picked), so promote it to midnight, mirroring
+ * Calendar's own date-only → `CalendarDateTime` promotion in `useCalendarTime`
+ * / `withTime` (Calendar/dateValue.ts). The cast crosses the same
+ * `@internationalized/date` package-instance boundary as the casts above.
+ * Use this when composing a minute-granularity `DateInput` trigger inside
+ * `InlineEditDateTime`.
+ */
+export declare const withMinuteGranularity: (date: DateValue | null) => DateValue | null;

package/dist/components/InlineEdit/dateValueCast.js

@@ -0,0 +1,9 @@
+import { CalendarDateTime } from "@internationalized/date";
+const toReactAriaDateValue = (date)=>date;
+const toCalendarDateValue = (date)=>date;
+const withMinuteGranularity = (date)=>{
+    if (!date) return null;
+    if ('hour' in date) return date;
+    return new CalendarDateTime(date.year, date.month, date.day, 0, 0);
+};
+export { toCalendarDateValue, toReactAriaDateValue, withMinuteGranularity };

package/dist/components/InlineEdit/index.d.ts

@@ -0,0 +1,15 @@
+export { toCalendarDateValue, toReactAriaDateValue, withMinuteGranularity } from './dateValueCast';
+export { InlineEdit, type InlineEditProps } from './InlineEdit';
+export { type InlineEditActivationMode, type InlineEditContextValue, type InlineEditStatus, type InlineEditSubmitMode, useInlineEdit, useInlineEditSubmitMode, } from './InlineEditContext';
+export { InlineEditControl, type InlineEditControlProps } from './InlineEditControl';
+export { InlineEditDate, type InlineEditDateProps } from './InlineEditDate';
+export { InlineEditDateTime, type InlineEditDateTimeProps } from './InlineEditDateTime';
+export { InlineEditError, type InlineEditErrorProps } from './InlineEditError';
+export { InlineEditInput, type InlineEditInputProps } from './InlineEditInput';
+export { InlineEditNumber, type InlineEditNumberProps } from './InlineEditNumber';
+export { InlineEditPreview, type InlineEditPreviewProps } from './InlineEditPreview';
+export { InlineEditPreviewIcon, type InlineEditPreviewIconProps } from './InlineEditPreviewIcon';
+export { InlineEditPreviewValue, type InlineEditPreviewValueProps } from './InlineEditPreviewValue';
+export { InlineEditSelect, type InlineEditSelectProps } from './InlineEditSelect';
+export { InlineEditTextarea, type InlineEditTextareaProps } from './InlineEditTextarea';
+export { InlineEditTime, type InlineEditTimeProps } from './InlineEditTime';

package/dist/components/InlineEdit/index.js

@@ -0,0 +1,16 @@
+import { toCalendarDateValue, toReactAriaDateValue, withMinuteGranularity } from "./dateValueCast.js";
+import { InlineEdit } from "./InlineEdit.js";
+import { useInlineEdit, useInlineEditSubmitMode } from "./InlineEditContext.js";
+import { InlineEditControl } from "./InlineEditControl.js";
+import { InlineEditDate } from "./InlineEditDate.js";
+import { InlineEditDateTime } from "./InlineEditDateTime.js";
+import { InlineEditError } from "./InlineEditError.js";
+import { InlineEditInput } from "./InlineEditInput.js";
+import { InlineEditNumber } from "./InlineEditNumber.js";
+import { InlineEditPreview } from "./InlineEditPreview.js";
+import { InlineEditPreviewIcon } from "./InlineEditPreviewIcon.js";
+import { InlineEditPreviewValue } from "./InlineEditPreviewValue.js";
+import { InlineEditSelect } from "./InlineEditSelect.js";
+import { InlineEditTextarea } from "./InlineEditTextarea.js";
+import { InlineEditTime } from "./InlineEditTime.js";
+export { InlineEdit, InlineEditControl, InlineEditDate, InlineEditDateTime, InlineEditError, InlineEditInput, InlineEditNumber, InlineEditPreview, InlineEditPreviewIcon, InlineEditPreviewValue, InlineEditSelect, InlineEditTextarea, InlineEditTime, toCalendarDateValue, toReactAriaDateValue, useInlineEdit, useInlineEditSubmitMode, withMinuteGranularity };

package/dist/components/Input/Input.d.ts

@@ -2,7 +2,7 @@ import type { FC, InputHTMLAttributes, Ref } from 'react';
 import type { VariantProps } from 'class-variance-authority';
 import type { TestableProps } from '../../utils/testId';
 import { inputVariants } from './classes';
-type InputNativeProps = InputHTMLAttributes<HTMLInputElement>;
+type InputNativeProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>;
 type InputVariantsProps = VariantProps<typeof inputVariants>;
 export type InputProps = InputNativeProps & InputVariantsProps & TestableProps & {
     ref?: Ref<HTMLInputElement>;

package/dist/components/Input/Input.js

@@ -3,14 +3,15 @@ import { useFieldContext } from "@ark-ui/react/field";
 import { mergeProps } from "@ark-ui/react/utils";
 import { cn } from "../../utils/cn.js";
 import { inputVariants } from "./classes.js";
-const Input = ({ className, error = false, disabled = false, ref, ...props })=>{
+const Input = ({ className, error = false, size = 'default', disabled = false, ref, ...props })=>{
     const field = useFieldContext();
     const mergedProps = mergeProps(field?.getInputProps(), props);
     return /*#__PURE__*/ jsx("input", {
         ...mergedProps,
         ...props,
-        className: cn('h-36 py-8', inputVariants({
-            error
+        className: cn(inputVariants({
+            error,
+            size
         }), className),
         disabled: disabled,
         "aria-invalid": Boolean(error),

package/dist/components/Input/classes.d.ts

@@ -1,3 +1,4 @@
 export declare const inputVariants: (props?: ({
     error?: boolean | null | undefined;
+    size?: "small" | "medium" | "default" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/components/Input/classes.js

@@ -5,7 +5,15 @@ const inputVariants = cva(cn('flex w-full px-12 rounded-8 border bg-component-in
         error: {
             true: cn('border-border-strong-danger', 'hover:not-disabled:border-border-strong-danger', 'hover:not-disabled:outline-none', 'hover:not-disabled:ring-3', 'hover:not-disabled:ring-focus-destructive-hover', 'focus-visible:ring-focus-destructive'),
             false: cn('border-border-primary', 'hover:not-disabled:border-component-border-input-hover', 'focus-visible:not-disabled:border-border-strong-primary', 'focus-visible:ring-focus-primary')
+        },
+        size: {
+            default: 'h-36 py-8',
+            medium: 'h-32 py-6',
+            small: 'h-24 py-2'
         }
+    },
+    defaultVariants: {
+        size: 'default'
     }
 });
 export { inputVariants };

package/dist/components/NumberInput/NumberInput.d.ts

@@ -1,11 +1,14 @@
 import type { FC, Ref } from 'react';
 import { NumberInput as ArkUiNumberInput } from '@ark-ui/react/number-input';
+import type { VariantProps } from 'class-variance-authority';
 import type { TestableProps } from '../../utils/testId';
+import { numberInputRootVariants } from './classes';
 type NumberInputNativeProps = Omit<ArkUiNumberInput.RootProps, 'className' | 'invalid'>;
+type NumberInputVariantsProps = VariantProps<typeof numberInputRootVariants>;
 interface NumberInputBaseProps {
     error?: boolean;
     ref?: Ref<HTMLDivElement>;
 }
-export type NumberInputProps = NumberInputNativeProps & NumberInputBaseProps & TestableProps;
+export type NumberInputProps = NumberInputNativeProps & NumberInputVariantsProps & NumberInputBaseProps & TestableProps;
 export declare const NumberInput: FC<NumberInputProps>;
 export {};

package/dist/components/NumberInput/NumberInput.js

@@ -2,25 +2,35 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { NumberInput } from "@ark-ui/react/number-input";
 import { ChevronDown, ChevronUp } from "../../icons/index.js";
 import { cn } from "../../utils/cn.js";
-const numberInputTriggerClassNames = cn('w-16 h-14 px-2 py-1 rounded-2 transition-colors cursor-pointer', 'hover:bg-states-primary-hover', '[&[data-disabled]]:cursor-not-allowed [&[data-disabled]]:pointer-events-none');
-const NumberInput_NumberInput = ({ error = false, defaultValue = '0', ...props })=>/*#__PURE__*/ jsxs(NumberInput.Root, {
+import { numberInputControlVariants, numberInputFieldVariants, numberInputRootVariants, numberInputTriggerVariants } from "./classes.js";
+const NumberInput_NumberInput = ({ error = false, size = 'default', defaultValue = '0', ...props })=>/*#__PURE__*/ jsxs(NumberInput.Root, {
         ...props,
         invalid: error,
         defaultValue: defaultValue,
-        className: cn('w-full h-36 has-[>textarea]:h-auto', 'flex items-stretch border rounded-8 bg-component-input-bg relative', 'border border-border-primary outline-none shadow-xs transition-[color,border,box-shadow]', '[&:not([data-disabled]):not([data-focus])]:hover:border-component-border-input-hover ', '[&[data-focus]:not([data-disabled])]:ring-3', '[&[data-focus]:not([data-disabled]):not([data-invalid])]:ring-focus-primary', '[&[data-focus]:not([data-disabled]):not([data-invalid])]:border-border-strong-primary', 'data-invalid:border-border-strong-danger data-invalid:ring-focus-destructive', '[&[data-invalid]:not([data-disabled])]:hover:border-border-strong-danger', '[&[data-invalid]:not([data-disabled]):not([data-focus])]:hover:ring-3', '[&[data-invalid]:not([data-disabled]):not([data-focus])]:hover:ring-focus-destructive-hover', '[&[data-invalid]:not([data-disabled])]:[&>input]:hover:ring-0', 'data-disabled:opacity-50', 'data-disabled:cursor-not-allowed', 'data-disabled:*:cursor-not-allowed'),
+        className: numberInputRootVariants({
+            size
+        }),
         children: [
             /*#__PURE__*/ jsx(NumberInput.Input, {
-                className: cn('flex-1 h-full px-12 py-8', 'rounded-none border-0 bg-transparent shadow-none outline-none', 'font-sans font-normal text-sm text-text-primary placeholder:text-text-secondary')
+                className: numberInputFieldVariants({
+                    size
+                })
             }),
             /*#__PURE__*/ jsxs(NumberInput.Control, {
-                className: cn('flex flex-col justify-center px-4 py-2', 'bg-states-primary-default-alt border-l border-border-primary', '[&_svg]:icon-sm [&_svg]:text-icon-secondary [&_svg]:pointer-events-none'),
+                className: cn(numberInputControlVariants({
+                    size
+                }), '[&_svg]:text-icon-secondary'),
                 children: [
                     /*#__PURE__*/ jsx(NumberInput.IncrementTrigger, {
-                        className: numberInputTriggerClassNames,
+                        className: numberInputTriggerVariants({
+                            size
+                        }),
                         children: /*#__PURE__*/ jsx(ChevronUp, {})
                     }),
                     /*#__PURE__*/ jsx(NumberInput.DecrementTrigger, {
-                        className: numberInputTriggerClassNames,
+                        className: numberInputTriggerVariants({
+                            size
+                        }),
                         children: /*#__PURE__*/ jsx(ChevronDown, {})
                     })
                 ]

package/dist/components/NumberInput/classes.d.ts

@@ -0,0 +1,12 @@
+export declare const numberInputRootVariants: (props?: ({
+    size?: "small" | "medium" | "default" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const numberInputFieldVariants: (props?: ({
+    size?: "small" | "medium" | "default" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const numberInputControlVariants: (props?: ({
+    size?: "small" | "medium" | "default" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const numberInputTriggerVariants: (props?: ({
+    size?: "small" | "medium" | "default" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/components/NumberInput/classes.js

@@ -0,0 +1,51 @@
+import { cva } from "class-variance-authority";
+import { cn } from "../../utils/cn.js";
+const numberInputRootVariants = cva(cn('flex items-stretch border rounded-8 bg-component-input-bg relative w-full has-[>textarea]:h-auto', 'border border-border-primary outline-none shadow-xs transition-[color,border,box-shadow]', '[&:not([data-disabled]):not([data-focus])]:hover:border-component-border-input-hover ', '[&[data-focus]:not([data-disabled])]:ring-3', '[&[data-focus]:not([data-disabled]):not([data-invalid])]:ring-focus-primary', '[&[data-focus]:not([data-disabled]):not([data-invalid])]:border-border-strong-primary', 'data-invalid:border-border-strong-danger data-invalid:ring-focus-destructive', '[&[data-invalid]:not([data-disabled])]:hover:border-border-strong-danger', '[&[data-invalid]:not([data-disabled]):not([data-focus])]:hover:ring-3', '[&[data-invalid]:not([data-disabled]):not([data-focus])]:hover:ring-focus-destructive-hover', '[&[data-invalid]:not([data-disabled])]:[&>input]:hover:ring-0', 'data-disabled:opacity-50', 'data-disabled:cursor-not-allowed', 'data-disabled:*:cursor-not-allowed'), {
+    variants: {
+        size: {
+            default: 'h-36',
+            medium: 'h-32',
+            small: 'h-24'
+        }
+    },
+    defaultVariants: {
+        size: 'default'
+    }
+});
+const numberInputFieldVariants = cva(cn('flex-1 h-full rounded-none border-0 bg-transparent shadow-none outline-none', 'font-sans font-normal text-sm text-text-primary placeholder:text-text-secondary'), {
+    variants: {
+        size: {
+            default: 'px-12 py-8',
+            medium: 'px-12 py-6',
+            small: 'px-12 py-2'
+        }
+    },
+    defaultVariants: {
+        size: 'default'
+    }
+});
+const numberInputControlVariants = cva(cn('flex flex-col justify-center', 'bg-states-primary-default-alt border-l border-border-primary', '[&_svg]:pointer-events-none'), {
+    variants: {
+        size: {
+            default: 'px-4 py-2 [&_svg]:icon-sm',
+            medium: 'px-3 py-1 [&_svg]:icon-sm',
+            small: 'px-2 py-0 [&_svg]:icon-xs'
+        }
+    },
+    defaultVariants: {
+        size: 'default'
+    }
+});
+const numberInputTriggerVariants = cva(cn('flex items-center justify-center rounded-2 transition-colors cursor-pointer', 'hover:bg-states-primary-hover', '[&[data-disabled]]:cursor-not-allowed [&[data-disabled]]:pointer-events-none'), {
+    variants: {
+        size: {
+            default: 'w-16 h-14 px-2 py-1',
+            medium: 'w-14 h-12 px-2 py-1',
+            small: 'w-12 h-10 px-1 py-0'
+        }
+    },
+    defaultVariants: {
+        size: 'default'
+    }
+});
+export { numberInputControlVariants, numberInputFieldVariants, numberInputRootVariants, numberInputTriggerVariants };

package/dist/components/Select/SelectButton.d.ts

@@ -2,10 +2,11 @@ import type { FC } from 'react';
 import { type ButtonProps } from '../Button';
 import { type SelectValueTextProps } from './SelectValueText';
 type SelectButtonBaseProps = Omit<ButtonProps, 'variant' | 'color' | 'size' | 'disabled'>;
+export type SelectButtonSize = 'small' | 'medium' | 'default';
 export interface SelectButtonVariantProps {
     variant?: Exclude<ButtonProps['variant'], 'primary'>;
     color?: Exclude<ButtonProps['color'], 'destructive'>;
-    size?: ButtonProps['size'];
+    size?: SelectButtonSize;
 }
 type SelectButtonProps = SelectButtonBaseProps & SelectButtonVariantProps & SelectValueTextProps;
 export declare const SelectButton: FC<SelectButtonProps>;

package/dist/components/Select/SelectButton.js

@@ -6,7 +6,12 @@ import { SelectArrow } from "./SelectArrow.js";
 import { useSelectSharedContext } from "./SelectSharedContext/index.js";
 import { SelectValueIcon } from "./SelectValueIcon.js";
 import { SelectValueText } from "./SelectValueText.js";
-const SelectButton = ({ placeholder = 'Choose...', variant = 'outline', color = 'neutral', size = 'large', 'data-testid': testIdProp, ...props })=>{
+const SELECT_BUTTON_SIZE_MAP = {
+    small: 'small',
+    medium: 'medium',
+    default: 'large'
+};
+const SelectButton = ({ placeholder = 'Choose...', variant = 'outline', color = 'neutral', size = 'default', 'data-testid': testIdProp, ...props })=>{
     const testId = useTestId('button', testIdProp);
     const { loading } = useSelectSharedContext();
     const { disabled } = useSelectContext();
@@ -18,7 +23,7 @@ const SelectButton = ({ placeholder = 'Choose...', variant = 'outline', color =
                 "data-testid": testId,
                 variant: variant,
                 color: color,
-                size: size,
+                size: SELECT_BUTTON_SIZE_MAP[size],
                 loading: loading,
                 disabled: disabled,
                 fullWidth: true,

package/dist/components/Select/SelectInput/SelectInput.d.ts

@@ -2,6 +2,7 @@ import type { FC } from 'react';
 import { type SelectValueTextProps } from '../SelectValueText';
 interface SelectInputBaseProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'color'> {
     'data-testid'?: string;
+    size?: 'small' | 'medium' | 'default';
 }
 type SelectInputProps = SelectInputBaseProps & Pick<SelectValueTextProps, 'placeholder'>;
 export declare const SelectInput: FC<SelectInputProps>;

package/dist/components/Select/SelectInput/SelectInput.js

@@ -1,4 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
 import { Select, useSelectContext } from "@ark-ui/react/select";
 import { cva } from "class-variance-authority";
 import { cn } from "../../../utils/cn.js";
@@ -7,9 +8,9 @@ import { SelectArrow } from "../SelectArrow.js";
 import { SelectValueText } from "../SelectValueText.js";
 import { SelectInputClear } from "./SelectInputClear.js";
 import { SelectInputItemRenderer } from "./SelectInputItemRenderer.js";
-import { SelectInputOverflowRenderer } from "./SelectInputOverflowRenderer.js";
+import { createSelectInputOverflowRenderer } from "./SelectInputOverflowRenderer.js";
 const selectInputVariants = cva([
-    'flex items-center gap-4 w-fit h-36 pr-12 rounded-8 border bg-component-input-bg shadow-xs transition-[colors,border,box-shadow]',
+    'flex items-center gap-4 w-fit pr-12 rounded-8 border bg-component-input-bg shadow-xs transition-[colors,border,box-shadow]',
     'font-sans text-sm text-text-primary placeholder:text-text-secondary',
     'focus-visible:outline-none focus-visible:ring-3',
     'data-disabled:cursor-not-allowed',
@@ -40,6 +41,11 @@ const selectInputVariants = cva([
         },
         empty: {
             true: 'text-text-secondary'
+        },
+        size: {
+            default: 'h-36',
+            medium: 'h-32',
+            small: 'h-24'
         }
     },
     compoundVariants: [
@@ -48,11 +54,17 @@ const selectInputVariants = cva([
             empty: true,
             className: 'pl-12'
         }
-    ]
+    ],
+    defaultVariants: {
+        size: 'default'
+    }
 });
-const SelectInput = ({ placeholder = 'Choose...', className, ...rest })=>{
+const SelectInput = ({ placeholder = 'Choose...', size = 'default', className, ...rest })=>{
     const { selectedItems, disabled, multiple } = useSelectContext();
     const isEmpty = selectedItems.length <= 0;
+    const overflowRenderer = useMemo(()=>createSelectInputOverflowRenderer(size), [
+        size
+    ]);
     return /*#__PURE__*/ jsx(Select.Control, {
         className: "w-full max-w-full",
         children: /*#__PURE__*/ jsx(Select.Trigger, {
@@ -61,7 +73,8 @@ const SelectInput = ({ placeholder = 'Choose...', className, ...rest })=>{
                 ...rest,
                 className: cn(selectInputVariants({
                     empty: isEmpty,
-                    multiple
+                    multiple,
+                    size
                 }), 'w-full max-w-full gap-8', className),
                 tabIndex: disabled ? -1 : 0,
                 children: [
@@ -69,9 +82,10 @@ const SelectInput = ({ placeholder = 'Choose...', className, ...rest })=>{
                         className: "flex items-center gap-4 flex-1 h-full pl-6 overflow-hidden",
                         items: selectedItems,
                         itemRenderer: (item)=>/*#__PURE__*/ jsx(SelectInputItemRenderer, {
-                                item: item
+                                item: item,
+                                size: size
                             }, item.value),
-                        overflowRenderer: SelectInputOverflowRenderer
+                        overflowRenderer: overflowRenderer
                     }) : /*#__PURE__*/ jsx(SelectValueText, {
                         placeholder: placeholder
                     }),

package/dist/components/Select/SelectInput/SelectInputItemRenderer.d.ts

@@ -1,7 +1,11 @@
 import type { FC } from 'react';
+import { type TagProps } from '../../Tag';
 import type { SelectDataItem } from '../types';
 type SelectInputItemRendererProps = {
     item: SelectDataItem;
+    /** `SelectInput`'s own size — chips scale down with it, see `TAG_SIZE_BY_SELECT_SIZE`. */
+    size?: 'small' | 'medium' | 'default';
 };
+export declare const TAG_SIZE_BY_SELECT_SIZE: Record<'small' | 'medium' | 'default', TagProps['size']>;
 export declare const SelectInputItemRenderer: FC<SelectInputItemRendererProps>;
 export {};

package/dist/components/Select/SelectInput/SelectInputItemRenderer.js

@@ -1,7 +1,12 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useSelectContext } from "@ark-ui/react/select";
 import { Tag, TagClose } from "../../Tag/index.js";
-const SelectInputItemRenderer = ({ item })=>{
+const TAG_SIZE_BY_SELECT_SIZE = {
+    small: 'medium',
+    medium: 'large',
+    default: 'large'
+};
+const SelectInputItemRenderer = ({ item, size = 'default' })=>{
     const { value, setValue } = useSelectContext();
     const handleRemove = ()=>{
         const nextValue = value.filter((v)=>v !== item.value);
@@ -9,7 +14,7 @@ const SelectInputItemRenderer = ({ item })=>{
     };
     const Icon = item.icon;
     return /*#__PURE__*/ jsxs(Tag, {
-        size: "large",
+        size: TAG_SIZE_BY_SELECT_SIZE[size],
         children: [
             Icon && /*#__PURE__*/ jsx(Icon, {}),
             item.label,
@@ -19,4 +24,4 @@ const SelectInputItemRenderer = ({ item })=>{
         ]
     });
 };
-export { SelectInputItemRenderer };
+export { SelectInputItemRenderer, TAG_SIZE_BY_SELECT_SIZE };

package/dist/components/Select/SelectInput/SelectInputOverflowRenderer.d.ts

@@ -1,2 +1,2 @@
 import type { SelectDataItem } from '../types';
-export declare const SelectInputOverflowRenderer: (items: SelectDataItem[]) => import("react/jsx-runtime").JSX.Element;
+export declare const createSelectInputOverflowRenderer: (size: "small" | "medium" | "default") => (items: SelectDataItem[]) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Select/SelectInput/SelectInputOverflowRenderer.js

@@ -3,32 +3,33 @@ import { cn } from "../../../utils/cn.js";
 import { Popover, PopoverContent, PopoverTrigger } from "../../Popover/index.js";
 import { HStack } from "../../Stack/index.js";
 import { Tag } from "../../Tag/index.js";
+import { TAG_SIZE_BY_SELECT_SIZE } from "./SelectInputItemRenderer.js";
 const POPOVER_MAX_WIDTH = '256px';
-const SelectInputOverflowRenderer = (items)=>/*#__PURE__*/ jsxs(Popover, {
-        children: [
-            /*#__PURE__*/ jsx(PopoverTrigger, {
-                className: cn('**:data-[slot=tag]:cursor-help'),
-                asChild: true,
-                children: /*#__PURE__*/ jsxs(Tag, {
-                    size: "large",
-                    children: [
-                        "+",
-                        items.length
-                    ]
+const createSelectInputOverflowRenderer = (size)=>(items)=>/*#__PURE__*/ jsxs(Popover, {
+            children: [
+                /*#__PURE__*/ jsx(PopoverTrigger, {
+                    className: cn('**:data-[slot=tag]:cursor-help'),
+                    asChild: true,
+                    children: /*#__PURE__*/ jsxs(Tag, {
+                        size: TAG_SIZE_BY_SELECT_SIZE[size],
+                        children: [
+                            "+",
+                            items.length
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ jsx(PopoverContent, {
+                    minHeight: "auto",
+                    maxWidth: POPOVER_MAX_WIDTH,
+                    children: /*#__PURE__*/ jsx(HStack, {
+                        gap: 4,
+                        wrap: "wrap",
+                        children: items.map((item)=>/*#__PURE__*/ jsx(Tag, {
+                                size: "large",
+                                children: item.label
+                            }, item.value))
+                    })
                 })
-            }),
-            /*#__PURE__*/ jsx(PopoverContent, {
-                minHeight: "auto",
-                maxWidth: POPOVER_MAX_WIDTH,
-                children: /*#__PURE__*/ jsx(HStack, {
-                    gap: 4,
-                    wrap: "wrap",
-                    children: items.map((item)=>/*#__PURE__*/ jsx(Tag, {
-                            size: "large",
-                            children: item.label
-                        }, item.value))
-                })
-            })
-        ]
-    });
-export { SelectInputOverflowRenderer };
+            ]
+        });
+export { createSelectInputOverflowRenderer };

package/dist/components/Slider/SliderInput.d.ts

@@ -1,5 +1,5 @@
 import { type FC, type InputHTMLAttributes, type Ref } from 'react';
-export interface SliderInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue'> {
+export interface SliderInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'size'> {
     /** Which thumb this box is bound to (0 = single/low, 1 = high). */
     index?: number;
     /** Ref to the real `<input>` node (analytics / focus management). */

package/dist/components/Textarea/classes.js

@@ -8,10 +8,10 @@ const textareaPaddingVariants = cva('', {
         }
     }
 });
-const textareaHeightVariants = cva('min-h-[60px]', {
+const textareaHeightVariants = cva('min-h-[64px]', {
     variants: {
         size: {
-            small: 'min-h-[60px]',
+            small: 'min-h-[64px]',
             medium: 'min-h-[72px]',
             default: 'min-h-[76px]'
         }

package/dist/components/Toast/Toast.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { cloneElement, isValidElement } from "react";
 import { Toast } from "@ark-ui/react/toast";
 import { cva } from "class-variance-authority";
-import { CircleCheckBig, Info, OctagonAlert, TriangleAlert } from "../../icons/index.js";
+import { CircleCheck, Info, OctagonAlert, TriangleAlert } from "../../icons/index.js";
 import { cn } from "../../utils/cn.js";
 import { TestIdProvider } from "../../utils/testId.js";
 import { Loader } from "../Loader/index.js";
@@ -24,20 +24,20 @@ const toastVariants = cva('group relative flex min-w-[256px] max-w-[560px] items
 });
 const toastIconMap = {
     success: {
-        component: CircleCheckBig,
-        className: 'text-green-500'
+        component: CircleCheck,
+        className: 'text-component-toast-ic-success'
     },
     error: {
         component: OctagonAlert,
-        className: 'text-red-500'
+        className: 'text-component-toast-ic-destructive'
     },
     warning: {
         component: TriangleAlert,
-        className: 'text-amber-500'
+        className: 'text-component-toast-ic-warning'
     },
     info: {
         component: Info,
-        className: 'text-blue-500'
+        className: 'text-component-toast-ic-info'
     }
 };
 const SIMPLE_TOAST_DURATION_MS = 5000;

package/dist/components/Toast/Toaster.js

@@ -22,7 +22,7 @@ const Toaster_Toaster = ()=>{
     return /*#__PURE__*/ jsx(Portal, {
         children: /*#__PURE__*/ jsx(Toaster, {
             toaster: arkToasterInstance,
-            className: cn('fixed bottom-0 right-0 !z-[50] flex flex-col gap-12 p-24', '[&_[data-scope=toast][data-part=group]]:flex [&_[data-scope=toast][data-part=group]]:flex-col [&_[data-scope=toast][data-part=group]]:gap-12 [&_[data-scope=toast][data-part=group]]:max-w-[560px] [&_[data-scope=toast][data-part=group]]:mx-auto', '[&_[data-scope=toast][data-part=root]]:[translate:var(--x)_var(--y)] [&_[data-scope=toast][data-part=root]]:scale-[var(--scale)] [&_[data-scope=toast][data-part=root]]:z-[var(--z-index)] [&_[data-scope=toast][data-part=root]]:h-[var(--height)] [&_[data-scope=toast][data-part=root]]:opacity-[var(--opacity)] [&_[data-scope=toast][data-part=root]]:[will-change:translate,opacity,scale]', '[&_[data-scope=toast][data-part=root]]:[transition-property:translate,scale,opacity,height,box-shadow] [&_[data-scope=toast][data-part=root]]:[transition-timing-function:ease] [&_[data-scope=toast][data-part=root]]:[transition-duration:300ms]', '[&_[data-scope=toast][data-part=root][data-state=closed]]:[transition-property:translate,scale,opacity] [&_[data-scope=toast][data-part=root][data-state=closed]]:[transition-timing-function:ease] [&_[data-scope=toast][data-part=root][data-state=closed]]:[transition-duration:150ms]', '[&_[data-scope=toast][data-part=root]:nth-child(n+4)]:hidden', '[&_[data-scope=toast][data-part=root]]:after:content-[""] [&_[data-scope=toast][data-part=root]]:after:absolute [&_[data-scope=toast][data-part=root]]:after:inset-0 [&_[data-scope=toast][data-part=root]]:after:rounded-[inherit] [&_[data-scope=toast][data-part=root]]:after:pointer-events-none [&_[data-scope=toast][data-part=root]]:after:z-[1] [&_[data-scope=toast][data-part=root]]:after:opacity-0 [&_[data-scope=toast][data-part=root]]:after:[transition:opacity_300ms_ease]', '[&_[data-scope=toast][data-part=root][data-state=closed]]:after:[transition:opacity_150ms_ease]', '[&_[data-scope=toast][data-part=root]:not([data-first]):not([data-stack])]:after:[background:--alpha(var(--color-white)/50%)] [&_[data-scope=toast][data-part=root]:not([data-first]):not([data-stack])]:after:opacity-100', '[&_[data-scope=toast][data-part=root]:nth-child(2):not([data-stack])]:after:[background:--alpha(var(--color-white)/20%)] [&_[data-scope=toast][data-part=root]:nth-child(2):not([data-stack])]:after:opacity-100'),
+            className: cn('fixed bottom-0 right-0 !z-[50] flex flex-col gap-12 p-24 max-w-[560px] mx-auto', '[&_[data-scope=toast][data-part=root]]:[translate:var(--x)_var(--y)] [&_[data-scope=toast][data-part=root]]:scale-[var(--scale)] [&_[data-scope=toast][data-part=root]]:z-[var(--z-index)] [&_[data-scope=toast][data-part=root]]:h-[var(--height)] [&_[data-scope=toast][data-part=root]]:opacity-[var(--opacity)] [&_[data-scope=toast][data-part=root]]:[will-change:translate,opacity,scale]', '[&_[data-scope=toast][data-part=root]]:[transition-property:translate,scale,opacity,height,box-shadow] [&_[data-scope=toast][data-part=root]]:[transition-timing-function:ease] [&_[data-scope=toast][data-part=root]]:[transition-duration:300ms]', '[&_[data-scope=toast][data-part=root][data-state=closed]]:[transition-property:translate,scale,opacity] [&_[data-scope=toast][data-part=root][data-state=closed]]:[transition-timing-function:ease] [&_[data-scope=toast][data-part=root][data-state=closed]]:[transition-duration:150ms]', '[&_[data-scope=toast][data-part=root]:nth-child(n+4)]:hidden', '[&_[data-scope=toast][data-part=root]]:after:content-[""] [&_[data-scope=toast][data-part=root]]:after:absolute [&_[data-scope=toast][data-part=root]]:after:inset-0 [&_[data-scope=toast][data-part=root]]:after:rounded-[inherit] [&_[data-scope=toast][data-part=root]]:after:pointer-events-none [&_[data-scope=toast][data-part=root]]:after:z-[1] [&_[data-scope=toast][data-part=root]]:after:opacity-0 [&_[data-scope=toast][data-part=root]]:after:[transition:opacity_300ms_ease]', '[&_[data-scope=toast][data-part=root][data-state=closed]]:after:[transition:opacity_150ms_ease]', '[&_[data-scope=toast][data-part=root]:not([data-first]):not([data-stack])]:after:[background:--alpha(var(--color-white)/50%)] [&_[data-scope=toast][data-part=root]:not([data-first]):not([data-stack])]:after:opacity-100', '[&_[data-scope=toast][data-part=root]:nth-child(2):not([data-stack])]:after:[background:--alpha(var(--color-white)/20%)] [&_[data-scope=toast][data-part=root]:nth-child(2):not([data-stack])]:after:opacity-100'),
             children: (toast)=>/*#__PURE__*/ jsx(Toast, {
                     toast: toast
                 }, toast.id)

package/dist/components/Tree/TreeContext.d.ts

@@ -1,11 +1,3 @@
+export { TREE_DEFAULT_INDENT, type TreeDepthContextValue, TreeDepthProvider, useTreeDepth, useTreeGap, useTreeIndent, } from '../../utils/treeDepth';
 declare const TREE_BASE_PADDING = 8;
-interface TreeDepthContextValue {
-    depth: number;
-    indent: number;
-    gap: number | undefined;
-}
-export declare const TreeDepthProvider: import("react").Provider<TreeDepthContextValue>;
-export declare function useTreeDepth(): number;
-export declare function useTreeIndent(): number;
-export declare function useTreeGap(): number | undefined;
 export { TREE_BASE_PADDING };

package/dist/components/Tree/TreeContext.js

@@ -1,19 +1,3 @@
-import { createContext, useContext } from "react";
+import { TREE_DEFAULT_INDENT, TreeDepthProvider, useTreeDepth, useTreeGap, useTreeIndent } from "../../utils/treeDepth.js";
 const TREE_BASE_PADDING = 8;
-const TREE_DEFAULT_INDENT = 24;
-const TreeDepthContext = createContext({
-    depth: 0,
-    indent: TREE_DEFAULT_INDENT,
-    gap: void 0
-});
-const TreeDepthProvider = TreeDepthContext.Provider;
-function useTreeDepth() {
-    return useContext(TreeDepthContext).depth;
-}
-function useTreeIndent() {
-    return useContext(TreeDepthContext).indent;
-}
-function useTreeGap() {
-    return useContext(TreeDepthContext).gap;
-}
-export { TREE_BASE_PADDING, TreeDepthProvider, useTreeDepth, useTreeGap, useTreeIndent };
+export { TREE_BASE_PADDING, TREE_DEFAULT_INDENT, TreeDepthProvider, useTreeDepth, useTreeGap, useTreeIndent };