@maxsteinwender/sort-ui 1.1.0 → 1.1.2

package/README.md

@@ -1,3 +1,7 @@
+<p align="center">
+  <img src="public/visuals/Key Visual.png" alt="Hero Image" width="100%" />
+</p>
+
 # Sort UI Design System
 
 A coded design system based on the [Sort UI Kit](https://sortui.company) — Figma components translated into production-ready Next.js components, documented in Storybook.

package/dist/index.d.mts

@@ -212,8 +212,10 @@ interface BadgeProps extends React$1.HTMLAttributes<HTMLSpanElement> {
      * Use when Badge is nested inside a `<button>` (e.g. tags in a select trigger).
      */
     closeAsSpan?: boolean;
+    /** Animate with a pulsing opacity (1 → 0.5 → 1). For live/online/recording indicators. Respects prefers-reduced-motion. */
+    pulse?: boolean;
 }
-declare function Badge({ color, size, shape, variant, src, icon, border, onClose, closeAsSpan, className, children, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;
+declare function Badge({ color, size, shape, variant, src, icon, border, onClose, closeAsSpan, pulse, className, children, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;
 
 declare const Breadcrumb: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
     separator?: React$1.ReactNode;
@@ -1179,6 +1181,10 @@ declare const inlineTipsVariants: (props?: ({
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface InlineTipsProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof inlineTipsVariants> {
     title?: string;
+    /** Additional detail content revealed in a collapsible panel below the main message. */
+    details?: React$1.ReactNode;
+    /** Whether the collapsible details panel is open by default. Only used when `details` is provided. */
+    defaultOpen?: boolean;
 }
 declare const InlineTips: React$1.ForwardRefExoticComponent<InlineTipsProps & React$1.RefAttributes<HTMLDivElement>>;
 
@@ -1280,6 +1286,10 @@ interface InputFieldProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElem
     tailAddon?: string;
     /** Additional className applied to the inner <input> element */
     inputClassName?: string;
+    /** Show an × button when the field has a value. Only applies to the standard layout (no `tags`). */
+    clearable?: boolean;
+    /** Called after the field is cleared. */
+    onClear?: () => void;
 }
 /**
  * Sort UI InputField — labelled input with optional lead/tail/prefix/suffix slots.

package/dist/index.d.ts

@@ -212,8 +212,10 @@ interface BadgeProps extends React$1.HTMLAttributes<HTMLSpanElement> {
      * Use when Badge is nested inside a `<button>` (e.g. tags in a select trigger).
      */
     closeAsSpan?: boolean;
+    /** Animate with a pulsing opacity (1 → 0.5 → 1). For live/online/recording indicators. Respects prefers-reduced-motion. */
+    pulse?: boolean;
 }
-declare function Badge({ color, size, shape, variant, src, icon, border, onClose, closeAsSpan, className, children, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;
+declare function Badge({ color, size, shape, variant, src, icon, border, onClose, closeAsSpan, pulse, className, children, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;
 
 declare const Breadcrumb: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
     separator?: React$1.ReactNode;
@@ -1179,6 +1181,10 @@ declare const inlineTipsVariants: (props?: ({
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface InlineTipsProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof inlineTipsVariants> {
     title?: string;
+    /** Additional detail content revealed in a collapsible panel below the main message. */
+    details?: React$1.ReactNode;
+    /** Whether the collapsible details panel is open by default. Only used when `details` is provided. */
+    defaultOpen?: boolean;
 }
 declare const InlineTips: React$1.ForwardRefExoticComponent<InlineTipsProps & React$1.RefAttributes<HTMLDivElement>>;
 
@@ -1280,6 +1286,10 @@ interface InputFieldProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElem
     tailAddon?: string;
     /** Additional className applied to the inner <input> element */
     inputClassName?: string;
+    /** Show an × button when the field has a value. Only applies to the standard layout (no `tags`). */
+    clearable?: boolean;
+    /** Called after the field is cleared. */
+    onClear?: () => void;
 }
 /**
  * Sort UI InputField — labelled input with optional lead/tail/prefix/suffix slots.

package/dist/index.js

@@ -1362,6 +1362,7 @@ function Badge(_a) {
     border = false,
     onClose,
     closeAsSpan = false,
+    pulse = false,
     className,
     children
   } = _b, props = __objRest(_b, [
@@ -1374,6 +1375,7 @@ function Badge(_a) {
     "border",
     "onClose",
     "closeAsSpan",
+    "pulse",
     "className",
     "children"
   ]);
@@ -1393,6 +1395,7 @@ function Badge(_a) {
         text,
         isNeutral && "backdrop-blur-[4px]",
         border && "ring-1 ring-inset ring-sui-border-default",
+        pulse && "animate-pulse",
         className
       )
     }, props), {
@@ -4368,6 +4371,10 @@ var InputField = React78__namespace.forwardRef(
       leadAddon,
       tailAddon,
       inputClassName,
+      clearable,
+      onClear,
+      value,
+      onChange,
       disabled,
       id,
       spellCheck,
@@ -4394,6 +4401,10 @@ var InputField = React78__namespace.forwardRef(
       "leadAddon",
       "tailAddon",
       "inputClassName",
+      "clearable",
+      "onClear",
+      "value",
+      "onChange",
       "disabled",
       "id",
       "spellCheck",
@@ -4407,6 +4418,27 @@ var InputField = React78__namespace.forwardRef(
     const hasInlineTags = !!(tags && tags.length > 0 && !hasError && !disabled);
     const innerRef = React78__namespace.useRef(null);
     React78__namespace.useImperativeHandle(ref, () => innerRef.current, []);
+    const [internalHasValue, setInternalHasValue] = React78__namespace.useState(false);
+    const hasValue = clearable ? typeof value === "string" ? value.length > 0 : internalHasValue : false;
+    const handleChange = (e) => {
+      if (clearable && value === void 0) {
+        setInternalHasValue(e.target.value.length > 0);
+      }
+      onChange == null ? void 0 : onChange(e);
+    };
+    const handleClear = () => {
+      var _a2;
+      if (!innerRef.current || disabled) return;
+      const nativeInputValueSetter = (_a2 = Object.getOwnPropertyDescriptor(
+        window.HTMLInputElement.prototype,
+        "value"
+      )) == null ? void 0 : _a2.set;
+      nativeInputValueSetter == null ? void 0 : nativeInputValueSetter.call(innerRef.current, "");
+      innerRef.current.dispatchEvent(new Event("input", { bubbles: true }));
+      setInternalHasValue(false);
+      innerRef.current.focus();
+      onClear == null ? void 0 : onClear();
+    };
     const focusInputOnDecorationClick = (e) => {
       var _a2;
       if (disabled) return;
@@ -4487,6 +4519,8 @@ var InputField = React78__namespace.forwardRef(
                     __spreadValues({
                       ref: innerRef,
                       id: inputId,
+                      value,
+                      onChange: handleChange,
                       disabled,
                       required,
                       spellCheck: resolvedSpellCheck,
@@ -4529,6 +4563,8 @@ var InputField = React78__namespace.forwardRef(
                   __spreadValues({
                     ref: innerRef,
                     id: inputId,
+                    value,
+                    onChange: handleChange,
                     disabled,
                     required,
                     spellCheck: resolvedSpellCheck,
@@ -4549,6 +4585,22 @@ var InputField = React78__namespace.forwardRef(
                   "shrink-0 text-sm font-medium leading-5",
                   disabled ? "text-sui-text-hint" : "text-sui-text-muted"
                 ), children: suffix }),
+                clearable && hasValue && !disabled && /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    tabIndex: -1,
+                    onClick: handleClear,
+                    "aria-label": "Clear",
+                    className: cn(
+                      "flex size-5 shrink-0 items-center justify-center rounded-xs",
+                      "text-icon-default-muted transition-colors",
+                      "[@media(hover:hover)]:hover:text-icon-default",
+                      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sui-border-highlight"
+                    ),
+                    children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-close-circle-fill text-base", "aria-hidden": "true" })
+                  }
+                ),
                 tailIcon && /* @__PURE__ */ jsxRuntime.jsx(
                   "span",
                   {
@@ -4750,7 +4802,7 @@ function DatePicker({
         size: "md",
         disabled,
         className: cn(
-          "w-[240px] justify-start gap-2 text-left font-normal",
+          "w-sui-240 justify-start gap-2 text-left font-normal",
           !date && "text-sui-text-muted",
           className
         ),
@@ -4791,7 +4843,7 @@ function DateRangePicker({
         size: "md",
         disabled,
         className: cn(
-          "w-[300px] justify-start gap-2 text-left font-normal",
+          "w-sui-320 justify-start gap-2 text-left font-normal",
           !(dateRange == null ? void 0 : dateRange.from) && "text-sui-text-muted",
           className
         ),
@@ -4842,7 +4894,7 @@ function DatePickerWithPresets({
         size: "md",
         disabled,
         className: cn(
-          "w-[240px] justify-start gap-2 text-left font-normal",
+          "w-sui-240 justify-start gap-2 text-left font-normal",
           !date && "text-sui-text-muted",
           className
         ),
@@ -6700,12 +6752,16 @@ var InlineTips = React78__namespace.forwardRef(
       variant = "default",
       colorStyle = "neutral",
       title,
+      details,
+      defaultOpen = false,
       children
     } = _b, props = __objRest(_b, [
       "className",
       "variant",
       "colorStyle",
       "title",
+      "details",
+      "defaultOpen",
       "children"
     ]);
     const lineColor = lineColorMap[variant != null ? variant : "default"];
@@ -6727,7 +6783,32 @@ var InlineTips = React78__namespace.forwardRef(
               style: { minWidth: 4 }
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "flex-1 min-w-0", children: [
+          details ? /* @__PURE__ */ jsxRuntime.jsxs(Collapsible, { defaultOpen, className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "flex-1 min-w-0", children: [
+                title && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-bold", children: [
+                  title,
+                  " "
+                ] }),
+                children
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                CollapsibleTrigger2,
+                {
+                  className: cn(
+                    "shrink-0 flex size-5 items-center justify-center rounded-xs",
+                    "text-icon-default-muted transition-transform duration-150",
+                    "[@media(hover:hover)]:hover:text-icon-default",
+                    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sui-border-highlight",
+                    "[&[data-state=open]>i]:rotate-180"
+                  ),
+                  "aria-label": defaultOpen ? "Collapse details" : "Expand details",
+                  children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-arrow-down-s-line text-base transition-transform duration-150" })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(CollapsibleContent2, { className: "overflow-hidden data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 text-sui-text-subtle", children: details }) })
+          ] }) : /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "flex-1 min-w-0", children: [
             title && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-bold", children: [
               title,
               " "
@@ -12774,7 +12855,7 @@ var TextAreaField = React78__namespace.forwardRef(
             compact ? cn(
               // Compact: single-row horizontal layout
               "flex-row items-center gap-2.5",
-              inputStyle === "soft" && !hasError && !disabled ? "p-[13px]" : "p-3"
+              inputStyle === "soft" && !hasError && !disabled ? "p-sui-12" : "p-3"
             ) : bottomToolbar ? cn(
               // Toolbar mode: no padding on container, textarea gets its own
               "flex-col gap-0 p-0"
@@ -13457,7 +13538,7 @@ var Userbar = React78__namespace.forwardRef(
             align: dropdownAlign,
             sideOffset: dropdownSideOffset != null ? dropdownSideOffset : defaultSideOffset,
             alignOffset: dropdownAlignOffset != null ? dropdownAlignOffset : defaultAlignOffset,
-            className: "w-[240px]",
+            className: "w-sui-240",
             children: dropdownContent
           }
         )

package/dist/index.mjs

@@ -1319,6 +1319,7 @@ function Badge(_a) {
     border = false,
     onClose,
     closeAsSpan = false,
+    pulse = false,
     className,
     children
   } = _b, props = __objRest(_b, [
@@ -1331,6 +1332,7 @@ function Badge(_a) {
     "border",
     "onClose",
     "closeAsSpan",
+    "pulse",
     "className",
     "children"
   ]);
@@ -1350,6 +1352,7 @@ function Badge(_a) {
         text,
         isNeutral && "backdrop-blur-[4px]",
         border && "ring-1 ring-inset ring-sui-border-default",
+        pulse && "animate-pulse",
         className
       )
     }, props), {
@@ -4325,6 +4328,10 @@ var InputField = React78.forwardRef(
       leadAddon,
       tailAddon,
       inputClassName,
+      clearable,
+      onClear,
+      value,
+      onChange,
       disabled,
       id,
       spellCheck,
@@ -4351,6 +4358,10 @@ var InputField = React78.forwardRef(
       "leadAddon",
       "tailAddon",
       "inputClassName",
+      "clearable",
+      "onClear",
+      "value",
+      "onChange",
       "disabled",
       "id",
       "spellCheck",
@@ -4364,6 +4375,27 @@ var InputField = React78.forwardRef(
     const hasInlineTags = !!(tags && tags.length > 0 && !hasError && !disabled);
     const innerRef = React78.useRef(null);
     React78.useImperativeHandle(ref, () => innerRef.current, []);
+    const [internalHasValue, setInternalHasValue] = React78.useState(false);
+    const hasValue = clearable ? typeof value === "string" ? value.length > 0 : internalHasValue : false;
+    const handleChange = (e) => {
+      if (clearable && value === void 0) {
+        setInternalHasValue(e.target.value.length > 0);
+      }
+      onChange == null ? void 0 : onChange(e);
+    };
+    const handleClear = () => {
+      var _a2;
+      if (!innerRef.current || disabled) return;
+      const nativeInputValueSetter = (_a2 = Object.getOwnPropertyDescriptor(
+        window.HTMLInputElement.prototype,
+        "value"
+      )) == null ? void 0 : _a2.set;
+      nativeInputValueSetter == null ? void 0 : nativeInputValueSetter.call(innerRef.current, "");
+      innerRef.current.dispatchEvent(new Event("input", { bubbles: true }));
+      setInternalHasValue(false);
+      innerRef.current.focus();
+      onClear == null ? void 0 : onClear();
+    };
     const focusInputOnDecorationClick = (e) => {
       var _a2;
       if (disabled) return;
@@ -4444,6 +4476,8 @@ var InputField = React78.forwardRef(
                     __spreadValues({
                       ref: innerRef,
                       id: inputId,
+                      value,
+                      onChange: handleChange,
                       disabled,
                       required,
                       spellCheck: resolvedSpellCheck,
@@ -4486,6 +4520,8 @@ var InputField = React78.forwardRef(
                   __spreadValues({
                     ref: innerRef,
                     id: inputId,
+                    value,
+                    onChange: handleChange,
                     disabled,
                     required,
                     spellCheck: resolvedSpellCheck,
@@ -4506,6 +4542,22 @@ var InputField = React78.forwardRef(
                   "shrink-0 text-sm font-medium leading-5",
                   disabled ? "text-sui-text-hint" : "text-sui-text-muted"
                 ), children: suffix }),
+                clearable && hasValue && !disabled && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    tabIndex: -1,
+                    onClick: handleClear,
+                    "aria-label": "Clear",
+                    className: cn(
+                      "flex size-5 shrink-0 items-center justify-center rounded-xs",
+                      "text-icon-default-muted transition-colors",
+                      "[@media(hover:hover)]:hover:text-icon-default",
+                      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sui-border-highlight"
+                    ),
+                    children: /* @__PURE__ */ jsx("i", { className: "ri-close-circle-fill text-base", "aria-hidden": "true" })
+                  }
+                ),
                 tailIcon && /* @__PURE__ */ jsx(
                   "span",
                   {
@@ -4707,7 +4759,7 @@ function DatePicker({
         size: "md",
         disabled,
         className: cn(
-          "w-[240px] justify-start gap-2 text-left font-normal",
+          "w-sui-240 justify-start gap-2 text-left font-normal",
           !date && "text-sui-text-muted",
           className
         ),
@@ -4748,7 +4800,7 @@ function DateRangePicker({
         size: "md",
         disabled,
         className: cn(
-          "w-[300px] justify-start gap-2 text-left font-normal",
+          "w-sui-320 justify-start gap-2 text-left font-normal",
           !(dateRange == null ? void 0 : dateRange.from) && "text-sui-text-muted",
           className
         ),
@@ -4799,7 +4851,7 @@ function DatePickerWithPresets({
         size: "md",
         disabled,
         className: cn(
-          "w-[240px] justify-start gap-2 text-left font-normal",
+          "w-sui-240 justify-start gap-2 text-left font-normal",
           !date && "text-sui-text-muted",
           className
         ),
@@ -6657,12 +6709,16 @@ var InlineTips = React78.forwardRef(
       variant = "default",
       colorStyle = "neutral",
       title,
+      details,
+      defaultOpen = false,
       children
     } = _b, props = __objRest(_b, [
       "className",
       "variant",
       "colorStyle",
       "title",
+      "details",
+      "defaultOpen",
       "children"
     ]);
     const lineColor = lineColorMap[variant != null ? variant : "default"];
@@ -6684,7 +6740,32 @@ var InlineTips = React78.forwardRef(
               style: { minWidth: 4 }
             }
           ),
-          /* @__PURE__ */ jsxs("p", { className: "flex-1 min-w-0", children: [
+          details ? /* @__PURE__ */ jsxs(Collapsible, { defaultOpen, className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxs("p", { className: "flex-1 min-w-0", children: [
+                title && /* @__PURE__ */ jsxs("span", { className: "font-bold", children: [
+                  title,
+                  " "
+                ] }),
+                children
+              ] }),
+              /* @__PURE__ */ jsx(
+                CollapsibleTrigger2,
+                {
+                  className: cn(
+                    "shrink-0 flex size-5 items-center justify-center rounded-xs",
+                    "text-icon-default-muted transition-transform duration-150",
+                    "[@media(hover:hover)]:hover:text-icon-default",
+                    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sui-border-highlight",
+                    "[&[data-state=open]>i]:rotate-180"
+                  ),
+                  "aria-label": defaultOpen ? "Collapse details" : "Expand details",
+                  children: /* @__PURE__ */ jsx("i", { className: "ri-arrow-down-s-line text-base transition-transform duration-150" })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx(CollapsibleContent2, { className: "overflow-hidden data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", children: /* @__PURE__ */ jsx("div", { className: "mt-2 text-sui-text-subtle", children: details }) })
+          ] }) : /* @__PURE__ */ jsxs("p", { className: "flex-1 min-w-0", children: [
             title && /* @__PURE__ */ jsxs("span", { className: "font-bold", children: [
               title,
               " "
@@ -12731,7 +12812,7 @@ var TextAreaField = React78.forwardRef(
             compact ? cn(
               // Compact: single-row horizontal layout
               "flex-row items-center gap-2.5",
-              inputStyle === "soft" && !hasError && !disabled ? "p-[13px]" : "p-3"
+              inputStyle === "soft" && !hasError && !disabled ? "p-sui-12" : "p-3"
             ) : bottomToolbar ? cn(
               // Toolbar mode: no padding on container, textarea gets its own
               "flex-col gap-0 p-0"
@@ -13414,7 +13495,7 @@ var Userbar = React78.forwardRef(
             align: dropdownAlign,
             sideOffset: dropdownSideOffset != null ? dropdownSideOffset : defaultSideOffset,
             alignOffset: dropdownAlignOffset != null ? dropdownAlignOffset : defaultAlignOffset,
-            className: "w-[240px]",
+            className: "w-sui-240",
             children: dropdownContent
           }
         )

package/dist/styles.css

@@ -16364,6 +16364,14 @@ button,
   width: 1px;
 }
 
+.w-sui-240 {
+  width: var(--spacing-240);
+}
+
+.w-sui-320 {
+  width: var(--spacing-320);
+}
+
 .min-w-0 {
   min-width: 0px;
 }
@@ -21407,6 +21415,11 @@ button,
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.\[\&\[data-state\=open\]\>i\]\:rotate-180[data-state=open]>i {
+  --tw-rotate: 180deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .\[\&_\.recharts-cartesian-axis-tick_text\]\:fill-\[var\(--text-muted\)\] .recharts-cartesian-axis-tick text {
   fill: var(--text-muted);
 }
@@ -21841,6 +21854,10 @@ button,
     background-color: var(--border-highlight);
   }
 
+  .\[\@media\(hover\:hover\)\]\:hover\:text-icon-default:hover {
+    color: var(--icon-default);
+  }
+
   .\[\@media\(hover\:hover\)\]\:hover\:text-icon-default-subtle:hover {
     color: var(--icon-default-subtle);
   }