@lobehub/ui 5.19.3 → 5.20.1

package/es/base-ui/Input/style.mjs

@@ -0,0 +1,230 @@
+import { staticStylish } from "../../styles/theme/customStylishStatic.mjs";
+import { controlHeight } from "../controlSize.mjs";
+import { createStaticStyles } from "antd-style";
+import { cva } from "class-variance-authority";
+//#region src/base-ui/Input/style.ts
+const styles = createStaticStyles(({ css, cssVar }) => ({
+	borderless: css`
+    border: 1px solid transparent;
+    background: none;
+  `,
+	filled: css`
+    border: 1px solid transparent;
+    background: ${cssVar.colorFillTertiary};
+
+    &:hover:not(:focus-within, [data-disabled]) {
+      background: ${cssVar.colorFillSecondary};
+    }
+  `,
+	input: css`
+    flex: 1;
+
+    min-width: 0;
+    padding: 0;
+    border: none;
+
+    font: inherit;
+    color: inherit;
+
+    appearance: none;
+    background: transparent;
+    outline: none;
+
+    &::placeholder {
+      color: ${cssVar.colorTextPlaceholder};
+    }
+  `,
+	invalid: css`
+    &:has([data-invalid]) {
+      border-color: ${cssVar.colorError};
+
+      &:focus-within {
+        border-color: ${cssVar.colorError};
+        box-shadow: 0 0 0 2px ${cssVar.colorErrorBg};
+      }
+    }
+  `,
+	outlined: css`
+    border: 1px solid ${cssVar.colorBorderSecondary};
+    background: ${cssVar.colorBgContainer};
+
+    &:hover:not(:focus-within, [data-disabled]) {
+      border-color: ${cssVar.colorBorder};
+    }
+
+    &:focus-within {
+      border-color: ${cssVar.colorPrimary};
+      box-shadow: 0 0 0 2px ${cssVar.colorPrimaryBg};
+    }
+  `,
+	root: css`
+    cursor: text;
+
+    display: inline-flex;
+    gap: 8px;
+    align-items: center;
+
+    box-sizing: border-box;
+    width: 100%;
+    padding-inline: 12px;
+    border-radius: ${cssVar.borderRadius};
+
+    font-size: 14px;
+    color: ${cssVar.colorText};
+
+    transition:
+      background 150ms ${cssVar.motionEaseOut},
+      border-color 150ms ${cssVar.motionEaseOut},
+      box-shadow 150ms ${cssVar.motionEaseOut};
+
+    &[data-disabled],
+    &:has(:disabled) {
+      cursor: not-allowed;
+      color: ${cssVar.colorTextQuaternary};
+      opacity: 0.66;
+    }
+  `,
+	shadow: staticStylish.shadow,
+	sizeLarge: css`
+    height: ${controlHeight.large}px;
+    border-radius: ${cssVar.borderRadiusLG};
+    font-size: 16px;
+  `,
+	sizeMiddle: css`
+    height: ${controlHeight.middle}px;
+  `,
+	sizeSmall: css`
+    height: ${controlHeight.small}px;
+    padding-inline: 8px;
+    border-radius: ${cssVar.borderRadiusSM};
+    font-size: 12px;
+  `,
+	numberControl: css`
+    cursor: pointer;
+
+    display: flex;
+    flex: 1;
+    align-items: center;
+    justify-content: center;
+
+    margin: 0;
+    padding: 0;
+    border: none;
+
+    color: ${cssVar.colorTextTertiary};
+
+    background: none;
+    outline: none;
+
+    transition: color 150ms ${cssVar.motionEaseOut};
+
+    &:hover:not(:disabled) {
+      color: ${cssVar.colorText};
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.4;
+    }
+  `,
+	numberControls: css`
+    display: flex;
+    flex: none;
+    flex-direction: column;
+    align-self: stretch;
+
+    width: 22px;
+    margin-inline-end: -8px;
+    border-inline-start: 1px solid ${cssVar.colorBorderSecondary};
+  `,
+	numberInput: css`
+    font-variant-numeric: tabular-nums;
+  `,
+	otpCell: css`
+    flex: none;
+    width: ${controlHeight.middle}px;
+    padding-inline: 0;
+    text-align: center;
+  `,
+	otpRoot: css`
+    display: inline-flex;
+    gap: 8px;
+    align-items: center;
+  `,
+	passwordToggle: css`
+    cursor: pointer;
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    margin: 0;
+    padding: 0;
+    border: none;
+
+    color: ${cssVar.colorTextTertiary};
+
+    background: none;
+    outline: none;
+
+    transition: color 150ms ${cssVar.motionEaseOut};
+
+    &:hover {
+      color: ${cssVar.colorText};
+    }
+  `,
+	slot: css`
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    color: ${cssVar.colorTextTertiary};
+  `,
+	textarea: css`
+    height: auto;
+    padding-block: 8px;
+
+    textarea {
+      resize: none;
+      min-height: calc(1.5em * var(--textarea-min-rows, 2));
+      max-height: var(--textarea-max-height, none);
+      line-height: 1.5;
+    }
+  `,
+	textareaAutoSize: css`
+    textarea {
+      field-sizing: content;
+    }
+  `,
+	textareaResize: css`
+    textarea {
+      resize: vertical;
+    }
+  `
+}));
+const rootVariants = cva([styles.root, styles.invalid], {
+	defaultVariants: {
+		shadow: false,
+		size: "middle",
+		variant: "outlined"
+	},
+	variants: {
+		shadow: {
+			false: null,
+			true: styles.shadow
+		},
+		size: {
+			large: styles.sizeLarge,
+			middle: styles.sizeMiddle,
+			small: styles.sizeSmall
+		},
+		variant: {
+			borderless: styles.borderless,
+			filled: styles.filled,
+			outlined: styles.outlined
+		}
+	}
+});
+//#endregion
+export { rootVariants, styles };
+
+//# sourceMappingURL=style.mjs.map

