gridsmith-ui 0.2.17 → 0.2.19

package/dist/index.d.ts

@@ -55,7 +55,7 @@ interface BulkActionBarProps {
 declare function BulkActionBar({ selectedCount, actions, onClearSelection, className }: BulkActionBarProps): react_jsx_runtime.JSX.Element | null;
 
 type InputSize = "sm" | "md";
-declare function Input({ className, size, error, prefix, suffix, ...props }: Omit<InputHTMLAttributes<HTMLInputElement>, "size"> & {
+declare function Input({ className, size, error, prefix, suffix, ...props }: Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "prefix"> & {
     size?: InputSize;
     error?: boolean;
     prefix?: ReactNode;
@@ -172,8 +172,10 @@ interface DatePickerProps {
     container?: Element | DocumentFragment;
     error?: boolean;
     label?: string;
+    /** Forwarded to the trigger button so an external Label htmlFor can be associated. Defaults to a generated id used by the built-in label. */
+    id?: string;
 }
-declare function DatePicker({ value, onChange, placeholder, disabled, className, ref, container, error, label }: DatePickerProps): react_jsx_runtime.JSX.Element;
+declare function DatePicker({ value, onChange, placeholder, disabled, className, ref, container, error, label, id }: DatePickerProps): react_jsx_runtime.JSX.Element;
 
 interface FileUploadProps {
     onFiles: (files: File[]) => void;
@@ -210,8 +212,10 @@ interface TimePickerProps {
     ref?: Ref<HTMLDivElement>;
     container?: Element | DocumentFragment;
     error?: boolean;
+    /** Forwarded to the trigger button so a Label htmlFor can be associated. */
+    id?: string;
 }
-declare function TimePicker({ value, onChange, use24Hour, minuteStep, disabled, className, ref, container, error, }: TimePickerProps): react_jsx_runtime.JSX.Element;
+declare function TimePicker({ value, onChange, use24Hour, minuteStep, disabled, className, ref, container, error, id, }: TimePickerProps): react_jsx_runtime.JSX.Element;
 
 interface NumberInputProps {
     value: number;
@@ -226,8 +230,10 @@ interface NumberInputProps {
     size?: "sm" | "md" | "lg";
     className?: string;
     error?: boolean;
+    /** Forwarded to the inner input element so a Label htmlFor can be associated. */
+    id?: string;
 }
-declare function NumberInput({ value, onChange, min, max, step, disabled, placeholder, prefix, suffix, size, className, error, }: NumberInputProps): react_jsx_runtime.JSX.Element;
+declare function NumberInput({ value, onChange, min, max, step, disabled, placeholder, prefix, suffix, size, className, error, id, }: NumberInputProps): react_jsx_runtime.JSX.Element;
 
 interface TagInputProps {
     value: string[];
@@ -237,8 +243,10 @@ interface TagInputProps {
     disabled?: boolean;
     className?: string;
     error?: boolean;
+    /** Forwarded to the inner input element so a Label htmlFor can be associated. */
+    id?: string;
 }
-declare function TagInput({ value, onChange, placeholder, maxTags, disabled, className, error, }: TagInputProps): react_jsx_runtime.JSX.Element;
+declare function TagInput({ value, onChange, placeholder, maxTags, disabled, className, error, id, }: TagInputProps): react_jsx_runtime.JSX.Element;
 
 interface PinInputProps {
     value: string;
@@ -249,8 +257,10 @@ interface PinInputProps {
     size?: "sm" | "md" | "lg";
     className?: string;
     error?: boolean;
+    /** Forwarded to the first pin box so a Label htmlFor can be associated. */
+    id?: string;
 }
-declare function PinInput({ value, onChange, length, mask, disabled, size, className, error, }: PinInputProps): react_jsx_runtime.JSX.Element;
+declare function PinInput({ value, onChange, length, mask, disabled, size, className, error, id, }: PinInputProps): react_jsx_runtime.JSX.Element;
 
 interface RatingProps {
     value: number;

package/dist/index.js

@@ -1,8 +1,8 @@
-import { cn, GLASS_BACKDROP, lockBodyScroll, unlockBodyScroll, GLASS_OVERLAY, GLASS_DROPDOWN, GLASS_SURFACE } from './chunk-5XIPPVH7.js';
+import { cn, GLASS_BACKDROP, GLASS_DROPDOWN, lockBodyScroll, unlockBodyScroll, GLASS_OVERLAY, GLASS_SURFACE } from './chunk-5XIPPVH7.js';
 import { Icon } from './chunk-H2XI6OUB.js';
 import { __commonJS, __toESM } from './chunk-5WRI5ZAA.js';
 import * as React6 from 'react';
-import React6__default, { createContext, forwardRef, useState, useCallback, useRef, useContext, useId, useMemo, useEffect, createElement, Fragment as Fragment$1, useLayoutEffect, isValidElement, cloneElement, useDebugValue, memo, useReducer, useSyncExternalStore as useSyncExternalStore$1, useImperativeHandle } from 'react';
+import React6__default, { createContext, forwardRef, useState, useCallback, useRef, useContext, useId, useMemo, useEffect, useLayoutEffect, isValidElement, cloneElement, createElement, Fragment as Fragment$1, useDebugValue, memo, useReducer, useSyncExternalStore as useSyncExternalStore$1, useImperativeHandle } from 'react';
 import ReactDOM, { createPortal, unstable_batchedUpdates, flushSync } from 'react-dom';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useSyncExternalStore } from 'use-sync-external-store/shim/index.js';
@@ -2723,12 +2723,13 @@ function isSameDay(a, b) {
 function formatDate(d2) {
   return `${MONTHS[d2.getMonth()].slice(0, 3)} ${d2.getDate()}, ${d2.getFullYear()}`;
 }
-function DatePicker({ value, onChange, placeholder = "Pick a date", disabled, className, ref, container, error = false, label }) {
+function DatePicker({ value, onChange, placeholder = "Pick a date", disabled, className, ref, container, error = false, label, id }) {
   const [open, setOpen] = useState(false);
   const [viewDate, setViewDate] = useState(() => value ?? /* @__PURE__ */ new Date());
   const triggerRef = useRef(null);
   const panelRef = useRef(null);
-  const inputId = useId();
+  const generatedId = useId();
+  const inputId = id ?? generatedId;
   const pos = usePosition(triggerRef, panelRef, open, { side: "bottom", align: "start", offset: 4, flip: true });
   const year = viewDate.getFullYear();
   const month = viewDate.getMonth();
@@ -3205,7 +3206,8 @@ function TimePicker({
   className,
   ref,
   container,
-  error = false
+  error = false,
+  id
 }) {
   const [open, setOpen] = useState(false);
   const triggerRef = useRef(null);
@@ -3244,12 +3246,13 @@ function TimePicker({
     /* @__PURE__ */ jsxs(
       "button",
       {
+        id,
         ref: triggerRef,
         onClick: () => !disabled && setOpen(!open),
         disabled,
         "aria-invalid": error || void 0,
         className: cn(
-          "inline-flex items-center gap-ds-2 text-sm",
+          "flex w-full items-center gap-ds-2 text-sm",
           "border-[length:var(--ds-border-width)]",
           error ? "border-[var(--ds-status-error)]" : "border-[var(--ds-input-border)]",
           "bg-[var(--ds-input-bg)] rounded-[var(--ds-radius-md)]",
@@ -3349,7 +3352,8 @@ function NumberInput({
   suffix,
   size = "md",
   className,
-  error = false
+  error = false,
+  id
 }) {
   const intervalRef = useRef(void 0);
   const timeoutRef = useRef(void 0);
@@ -3401,7 +3405,7 @@ function NumberInput({
     "div",
     {
       className: cn(
-        "inline-flex items-center",
+        "flex items-center w-full",
         "border-[length:var(--ds-border-width)]",
         error ? "border-[var(--ds-status-error)]" : "border-[var(--ds-input-border)]",
         "rounded-[var(--ds-radius-md)]",
@@ -3442,6 +3446,7 @@ function NumberInput({
           /* @__PURE__ */ jsx(
             "input",
             {
+              id,
               type: "text",
               inputMode: "decimal",
               "aria-invalid": error || void 0,
@@ -3567,7 +3572,8 @@ function TagInput({
   maxTags = Infinity,
   disabled = false,
   className,
-  error = false
+  error = false,
+  id
 }) {
   const [input, setInput] = useState("");
   const inputRef = useRef(null);
@@ -3645,6 +3651,7 @@ function TagInput({
         /* @__PURE__ */ jsx(
           "input",
           {
+            id,
             ref: inputRef,
             type: "text",
             "aria-invalid": error || void 0,
@@ -3682,7 +3689,8 @@ function PinInput({
   disabled = false,
   size = "md",
   className,
-  error = false
+  error = false,
+  id
 }) {
   const inputsRef = useRef([]);
   const digits = value.padEnd(length, " ").slice(0, length).split("");
@@ -3743,6 +3751,7 @@ function PinInput({
       children: digits.map((digit, i) => /* @__PURE__ */ jsx(
         "input",
         {
+          id: i === 0 ? id : void 0,
           ref: (el) => {
             inputsRef.current[i] = el;
           },
@@ -94140,26 +94149,29 @@ var Sidebar = forwardRef(function Sidebar2({
           }
         ),
         /* @__PURE__ */ jsx(ScrollArea, { className: "flex-1", children }),
-        showCollapse && /* @__PURE__ */ jsxs(
-          "button",
-          {
-            onClick: () => handleCollapsedChange(!collapsed),
-            "aria-expanded": !collapsed,
-            "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar",
-            className: cn(
-              "flex items-center gap-ds-2 py-ds-2 mx-ds-2 text-sm rounded-[var(--ds-radius-md)]",
-              "transition-colors cursor-pointer",
-              "text-[var(--ds-sidebar-text-muted)] hover:bg-[var(--ds-sidebar-item-hover)] hover:text-[var(--ds-sidebar-text)]",
-              "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
-              collapsed ? "justify-center px-0" : "px-ds-3"
-            ),
-            style: { marginBottom: footer ? 0 : "var(--ds-space-3)" },
-            children: [
-              /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 16, className: cn("transition-transform", !collapsed && "rotate-180") }),
-              !collapsed && /* @__PURE__ */ jsx("span", { children: "Collapse" })
-            ]
-          }
-        ),
+        showCollapse && (() => {
+          const collapseButton = /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: () => handleCollapsedChange(!collapsed),
+              "aria-expanded": !collapsed,
+              "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar",
+              className: cn(
+                "flex items-center gap-ds-2 py-ds-2 mx-ds-2 text-sm rounded-[var(--ds-radius-md)]",
+                "transition-colors cursor-pointer",
+                "text-[var(--ds-sidebar-text-muted)] hover:bg-[var(--ds-sidebar-item-hover)] hover:text-[var(--ds-sidebar-text)]",
+                "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
+                collapsed ? "justify-center px-0" : "px-ds-3"
+              ),
+              style: { marginBottom: footer ? 0 : "var(--ds-space-3)" },
+              children: [
+                /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 16, className: cn("transition-transform", !collapsed && "rotate-180") }),
+                !collapsed && /* @__PURE__ */ jsx("span", { children: "Collapse" })
+              ]
+            }
+          );
+          return collapsed ? /* @__PURE__ */ jsx(Tooltip, { content: "Expand sidebar", side: "right", delay: 100, container: portalEl ?? void 0, children: collapseButton }) : collapseButton;
+        })(),
         footer && /* @__PURE__ */ jsx(
           "div",
           {