package/es/base-ui/Input/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":["lobeStaticStylish"],"sources":["../../../src/base-ui/Input/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { controlHeight } from '@/base-ui/controlSize';\nimport { lobeStaticStylish } from '@/styles';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  borderless: css`\n    border: 1px solid transparent;\n    background: none;\n  `,\n  filled: css`\n    border: 1px solid transparent;\n    background: ${cssVar.colorFillTertiary};\n\n    &:hover:not(:focus-within, [data-disabled]) {\n      background: ${cssVar.colorFillSecondary};\n    }\n  `,\n  input: css`\n    flex: 1;\n\n    min-width: 0;\n    padding: 0;\n    border: none;\n\n    font: inherit;\n    color: inherit;\n\n    appearance: none;\n    background: transparent;\n    outline: none;\n\n    &::placeholder {\n      color: ${cssVar.colorTextPlaceholder};\n    }\n  `,\n  invalid: css`\n    &:has([data-invalid]) {\n      border-color: ${cssVar.colorError};\n\n      &:focus-within {\n        border-color: ${cssVar.colorError};\n        box-shadow: 0 0 0 2px ${cssVar.colorErrorBg};\n      }\n    }\n  `,\n  outlined: css`\n    border: 1px solid ${cssVar.colorBorderSecondary};\n    background: ${cssVar.colorBgContainer};\n\n    &:hover:not(:focus-within, [data-disabled]) {\n      border-color: ${cssVar.colorBorder};\n    }\n\n    &:focus-within {\n      border-color: ${cssVar.colorPrimary};\n      box-shadow: 0 0 0 2px ${cssVar.colorPrimaryBg};\n    }\n  `,\n  root: css`\n    cursor: text;\n\n    display: inline-flex;\n    gap: 8px;\n    align-items: center;\n\n    box-sizing: border-box;\n    width: 100%;\n    padding-inline: 12px;\n    border-radius: ${cssVar.borderRadius};\n\n    font-size: 14px;\n    color: ${cssVar.colorText};\n\n    transition:\n      background 150ms ${cssVar.motionEaseOut},\n      border-color 150ms ${cssVar.motionEaseOut},\n      box-shadow 150ms ${cssVar.motionEaseOut};\n\n    &[data-disabled],\n    &:has(:disabled) {\n      cursor: not-allowed;\n      color: ${cssVar.colorTextQuaternary};\n      opacity: 0.66;\n    }\n  `,\n  shadow: lobeStaticStylish.shadow,\n  sizeLarge: css`\n    height: ${controlHeight.large}px;\n    border-radius: ${cssVar.borderRadiusLG};\n    font-size: 16px;\n  `,\n  sizeMiddle: css`\n    height: ${controlHeight.middle}px;\n  `,\n  sizeSmall: css`\n    height: ${controlHeight.small}px;\n    padding-inline: 8px;\n    border-radius: ${cssVar.borderRadiusSM};\n    font-size: 12px;\n  `,\n  numberControl: css`\n    cursor: pointer;\n\n    display: flex;\n    flex: 1;\n    align-items: center;\n    justify-content: center;\n\n    margin: 0;\n    padding: 0;\n    border: none;\n\n    color: ${cssVar.colorTextTertiary};\n\n    background: none;\n    outline: none;\n\n    transition: color 150ms ${cssVar.motionEaseOut};\n\n    &:hover:not(:disabled) {\n      color: ${cssVar.colorText};\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n      opacity: 0.4;\n    }\n  `,\n  numberControls: css`\n    display: flex;\n    flex: none;\n    flex-direction: column;\n    align-self: stretch;\n\n    width: 22px;\n    margin-inline-end: -8px;\n    border-inline-start: 1px solid ${cssVar.colorBorderSecondary};\n  `,\n  numberInput: css`\n    font-variant-numeric: tabular-nums;\n  `,\n  otpCell: css`\n    flex: none;\n    width: ${controlHeight.middle}px;\n    padding-inline: 0;\n    text-align: center;\n  `,\n  otpRoot: css`\n    display: inline-flex;\n    gap: 8px;\n    align-items: center;\n  `,\n  passwordToggle: css`\n    cursor: pointer;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    margin: 0;\n    padding: 0;\n    border: none;\n\n    color: ${cssVar.colorTextTertiary};\n\n    background: none;\n    outline: none;\n\n    transition: color 150ms ${cssVar.motionEaseOut};\n\n    &:hover {\n      color: ${cssVar.colorText};\n    }\n  `,\n  slot: css`\n    display: inline-flex;\n    flex: none;\n    align-items: center;\n    color: ${cssVar.colorTextTertiary};\n  `,\n  textarea: css`\n    height: auto;\n    padding-block: 8px;\n\n    textarea {\n      resize: none;\n      min-height: calc(1.5em * var(--textarea-min-rows, 2));\n      max-height: var(--textarea-max-height, none);\n      line-height: 1.5;\n    }\n  `,\n  textareaAutoSize: css`\n    textarea {\n      field-sizing: content;\n    }\n  `,\n  textareaResize: css`\n    textarea {\n      resize: vertical;\n    }\n  `,\n}));\n\nexport const rootVariants = cva([styles.root, styles.invalid], {\n  defaultVariants: {\n    shadow: false,\n    size: 'middle',\n    variant: 'outlined',\n  },\n  variants: {\n    shadow: {\n      false: null,\n      true: styles.shadow,\n    },\n    size: {\n      large: styles.sizeLarge,\n      middle: styles.sizeMiddle,\n      small: styles.sizeSmall,\n    },\n    variant: {\n      borderless: styles.borderless,\n      filled: styles.filled,\n      outlined: styles.outlined,\n    },\n  },\n});\n"],"mappings":";;;;;AAMA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,YAAY,GAAG;;;;CAIf,QAAQ,GAAG;;kBAEK,OAAO,kBAAkB;;;oBAGvB,OAAO,mBAAmB;;;CAG5C,OAAO,GAAG;;;;;;;;;;;;;;;eAeG,OAAO,qBAAqB;;;CAGzC,SAAS,GAAG;;sBAEQ,OAAO,WAAW;;;wBAGhB,OAAO,WAAW;gCACV,OAAO,aAAa;;;;CAIlD,UAAU,GAAG;wBACS,OAAO,qBAAqB;kBAClC,OAAO,iBAAiB;;;sBAGpB,OAAO,YAAY;;;;sBAInB,OAAO,aAAa;8BACZ,OAAO,eAAe;;;CAGlD,MAAM,GAAG;;;;;;;;;;qBAUU,OAAO,aAAa;;;aAG5B,OAAO,UAAU;;;yBAGL,OAAO,cAAc;2BACnB,OAAO,cAAc;yBACvB,OAAO,cAAc;;;;;eAK/B,OAAO,oBAAoB;;;;CAIxC,QAAQA,cAAkB;CAC1B,WAAW,GAAG;cACF,cAAc,MAAM;qBACb,OAAO,eAAe;;;CAGzC,YAAY,GAAG;cACH,cAAc,OAAO;;CAEjC,WAAW,GAAG;cACF,cAAc,MAAM;;qBAEb,OAAO,eAAe;;;CAGzC,eAAe,GAAG;;;;;;;;;;;;aAYP,OAAO,kBAAkB;;;;;8BAKR,OAAO,cAAc;;;eAGpC,OAAO,UAAU;;;;;;;;CAQ9B,gBAAgB,GAAG;;;;;;;;qCAQgB,OAAO,qBAAqB;;CAE/D,aAAa,GAAG;;;CAGhB,SAAS,GAAG;;aAED,cAAc,OAAO;;;;CAIhC,SAAS,GAAG;;;;;CAKZ,gBAAgB,GAAG;;;;;;;;;;;aAWR,OAAO,kBAAkB;;;;;8BAKR,OAAO,cAAc;;;eAGpC,OAAO,UAAU;;;CAG9B,MAAM,GAAG;;;;aAIE,OAAO,kBAAkB;;CAEpC,UAAU,GAAG;;;;;;;;;;;CAWb,kBAAkB,GAAG;;;;;CAKrB,gBAAgB,GAAG;;;;;CAKpB,EAAE;AAEH,MAAa,eAAe,IAAI,CAAC,OAAO,MAAM,OAAO,QAAQ,EAAE;CAC7D,iBAAiB;EACf,QAAQ;EACR,MAAM;EACN,SAAS;EACV;CACD,UAAU;EACR,QAAQ;GACN,OAAO;GACP,MAAM,OAAO;GACd;EACD,MAAM;GACJ,OAAO,OAAO;GACd,QAAQ,OAAO;GACf,OAAO,OAAO;GACf;EACD,SAAS;GACP,YAAY,OAAO;GACnB,QAAQ,OAAO;GACf,UAAU,OAAO;GAClB;EACF;CACF,CAAC"}

package/es/base-ui/Input/type.d.mts

@@ -0,0 +1,122 @@
+import { CSSProperties, ComponentProps, ReactNode, Ref } from "react";
+import { Input } from "@base-ui/react/input";
+import { NumberField } from "@base-ui/react/number-field";
+import { OTPField } from "@base-ui/react/otp-field";
+
+//#region src/base-ui/Input/type.d.ts
+type InputVariant = 'filled' | 'outlined' | 'borderless';
+type InputSize = 'small' | 'middle' | 'large';
+interface InputClassNames {
+  input?: string;
+  prefix?: string;
+  suffix?: string;
+}
+interface InputStyles {
+  input?: CSSProperties;
+  prefix?: CSSProperties;
+  suffix?: CSSProperties;
+}
+type BaseInputProps = Omit<ComponentProps<typeof Input>, 'size' | 'prefix' | 'render' | 'className' | 'style'>;
+interface InputProps extends BaseInputProps {
+  className?: string;
+  /**
+   * Custom class names for each part
+   */
+  classNames?: InputClassNames;
+  /**
+   * Prefix node rendered before the input
+   */
+  prefix?: ReactNode;
+  /**
+   * Reference to the input element
+   */
+  ref?: Ref<HTMLInputElement>;
+  /**
+   * Apply lobe shadow style
+   */
+  shadow?: boolean;
+  /**
+   * Size of the input
+   * @default 'middle'
+   */
+  size?: InputSize;
+  style?: CSSProperties;
+  /**
+   * Custom styles for each part
+   */
+  styles?: InputStyles;
+  /**
+   * Suffix node rendered after the input
+   */
+  suffix?: ReactNode;
+  /**
+   * Visual variant, defaults to `filled` in dark mode and `outlined` in light mode
+   */
+  variant?: InputVariant;
+}
+interface InputPasswordProps extends Omit<InputProps, 'type'> {
+  /**
+   * Show the eye toggle button
+   * @default true
+   */
+  visibilityToggle?: boolean;
+}
+type BaseNumberFieldProps = Omit<ComponentProps<typeof NumberField.Root>, 'className' | 'style' | 'render' | 'onValueChange' | 'children'>;
+interface InputNumberProps extends BaseNumberFieldProps {
+  /**
+   * Change value on wheel scrub
+   */
+  changeOnWheel?: boolean;
+  className?: string;
+  classNames?: Pick<InputClassNames, 'input'>;
+  /**
+   * Show increment/decrement buttons
+   * @default true
+   */
+  controls?: boolean;
+  onChange?: (value: number | null) => void;
+  placeholder?: string;
+  ref?: Ref<HTMLInputElement>;
+  shadow?: boolean;
+  size?: InputSize;
+  style?: CSSProperties;
+  styles?: Pick<InputStyles, 'input'>;
+  variant?: InputVariant;
+}
+type BaseOTPFieldProps = Omit<ComponentProps<typeof OTPField.Root>, 'className' | 'style' | 'render' | 'onValueChange' | 'children' | 'length'>;
+interface InputOTPProps extends BaseOTPFieldProps {
+  className?: string;
+  classNames?: Pick<InputClassNames, 'input'>;
+  /**
+   * Number of cells
+   * @default 6
+   */
+  length?: number;
+  onChange?: (value: string) => void;
+  shadow?: boolean;
+  size?: InputSize;
+  style?: CSSProperties;
+  styles?: Pick<InputStyles, 'input'>;
+  variant?: InputVariant;
+}
+type TextAreaAutoSize = boolean | {
+  maxRows?: number;
+  minRows?: number;
+};
+interface TextAreaProps extends Omit<ComponentProps<'textarea'>, 'prefix'>, Pick<InputProps, 'shadow' | 'variant'> {
+  /**
+   * Auto grow with content, optionally bounded by minRows/maxRows
+   */
+  autoSize?: TextAreaAutoSize;
+  classNames?: Pick<InputClassNames, 'input'>;
+  ref?: Ref<HTMLTextAreaElement>;
+  /**
+   * Allow manual resize
+   * @default false
+   */
+  resize?: boolean;
+  styles?: Pick<InputStyles, 'input'>;
+}
+//#endregion
+export { InputClassNames, InputNumberProps, InputOTPProps, InputPasswordProps, InputProps, InputSize, InputStyles, InputVariant, TextAreaAutoSize, TextAreaProps };
+//# sourceMappingURL=type.d.mts.map

package/es/base-ui/Select/style.mjs

@@ -1,4 +1,5 @@
 import { staticStylish } from "../../styles/theme/customStylishStatic.mjs";
+import { controlHeight } from "../controlSize.mjs";
 import { createStaticStyles, cx } from "antd-style";
 import { cva } from "class-variance-authority";
 //#region src/base-ui/Select/style.ts
@@ -251,7 +252,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     }
   `,
 	triggerLarge: css`
-    min-height: 40px;
+    min-height: ${controlHeight.large}px;
     padding-block: 6px;
     padding-inline: 12px;
 
@@ -259,7 +260,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     line-height: 24px;
   `,
 	triggerMiddle: css`
-    min-height: 32px;
+    min-height: ${controlHeight.middle}px;
     padding-block: 4px;
     padding-inline: 11px;
 
@@ -267,7 +268,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     line-height: 20px;
   `,
 	triggerSmall: css`
-    min-height: 24px;
+    min-height: ${controlHeight.small}px;
     padding-block: 0;
     padding-inline: 8px;
 

package/es/base-ui/Select/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":["lobeStaticStylish"],"sources":["../../../src/base-ui/Select/style.ts"],"sourcesContent":["import { createStaticStyles, cx } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { lobeStaticStylish } from '@/styles';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  arrow: css`\n    display: flex;\n    width: 12px;\n    height: 6px;\n\n    & > svg {\n      width: 100%;\n      height: 100%;\n    }\n  `,\n  borderless: cx(\n    lobeStaticStylish.variantBorderless,\n    css`\n      --lobe-select-open-bg: ${cssVar.colorFillTertiary};\n      --lobe-select-readonly-bg: color-mix(in srgb, ${cssVar.colorFillTertiary} 70%, transparent);\n      --lobe-select-disabled-bg: color-mix(in srgb, ${cssVar.colorFillTertiary} 55%, transparent);\n    `,\n  ),\n  clear: css`\n    display: inline-flex;\n    align-items: center;\n\n    color: ${cssVar.colorTextTertiary};\n\n    opacity: 0;\n\n    transition: opacity 150ms ${cssVar.motionEaseOut};\n\n    &:hover {\n      color: ${cssVar.colorTextSecondary};\n    }\n  `,\n  empty: css``,\n  filled: cx(\n    lobeStaticStylish.variantFilled,\n    css`\n      --lobe-select-open-bg: ${cssVar.colorFillSecondary};\n      --lobe-select-readonly-bg: color-mix(in srgb, ${cssVar.colorFillTertiary} 70%, transparent);\n      --lobe-select-disabled-bg: color-mix(in srgb, ${cssVar.colorFillTertiary} 55%, transparent);\n    `,\n  ),\n  group: css``,\n  groupLabel: css``,\n  icon: css`\n    display: inline-flex;\n    align-items: center;\n    transition: transform 150ms ${cssVar.motionEaseOut};\n\n    &[data-popup-open] {\n      transform: rotate(180deg);\n    }\n  `,\n  item: css``,\n  itemBoldSelected: css`\n    &[data-selected] {\n      font-weight: 600;\n    }\n  `,\n  itemIndicator: css`\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    margin-inline-start: auto;\n    padding-inline-start: 8px;\n\n    color: ${cssVar.colorPrimary};\n  `,\n  itemText: css``,\n  list: css`\n    overflow-y: auto;\n    flex: 1;\n\n    min-height: 0;\n    max-height: var(--lobe-select-available-height, var(--available-height));\n    padding-block: 0;\n  `,\n  outlined: cx(\n    lobeStaticStylish.variantOutlined,\n    css`\n      --lobe-select-open-bg: ${cssVar.colorFillTertiary};\n      --lobe-select-readonly-bg: color-mix(in srgb, ${cssVar.colorBgContainer} 75%, transparent);\n      --lobe-select-disabled-bg: color-mix(in srgb, ${cssVar.colorBgContainer} 60%, transparent);\n    `,\n  ),\n  popup: css`\n    --lobe-select-available-height: min(\n      var(--available-height),\n      var(--lobe-select-popup-max-height, var(--available-height))\n    );\n\n    transform-origin: var(--transform-origin);\n\n    display: flex;\n    flex-direction: column;\n\n    box-sizing: border-box;\n\n    transition:\n      opacity 150ms ${cssVar.motionEaseOut},\n      transform 150ms ${cssVar.motionEaseOut};\n\n    &[data-starting-style],\n    &[data-ending-style] {\n      transform: scaleY(0.92);\n      opacity: 0;\n    }\n  `,\n  positioner: css`\n    z-index: 1100;\n    outline: none;\n  `,\n  prefix: css`\n    display: inline-flex;\n    align-items: center;\n    color: ${cssVar.colorTextSecondary};\n  `,\n  scrollArrow: css`\n    cursor: default;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    height: 16px;\n\n    color: ${cssVar.colorTextSecondary};\n\n    background: ${cssVar.colorBgElevated};\n  `,\n  search: css`\n    cursor: text;\n\n    display: flex;\n    align-items: center;\n\n    min-height: 36px;\n    margin-inline: -4px;\n    padding-block: 8px;\n    padding-inline: 12px;\n    border-block-end: 1px solid ${cssVar.colorFillSecondary};\n  `,\n  searchInput: css`\n    flex: 1;\n\n    min-width: 0;\n    padding-block: 0;\n    padding-inline: 4px;\n    border: 0;\n\n    font-size: 14px;\n    line-height: 20px;\n    color: ${cssVar.colorText};\n\n    background: transparent;\n    outline: none;\n\n    &::placeholder {\n      color: ${cssVar.colorTextPlaceholder};\n    }\n  `,\n  shadow: lobeStaticStylish.shadow,\n  suffix: css`\n    display: inline-flex;\n    gap: 6px;\n    align-items: center;\n    color: ${cssVar.colorTextSecondary};\n  `,\n  tag: css`\n    display: inline-flex;\n    align-items: center;\n\n    max-width: 100%;\n    padding-block: 0;\n    padding-inline: 6px;\n    border-radius: ${cssVar.borderRadiusSM};\n\n    font-size: 12px;\n    line-height: 20px;\n    color: ${cssVar.colorText};\n\n    background: ${cssVar.colorFillTertiary};\n  `,\n  tags: css`\n    display: flex;\n    flex-wrap: wrap;\n    gap: 4px;\n    align-items: center;\n  `,\n  trigger: css`\n    cursor: pointer;\n    user-select: none;\n\n    display: inline-flex;\n    gap: 8px;\n    align-items: center;\n\n    box-sizing: border-box;\n    width: 100%;\n    border: 1px solid transparent;\n    border-radius: ${cssVar.borderRadius};\n\n    font-family: inherit;\n    color: ${cssVar.colorText};\n\n    background: transparent;\n    outline: none;\n\n    transition: all 150ms ${cssVar.motionEaseOut};\n\n    &:not([data-disabled], [data-readonly])[data-popup-open],\n    &:not([data-disabled], [data-readonly])[data-open],\n    &:not([data-disabled], [data-readonly])[data-state='open'],\n    &:not([data-disabled], [data-readonly])[aria-expanded='true'] {\n      background: var(--lobe-select-open-bg, ${cssVar.colorFillTertiary});\n    }\n\n    &:focus-visible {\n      outline: 2px solid ${cssVar.colorPrimaryBorder};\n      outline-offset: 1px;\n    }\n\n    &:hover [data-role='lobe-select-clear'] {\n      opacity: 1;\n    }\n\n    &[data-placeholder] [data-role='lobe-select-clear'] {\n      pointer-events: none;\n      opacity: 0;\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n      color: ${cssVar.colorTextDisabled};\n      background: var(--lobe-select-disabled-bg, transparent);\n\n      &:hover {\n        background: var(--lobe-select-disabled-bg, transparent);\n      }\n    }\n\n    &[data-readonly] {\n      cursor: default;\n      color: ${cssVar.colorTextSecondary};\n      background: var(--lobe-select-readonly-bg, transparent);\n\n      &:hover {\n        background: var(--lobe-select-readonly-bg, transparent);\n      }\n    }\n\n    &[data-disabled] [data-role='lobe-select-clear'] {\n      pointer-events: none;\n      opacity: 0;\n    }\n  `,\n  triggerLarge: css`\n    min-height: 40px;\n    padding-block: 6px;\n    padding-inline: 12px;\n\n    font-size: 16px;\n    line-height: 24px;\n  `,\n  triggerMiddle: css`\n    min-height: 32px;\n    padding-block: 4px;\n    padding-inline: 11px;\n\n    font-size: 14px;\n    line-height: 20px;\n  `,\n  triggerSmall: css`\n    min-height: 24px;\n    padding-block: 0;\n    padding-inline: 8px;\n\n    font-size: 12px;\n    line-height: 18px;\n  `,\n  value: css`\n    display: flex;\n    flex: 1;\n    flex-wrap: wrap;\n    gap: 4px;\n    align-items: center;\n\n    min-width: 0;\n\n    color: inherit;\n\n    &[data-placeholder] {\n      color: ${cssVar.colorTextPlaceholder};\n    }\n  `,\n  valueText: css`\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  `,\n}));\n\nexport const triggerVariants = cva(styles.trigger, {\n  defaultVariants: {\n    shadow: false,\n    size: 'middle',\n    variant: 'outlined',\n  },\n  variants: {\n    shadow: {\n      false: null,\n      true: styles.shadow,\n    },\n    size: {\n      large: styles.triggerLarge,\n      middle: styles.triggerMiddle,\n      small: styles.triggerSmall,\n    },\n    variant: {\n      borderless: styles.borderless,\n      filled: styles.filled,\n      outlined: styles.outlined,\n    },\n  },\n});\n"],"mappings":";;;;AAKA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,OAAO,GAAG;;;;;;;;;;CAUV,YAAY,GACVA,cAAkB,mBAClB,GAAG;+BACwB,OAAO,kBAAkB;sDACF,OAAO,kBAAkB;sDACzB,OAAO,kBAAkB;MAE5E;CACD,OAAO,GAAG;;;;aAIC,OAAO,kBAAkB;;;;gCAIN,OAAO,cAAc;;;eAGtC,OAAO,mBAAmB;;;CAGvC,OAAO,GAAG;CACV,QAAQ,GACNA,cAAkB,eAClB,GAAG;+BACwB,OAAO,mBAAmB;sDACH,OAAO,kBAAkB;sDACzB,OAAO,kBAAkB;MAE5E;CACD,OAAO,GAAG;CACV,YAAY,GAAG;CACf,MAAM,GAAG;;;kCAGuB,OAAO,cAAc;;;;;;CAMrD,MAAM,GAAG;CACT,kBAAkB,GAAG;;;;;CAKrB,eAAe,GAAG;;;;;;;;aAQP,OAAO,aAAa;;CAE/B,UAAU,GAAG;CACb,MAAM,GAAG;;;;;;;;CAQT,UAAU,GACRA,cAAkB,iBAClB,GAAG;+BACwB,OAAO,kBAAkB;sDACF,OAAO,iBAAiB;sDACxB,OAAO,iBAAiB;MAE3E;CACD,OAAO,GAAG;;;;;;;;;;;;;;sBAcU,OAAO,cAAc;wBACnB,OAAO,cAAc;;;;;;;;CAQ3C,YAAY,GAAG;;;;CAIf,QAAQ,GAAG;;;aAGA,OAAO,mBAAmB;;CAErC,aAAa,GAAG;;;;;;;;;aASL,OAAO,mBAAmB;;kBAErB,OAAO,gBAAgB;;CAEvC,QAAQ,GAAG;;;;;;;;;;kCAUqB,OAAO,mBAAmB;;CAE1D,aAAa,GAAG;;;;;;;;;;aAUL,OAAO,UAAU;;;;;;eAMf,OAAO,qBAAqB;;;CAGzC,QAAQA,cAAkB;CAC1B,QAAQ,GAAG;;;;aAIA,OAAO,mBAAmB;;CAErC,KAAK,GAAG;;;;;;;qBAOW,OAAO,eAAe;;;;aAI9B,OAAO,UAAU;;kBAEZ,OAAO,kBAAkB;;CAEzC,MAAM,GAAG;;;;;;CAMT,SAAS,GAAG;;;;;;;;;;;qBAWO,OAAO,aAAa;;;aAG5B,OAAO,UAAU;;;;;4BAKF,OAAO,cAAc;;;;;;+CAMF,OAAO,kBAAkB;;;;2BAI7C,OAAO,mBAAmB;;;;;;;;;;;;;;;eAetC,OAAO,kBAAkB;;;;;;;;;;eAUzB,OAAO,mBAAmB;;;;;;;;;;;;;CAavC,cAAc,GAAG;;;;;;;;CAQjB,eAAe,GAAG;;;;;;;;CAQlB,cAAc,GAAG;;;;;;;;CAQjB,OAAO,GAAG;;;;;;;;;;;;eAYG,OAAO,qBAAqB;;;CAGzC,WAAW,GAAG;;;;;CAKf,EAAE;AAEH,MAAa,kBAAkB,IAAI,OAAO,SAAS;CACjD,iBAAiB;EACf,QAAQ;EACR,MAAM;EACN,SAAS;EACV;CACD,UAAU;EACR,QAAQ;GACN,OAAO;GACP,MAAM,OAAO;GACd;EACD,MAAM;GACJ,OAAO,OAAO;GACd,QAAQ,OAAO;GACf,OAAO,OAAO;GACf;EACD,SAAS;GACP,YAAY,OAAO;GACnB,QAAQ,OAAO;GACf,UAAU,OAAO;GAClB;EACF;CACF,CAAC"}
+{"version":3,"file":"style.mjs","names":["lobeStaticStylish"],"sources":["../../../src/base-ui/Select/style.ts"],"sourcesContent":["import { createStaticStyles, cx } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { controlHeight } from '@/base-ui/controlSize';\nimport { lobeStaticStylish } from '@/styles';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  arrow: css`\n    display: flex;\n    width: 12px;\n    height: 6px;\n\n    & > svg {\n      width: 100%;\n      height: 100%;\n    }\n  `,\n  borderless: cx(\n    lobeStaticStylish.variantBorderless,\n    css`\n      --lobe-select-open-bg: ${cssVar.colorFillTertiary};\n      --lobe-select-readonly-bg: color-mix(in srgb, ${cssVar.colorFillTertiary} 70%, transparent);\n      --lobe-select-disabled-bg: color-mix(in srgb, ${cssVar.colorFillTertiary} 55%, transparent);\n    `,\n  ),\n  clear: css`\n    display: inline-flex;\n    align-items: center;\n\n    color: ${cssVar.colorTextTertiary};\n\n    opacity: 0;\n\n    transition: opacity 150ms ${cssVar.motionEaseOut};\n\n    &:hover {\n      color: ${cssVar.colorTextSecondary};\n    }\n  `,\n  empty: css``,\n  filled: cx(\n    lobeStaticStylish.variantFilled,\n    css`\n      --lobe-select-open-bg: ${cssVar.colorFillSecondary};\n      --lobe-select-readonly-bg: color-mix(in srgb, ${cssVar.colorFillTertiary} 70%, transparent);\n      --lobe-select-disabled-bg: color-mix(in srgb, ${cssVar.colorFillTertiary} 55%, transparent);\n    `,\n  ),\n  group: css``,\n  groupLabel: css``,\n  icon: css`\n    display: inline-flex;\n    align-items: center;\n    transition: transform 150ms ${cssVar.motionEaseOut};\n\n    &[data-popup-open] {\n      transform: rotate(180deg);\n    }\n  `,\n  item: css``,\n  itemBoldSelected: css`\n    &[data-selected] {\n      font-weight: 600;\n    }\n  `,\n  itemIndicator: css`\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    margin-inline-start: auto;\n    padding-inline-start: 8px;\n\n    color: ${cssVar.colorPrimary};\n  `,\n  itemText: css``,\n  list: css`\n    overflow-y: auto;\n    flex: 1;\n\n    min-height: 0;\n    max-height: var(--lobe-select-available-height, var(--available-height));\n    padding-block: 0;\n  `,\n  outlined: cx(\n    lobeStaticStylish.variantOutlined,\n    css`\n      --lobe-select-open-bg: ${cssVar.colorFillTertiary};\n      --lobe-select-readonly-bg: color-mix(in srgb, ${cssVar.colorBgContainer} 75%, transparent);\n      --lobe-select-disabled-bg: color-mix(in srgb, ${cssVar.colorBgContainer} 60%, transparent);\n    `,\n  ),\n  popup: css`\n    --lobe-select-available-height: min(\n      var(--available-height),\n      var(--lobe-select-popup-max-height, var(--available-height))\n    );\n\n    transform-origin: var(--transform-origin);\n\n    display: flex;\n    flex-direction: column;\n\n    box-sizing: border-box;\n\n    transition:\n      opacity 150ms ${cssVar.motionEaseOut},\n      transform 150ms ${cssVar.motionEaseOut};\n\n    &[data-starting-style],\n    &[data-ending-style] {\n      transform: scaleY(0.92);\n      opacity: 0;\n    }\n  `,\n  positioner: css`\n    z-index: 1100;\n    outline: none;\n  `,\n  prefix: css`\n    display: inline-flex;\n    align-items: center;\n    color: ${cssVar.colorTextSecondary};\n  `,\n  scrollArrow: css`\n    cursor: default;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    height: 16px;\n\n    color: ${cssVar.colorTextSecondary};\n\n    background: ${cssVar.colorBgElevated};\n  `,\n  search: css`\n    cursor: text;\n\n    display: flex;\n    align-items: center;\n\n    min-height: 36px;\n    margin-inline: -4px;\n    padding-block: 8px;\n    padding-inline: 12px;\n    border-block-end: 1px solid ${cssVar.colorFillSecondary};\n  `,\n  searchInput: css`\n    flex: 1;\n\n    min-width: 0;\n    padding-block: 0;\n    padding-inline: 4px;\n    border: 0;\n\n    font-size: 14px;\n    line-height: 20px;\n    color: ${cssVar.colorText};\n\n    background: transparent;\n    outline: none;\n\n    &::placeholder {\n      color: ${cssVar.colorTextPlaceholder};\n    }\n  `,\n  shadow: lobeStaticStylish.shadow,\n  suffix: css`\n    display: inline-flex;\n    gap: 6px;\n    align-items: center;\n    color: ${cssVar.colorTextSecondary};\n  `,\n  tag: css`\n    display: inline-flex;\n    align-items: center;\n\n    max-width: 100%;\n    padding-block: 0;\n    padding-inline: 6px;\n    border-radius: ${cssVar.borderRadiusSM};\n\n    font-size: 12px;\n    line-height: 20px;\n    color: ${cssVar.colorText};\n\n    background: ${cssVar.colorFillTertiary};\n  `,\n  tags: css`\n    display: flex;\n    flex-wrap: wrap;\n    gap: 4px;\n    align-items: center;\n  `,\n  trigger: css`\n    cursor: pointer;\n    user-select: none;\n\n    display: inline-flex;\n    gap: 8px;\n    align-items: center;\n\n    box-sizing: border-box;\n    width: 100%;\n    border: 1px solid transparent;\n    border-radius: ${cssVar.borderRadius};\n\n    font-family: inherit;\n    color: ${cssVar.colorText};\n\n    background: transparent;\n    outline: none;\n\n    transition: all 150ms ${cssVar.motionEaseOut};\n\n    &:not([data-disabled], [data-readonly])[data-popup-open],\n    &:not([data-disabled], [data-readonly])[data-open],\n    &:not([data-disabled], [data-readonly])[data-state='open'],\n    &:not([data-disabled], [data-readonly])[aria-expanded='true'] {\n      background: var(--lobe-select-open-bg, ${cssVar.colorFillTertiary});\n    }\n\n    &:focus-visible {\n      outline: 2px solid ${cssVar.colorPrimaryBorder};\n      outline-offset: 1px;\n    }\n\n    &:hover [data-role='lobe-select-clear'] {\n      opacity: 1;\n    }\n\n    &[data-placeholder] [data-role='lobe-select-clear'] {\n      pointer-events: none;\n      opacity: 0;\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n      color: ${cssVar.colorTextDisabled};\n      background: var(--lobe-select-disabled-bg, transparent);\n\n      &:hover {\n        background: var(--lobe-select-disabled-bg, transparent);\n      }\n    }\n\n    &[data-readonly] {\n      cursor: default;\n      color: ${cssVar.colorTextSecondary};\n      background: var(--lobe-select-readonly-bg, transparent);\n\n      &:hover {\n        background: var(--lobe-select-readonly-bg, transparent);\n      }\n    }\n\n    &[data-disabled] [data-role='lobe-select-clear'] {\n      pointer-events: none;\n      opacity: 0;\n    }\n  `,\n  triggerLarge: css`\n    min-height: ${controlHeight.large}px;\n    padding-block: 6px;\n    padding-inline: 12px;\n\n    font-size: 16px;\n    line-height: 24px;\n  `,\n  triggerMiddle: css`\n    min-height: ${controlHeight.middle}px;\n    padding-block: 4px;\n    padding-inline: 11px;\n\n    font-size: 14px;\n    line-height: 20px;\n  `,\n  triggerSmall: css`\n    min-height: ${controlHeight.small}px;\n    padding-block: 0;\n    padding-inline: 8px;\n\n    font-size: 12px;\n    line-height: 18px;\n  `,\n  value: css`\n    display: flex;\n    flex: 1;\n    flex-wrap: wrap;\n    gap: 4px;\n    align-items: center;\n\n    min-width: 0;\n\n    color: inherit;\n\n    &[data-placeholder] {\n      color: ${cssVar.colorTextPlaceholder};\n    }\n  `,\n  valueText: css`\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  `,\n}));\n\nexport const triggerVariants = cva(styles.trigger, {\n  defaultVariants: {\n    shadow: false,\n    size: 'middle',\n    variant: 'outlined',\n  },\n  variants: {\n    shadow: {\n      false: null,\n      true: styles.shadow,\n    },\n    size: {\n      large: styles.triggerLarge,\n      middle: styles.triggerMiddle,\n      small: styles.triggerSmall,\n    },\n    variant: {\n      borderless: styles.borderless,\n      filled: styles.filled,\n      outlined: styles.outlined,\n    },\n  },\n});\n"],"mappings":";;;;;AAMA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,OAAO,GAAG;;;;;;;;;;CAUV,YAAY,GACVA,cAAkB,mBAClB,GAAG;+BACwB,OAAO,kBAAkB;sDACF,OAAO,kBAAkB;sDACzB,OAAO,kBAAkB;MAE5E;CACD,OAAO,GAAG;;;;aAIC,OAAO,kBAAkB;;;;gCAIN,OAAO,cAAc;;;eAGtC,OAAO,mBAAmB;;;CAGvC,OAAO,GAAG;CACV,QAAQ,GACNA,cAAkB,eAClB,GAAG;+BACwB,OAAO,mBAAmB;sDACH,OAAO,kBAAkB;sDACzB,OAAO,kBAAkB;MAE5E;CACD,OAAO,GAAG;CACV,YAAY,GAAG;CACf,MAAM,GAAG;;;kCAGuB,OAAO,cAAc;;;;;;CAMrD,MAAM,GAAG;CACT,kBAAkB,GAAG;;;;;CAKrB,eAAe,GAAG;;;;;;;;aAQP,OAAO,aAAa;;CAE/B,UAAU,GAAG;CACb,MAAM,GAAG;;;;;;;;CAQT,UAAU,GACRA,cAAkB,iBAClB,GAAG;+BACwB,OAAO,kBAAkB;sDACF,OAAO,iBAAiB;sDACxB,OAAO,iBAAiB;MAE3E;CACD,OAAO,GAAG;;;;;;;;;;;;;;sBAcU,OAAO,cAAc;wBACnB,OAAO,cAAc;;;;;;;;CAQ3C,YAAY,GAAG;;;;CAIf,QAAQ,GAAG;;;aAGA,OAAO,mBAAmB;;CAErC,aAAa,GAAG;;;;;;;;;aASL,OAAO,mBAAmB;;kBAErB,OAAO,gBAAgB;;CAEvC,QAAQ,GAAG;;;;;;;;;;kCAUqB,OAAO,mBAAmB;;CAE1D,aAAa,GAAG;;;;;;;;;;aAUL,OAAO,UAAU;;;;;;eAMf,OAAO,qBAAqB;;;CAGzC,QAAQA,cAAkB;CAC1B,QAAQ,GAAG;;;;aAIA,OAAO,mBAAmB;;CAErC,KAAK,GAAG;;;;;;;qBAOW,OAAO,eAAe;;;;aAI9B,OAAO,UAAU;;kBAEZ,OAAO,kBAAkB;;CAEzC,MAAM,GAAG;;;;;;CAMT,SAAS,GAAG;;;;;;;;;;;qBAWO,OAAO,aAAa;;;aAG5B,OAAO,UAAU;;;;;4BAKF,OAAO,cAAc;;;;;;+CAMF,OAAO,kBAAkB;;;;2BAI7C,OAAO,mBAAmB;;;;;;;;;;;;;;;eAetC,OAAO,kBAAkB;;;;;;;;;;eAUzB,OAAO,mBAAmB;;;;;;;;;;;;;CAavC,cAAc,GAAG;kBACD,cAAc,MAAM;;;;;;;CAOpC,eAAe,GAAG;kBACF,cAAc,OAAO;;;;;;;CAOrC,cAAc,GAAG;kBACD,cAAc,MAAM;;;;;;;CAOpC,OAAO,GAAG;;;;;;;;;;;;eAYG,OAAO,qBAAqB;;;CAGzC,WAAW,GAAG;;;;;CAKf,EAAE;AAEH,MAAa,kBAAkB,IAAI,OAAO,SAAS;CACjD,iBAAiB;EACf,QAAQ;EACR,MAAM;EACN,SAAS;EACV;CACD,UAAU;EACR,QAAQ;GACN,OAAO;GACP,MAAM,OAAO;GACd;EACD,MAAM;GACJ,OAAO,OAAO;GACd,QAAQ,OAAO;GACf,OAAO,OAAO;GACf;EACD,SAAS;GACP,YAAY,OAAO;GACnB,QAAQ,OAAO;GACf,UAAU,OAAO;GAClB;EACF;CACF,CAAC"}

package/es/base-ui/Slider/Slider.d.mts

@@ -0,0 +1,8 @@
+import { SliderProps } from "./type.mjs";
+import * as _$react from "react";
+
+//#region src/base-ui/Slider/Slider.d.ts
+declare const Slider: _$react.NamedExoticComponent<SliderProps>;
+//#endregion
+export { Slider };
+//# sourceMappingURL=Slider.d.mts.map

package/es/base-ui/Slider/Slider.mjs

@@ -0,0 +1,34 @@
+"use client";
+import { styles } from "./style.mjs";
+import { memo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
+import { Slider } from "@base-ui/react/slider";
+//#region src/base-ui/Slider/Slider.tsx
+const Slider$1 = memo(({ className, classNames, styles: customStyles, style, onChange, onChangeComplete, ...rest }) => /* @__PURE__ */ jsx(Slider.Root, {
+	className: cx(styles.root, className),
+	style,
+	onValueChange: (value) => onChange?.(value),
+	onValueCommitted: (value) => onChangeComplete?.(value),
+	...rest,
+	children: /* @__PURE__ */ jsx(Slider.Control, {
+		className: cx(styles.control, classNames?.control),
+		style: customStyles?.control,
+		children: /* @__PURE__ */ jsxs(Slider.Track, {
+			className: cx(styles.track, classNames?.track),
+			style: customStyles?.track,
+			children: [/* @__PURE__ */ jsx(Slider.Indicator, {
+				className: cx(styles.indicator, classNames?.indicator),
+				style: customStyles?.indicator
+			}), /* @__PURE__ */ jsx(Slider.Thumb, {
+				className: cx(styles.thumb, classNames?.thumb),
+				style: customStyles?.thumb
+			})]
+		})
+	})
+}));
+Slider$1.displayName = "Slider";
+//#endregion
+export { Slider$1 as default };
+
+//# sourceMappingURL=Slider.mjs.map

package/es/base-ui/Slider/Slider.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.mjs","names":["Slider","BaseSlider"],"sources":["../../../src/base-ui/Slider/Slider.tsx"],"sourcesContent":["'use client';\n\nimport { Slider as BaseSlider } from '@base-ui/react/slider';\nimport { cx } from 'antd-style';\nimport { memo } from 'react';\n\nimport { styles } from './style';\nimport type { SliderProps } from './type';\n\nconst Slider = memo<SliderProps>(\n  ({ className, classNames, styles: customStyles, style, onChange, onChangeComplete, ...rest }) => (\n    <BaseSlider.Root\n      className={cx(styles.root, className)}\n      style={style}\n      onValueChange={(value) => onChange?.(value as number)}\n      onValueCommitted={(value) => onChangeComplete?.(value as number)}\n      {...rest}\n    >\n      <BaseSlider.Control\n        className={cx(styles.control, classNames?.control)}\n        style={customStyles?.control}\n      >\n        <BaseSlider.Track\n          className={cx(styles.track, classNames?.track)}\n          style={customStyles?.track}\n        >\n          <BaseSlider.Indicator\n            className={cx(styles.indicator, classNames?.indicator)}\n            style={customStyles?.indicator}\n          />\n          <BaseSlider.Thumb\n            className={cx(styles.thumb, classNames?.thumb)}\n            style={customStyles?.thumb}\n          />\n        </BaseSlider.Track>\n      </BaseSlider.Control>\n    </BaseSlider.Root>\n  ),\n);\n\nSlider.displayName = 'Slider';\n\nexport default Slider;\n"],"mappings":";;;;;;;AASA,MAAMA,WAAS,MACZ,EAAE,WAAW,YAAY,QAAQ,cAAc,OAAO,UAAU,kBAAkB,GAAG,WACpF,oBAACC,OAAW,MAAZ;CACE,WAAW,GAAG,OAAO,MAAM,UAAU;CAC9B;CACP,gBAAgB,UAAU,WAAW,MAAgB;CACrD,mBAAmB,UAAU,mBAAmB,MAAgB;CAChE,GAAI;WAEJ,oBAACA,OAAW,SAAZ;EACE,WAAW,GAAG,OAAO,SAAS,YAAY,QAAQ;EAClD,OAAO,cAAc;YAErB,qBAACA,OAAW,OAAZ;GACE,WAAW,GAAG,OAAO,OAAO,YAAY,MAAM;GAC9C,OAAO,cAAc;aAFvB,CAIE,oBAACA,OAAW,WAAZ;IACE,WAAW,GAAG,OAAO,WAAW,YAAY,UAAU;IACtD,OAAO,cAAc;IACrB,CAAA,EACF,oBAACA,OAAW,OAAZ;IACE,WAAW,GAAG,OAAO,OAAO,YAAY,MAAM;IAC9C,OAAO,cAAc;IACrB,CAAA,CACe;;EACA,CAAA;CACL,CAAA,CAErB;AAED,SAAO,cAAc"}

package/es/base-ui/Slider/SliderWithInput.d.mts

@@ -0,0 +1,8 @@
+import { SliderWithInputProps } from "./type.mjs";
+import * as _$react from "react";
+
+//#region src/base-ui/Slider/SliderWithInput.d.ts
+declare const SliderWithInput: _$react.NamedExoticComponent<SliderWithInputProps>;
+//#endregion
+export { SliderWithInput };
+//# sourceMappingURL=SliderWithInput.d.mts.map

package/es/base-ui/Slider/SliderWithInput.mjs

@@ -0,0 +1,64 @@
+"use client";
+import FlexBasic_default from "../../Flex/FlexBasic.mjs";
+import InputNumber from "../Input/InputNumber.mjs";
+import Slider from "./Slider.mjs";
+import { memo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { isNull } from "es-toolkit/compat";
+//#region src/base-ui/Slider/SliderWithInput.tsx
+const SliderWithInput = memo(({ step, value, onChange, max, min, defaultValue, size, controls, gap = 16, style, className, classNames, styles: customStyles, disabled, unlimitedInput = false, changeOnWheel, shadow, variant, ...rest }) => {
+	const handleChange = (next) => {
+		if (isNull(next) || Number.isNaN(next)) return;
+		onChange?.(next);
+	};
+	const { slider: sliderClassName, input: inputClassName, ...sliderPartClassNames } = classNames || {};
+	const { slider: sliderStyle, input: inputStyle, ...sliderPartStyles } = customStyles || {};
+	return /* @__PURE__ */ jsxs(FlexBasic_default, {
+		horizontal: true,
+		align: "center",
+		className,
+		gap,
+		style,
+		children: [/* @__PURE__ */ jsx(Slider, {
+			className: sliderClassName,
+			classNames: sliderPartClassNames,
+			defaultValue,
+			disabled,
+			max,
+			min,
+			step,
+			style: {
+				flex: 1,
+				...sliderStyle
+			},
+			styles: sliderPartStyles,
+			value,
+			onChange: handleChange,
+			...rest
+		}), /* @__PURE__ */ jsx(InputNumber, {
+			changeOnWheel,
+			className: inputClassName,
+			controls: size !== "small" && controls !== false,
+			defaultValue,
+			disabled,
+			max: unlimitedInput ? void 0 : max,
+			min,
+			shadow,
+			size,
+			step: step === void 0 || Number.isNaN(step) ? void 0 : step,
+			value,
+			variant,
+			style: {
+				flex: "none",
+				width: size === "small" ? 48 : 88,
+				...inputStyle
+			},
+			onChange: handleChange
+		})]
+	});
+});
+SliderWithInput.displayName = "SliderWithInput";
+//#endregion
+export { SliderWithInput as default };
+
+//# sourceMappingURL=SliderWithInput.mjs.map

package/es/base-ui/Slider/SliderWithInput.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliderWithInput.mjs","names":["Flexbox"],"sources":["../../../src/base-ui/Slider/SliderWithInput.tsx"],"sourcesContent":["'use client';\n\nimport { isNull } from 'es-toolkit/compat';\nimport { memo } from 'react';\n\nimport { InputNumber } from '@/base-ui/Input';\nimport { Flexbox } from '@/Flex';\n\nimport Slider from './Slider';\nimport type { SliderWithInputProps } from './type';\n\nconst SliderWithInput = memo<SliderWithInputProps>(\n  ({\n    step,\n    value,\n    onChange,\n    max,\n    min,\n    defaultValue,\n    size,\n    controls,\n    gap = 16,\n    style,\n    className,\n    classNames,\n    styles: customStyles,\n    disabled,\n    unlimitedInput = false,\n    changeOnWheel,\n    shadow,\n    variant,\n    ...rest\n  }) => {\n    const handleChange = (next: number | null) => {\n      if (isNull(next) || Number.isNaN(next)) return;\n      onChange?.(next);\n    };\n\n    const {\n      slider: sliderClassName,\n      input: inputClassName,\n      ...sliderPartClassNames\n    } = classNames || {};\n    const { slider: sliderStyle, input: inputStyle, ...sliderPartStyles } = customStyles || {};\n\n    return (\n      <Flexbox horizontal align={'center'} className={className} gap={gap} style={style}>\n        <Slider\n          className={sliderClassName}\n          classNames={sliderPartClassNames}\n          defaultValue={defaultValue}\n          disabled={disabled}\n          max={max}\n          min={min}\n          step={step}\n          style={{ flex: 1, ...sliderStyle }}\n          styles={sliderPartStyles}\n          value={value}\n          onChange={handleChange}\n          {...rest}\n        />\n        <InputNumber\n          changeOnWheel={changeOnWheel}\n          className={inputClassName}\n          controls={size !== 'small' && controls !== false}\n          defaultValue={defaultValue}\n          disabled={disabled}\n          max={unlimitedInput ? undefined : max}\n          min={min}\n          shadow={shadow}\n          size={size}\n          step={step === undefined || Number.isNaN(step) ? undefined : step}\n          value={value}\n          variant={variant}\n          style={{\n            flex: 'none',\n            width: size === 'small' ? 48 : 88,\n            ...inputStyle,\n          }}\n          onChange={handleChange}\n        />\n      </Flexbox>\n    );\n  },\n);\n\nSliderWithInput.displayName = 'SliderWithInput';\n\nexport default SliderWithInput;\n"],"mappings":";;;;;;;;AAWA,MAAM,kBAAkB,MACrB,EACC,MACA,OACA,UACA,KACA,KACA,cACA,MACA,UACA,MAAM,IACN,OACA,WACA,YACA,QAAQ,cACR,UACA,iBAAiB,OACjB,eACA,QACA,SACA,GAAG,WACC;CACJ,MAAM,gBAAgB,SAAwB;AAC5C,MAAI,OAAO,KAAK,IAAI,OAAO,MAAM,KAAK,CAAE;AACxC,aAAW,KAAK;;CAGlB,MAAM,EACJ,QAAQ,iBACR,OAAO,gBACP,GAAG,yBACD,cAAc,EAAE;CACpB,MAAM,EAAE,QAAQ,aAAa,OAAO,YAAY,GAAG,qBAAqB,gBAAgB,EAAE;AAE1F,QACE,qBAACA,mBAAD;EAAS,YAAA;EAAW,OAAO;EAAqB;EAAgB;EAAY;YAA5E,CACE,oBAAC,QAAD;GACE,WAAW;GACX,YAAY;GACE;GACJ;GACL;GACA;GACC;GACN,OAAO;IAAE,MAAM;IAAG,GAAG;IAAa;GAClC,QAAQ;GACD;GACP,UAAU;GACV,GAAI;GACJ,CAAA,EACF,oBAAC,aAAD;GACiB;GACf,WAAW;GACX,UAAU,SAAS,WAAW,aAAa;GAC7B;GACJ;GACV,KAAK,iBAAiB,KAAA,IAAY;GAC7B;GACG;GACF;GACN,MAAM,SAAS,KAAA,KAAa,OAAO,MAAM,KAAK,GAAG,KAAA,IAAY;GACtD;GACE;GACT,OAAO;IACL,MAAM;IACN,OAAO,SAAS,UAAU,KAAK;IAC/B,GAAG;IACJ;GACD,UAAU;GACV,CAAA,CACM;;EAGf;AAED,gBAAgB,cAAc"}

package/es/base-ui/Slider/index.d.mts

@@ -0,0 +1,4 @@
+import { SliderProps, SliderWithInputProps } from "./type.mjs";
+import { Slider } from "./Slider.mjs";
+import { SliderWithInput } from "./SliderWithInput.mjs";
+import { styles } from "./style.mjs";

package/es/base-ui/Slider/style.d.mts

@@ -0,0 +1,11 @@
+//#region src/base-ui/Slider/style.d.ts
+declare const styles: {
+  control: string;
+  indicator: string;
+  root: string;
+  thumb: string;
+  track: string;
+};
+//#endregion
+export { styles };
+//# sourceMappingURL=style.d.mts.map

package/es/base-ui/Slider/style.mjs

@@ -0,0 +1,69 @@
+import { createStaticStyles } from "antd-style";
+//#region src/base-ui/Slider/style.ts
+const styles = createStaticStyles(({ css, cssVar }) => ({
+	control: css`
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 20px;
+  `,
+	indicator: css`
+    border-radius: inherit;
+    background: ${cssVar.colorPrimary};
+
+    [data-disabled] & {
+      background: ${cssVar.colorTextQuaternary};
+    }
+  `,
+	root: css`
+    display: flex;
+    align-items: center;
+    width: 100%;
+
+    &[data-disabled] {
+      cursor: not-allowed;
+    }
+  `,
+	thumb: css`
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+
+    background: ${cssVar.colorBgContainer};
+    box-shadow:
+      0 0 0 1px ${cssVar.colorBorder},
+      0 1px 2px rgb(0 0 0 / 12%),
+      0 2px 6px rgb(0 30 80 / 12%);
+
+    transition: box-shadow 150ms ${cssVar.motionEaseOut};
+
+    &:hover:not([data-disabled] *) {
+      box-shadow:
+        0 0 0 1px ${cssVar.colorPrimary},
+        0 1px 2px rgb(0 0 0 / 12%),
+        0 3px 8px rgb(0 30 80 / 18%);
+    }
+
+    &:focus-visible {
+      outline: 2px solid ${cssVar.colorPrimaryBorder};
+      outline-offset: 1px;
+    }
+
+    [data-dragging] & {
+      box-shadow:
+        0 0 0 1px ${cssVar.colorPrimary},
+        0 1px 2px rgb(0 0 0 / 12%),
+        0 3px 8px rgb(0 30 80 / 18%);
+    }
+  `,
+	track: css`
+    width: 100%;
+    height: 4px;
+    border-radius: 100px;
+    background: ${cssVar.colorFillSecondary};
+  `
+}));
+//#endregion
+export { styles };
+
+//# sourceMappingURL=style.mjs.map

package/es/base-ui/Slider/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Slider/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  control: css`\n    display: flex;\n    align-items: center;\n    width: 100%;\n    height: 20px;\n  `,\n  indicator: css`\n    border-radius: inherit;\n    background: ${cssVar.colorPrimary};\n\n    [data-disabled] & {\n      background: ${cssVar.colorTextQuaternary};\n    }\n  `,\n  root: css`\n    display: flex;\n    align-items: center;\n    width: 100%;\n\n    &[data-disabled] {\n      cursor: not-allowed;\n    }\n  `,\n  thumb: css`\n    width: 14px;\n    height: 14px;\n    border-radius: 50%;\n\n    background: ${cssVar.colorBgContainer};\n    box-shadow:\n      0 0 0 1px ${cssVar.colorBorder},\n      0 1px 2px rgb(0 0 0 / 12%),\n      0 2px 6px rgb(0 30 80 / 12%);\n\n    transition: box-shadow 150ms ${cssVar.motionEaseOut};\n\n    &:hover:not([data-disabled] *) {\n      box-shadow:\n        0 0 0 1px ${cssVar.colorPrimary},\n        0 1px 2px rgb(0 0 0 / 12%),\n        0 3px 8px rgb(0 30 80 / 18%);\n    }\n\n    &:focus-visible {\n      outline: 2px solid ${cssVar.colorPrimaryBorder};\n      outline-offset: 1px;\n    }\n\n    [data-dragging] & {\n      box-shadow:\n        0 0 0 1px ${cssVar.colorPrimary},\n        0 1px 2px rgb(0 0 0 / 12%),\n        0 3px 8px rgb(0 30 80 / 18%);\n    }\n  `,\n  track: css`\n    width: 100%;\n    height: 4px;\n    border-radius: 100px;\n    background: ${cssVar.colorFillSecondary};\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,SAAS,GAAG;;;;;;CAMZ,WAAW,GAAG;;kBAEE,OAAO,aAAa;;;oBAGlB,OAAO,oBAAoB;;;CAG7C,MAAM,GAAG;;;;;;;;;CAST,OAAO,GAAG;;;;;kBAKM,OAAO,iBAAiB;;kBAExB,OAAO,YAAY;;;;mCAIF,OAAO,cAAc;;;;oBAIpC,OAAO,aAAa;;;;;;2BAMb,OAAO,mBAAmB;;;;;;oBAMjC,OAAO,aAAa;;;;;CAKtC,OAAO,GAAG;;;;kBAIM,OAAO,mBAAmB;;CAE3C,EAAE"}