@techsio/ui-kit 0.45.0 → 0.47.0

package/dist/stories/molecules/command.stories.d.ts

@@ -0,0 +1,74 @@
+import type { StoryObj } from "@storybook/react";
+import { type Ref } from "react";
+import { Command, type CommandItem } from "../../src/molecules/command.js";
+declare const meta: {
+    title: string;
+    component: typeof Command;
+    tags: string[];
+    parameters: {
+        layout: string;
+        controls: {
+            disable: boolean;
+        };
+    };
+    decorators: ((Story: import("storybook/internal/csf").PartialStoryFn<import("storybook-react-rsbuild").ReactRenderer, {
+        disabled?: boolean | undefined | undefined;
+        onSelect?: ((details: import("@zag-js/combobox").SelectionDetails) => void) | undefined | undefined;
+        loopFocus?: boolean | undefined | undefined;
+        inputValue?: string | undefined | undefined;
+        defaultInputValue?: string | undefined | undefined;
+        onInputValueChange?: ((details: import("@zag-js/combobox").InputValueChangeDetails) => void) | undefined | undefined;
+        items: CommandItem[];
+        children: import("react").ReactNode;
+        id?: string | undefined;
+        className?: string | undefined;
+        ref?: Ref<HTMLDivElement> | undefined;
+        locale?: string | undefined;
+        onEscape?: (() => void) | undefined;
+    }>) => import("react/jsx-runtime").JSX.Element)[];
+    argTypes: {
+        disabled: {
+            control: "boolean";
+        };
+        loopFocus: {
+            control: "boolean";
+        };
+        locale: {
+            control: "text";
+        };
+        id: {
+            table: {
+                disable: true;
+            };
+        };
+        ref: {
+            table: {
+                disable: true;
+            };
+        };
+        children: {
+            table: {
+                disable: true;
+            };
+        };
+    };
+    args: {
+        items: CommandItem[];
+        disabled: false;
+        loopFocus: true;
+        onSelect: import("storybook/test").Mock<(...args: any[]) => any>;
+        children: null;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Playground: Story;
+export declare const States: Story;
+export declare const Grouped: Story;
+export declare const DisabledItems: Story;
+export declare const Localized: Story;
+export declare const ChangingItems: Story;
+export declare const InlineFocus: Story;
+export declare const ControlledQuery: Story;
+export declare const InDialog: Story;
+//# sourceMappingURL=command.stories.d.ts.map

package/dist/stories/molecules/command.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"command.stories.d.ts","sourceRoot":"","sources":["../../../stories/molecules/command.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AACtD,OAAO,EAAE,KAAK,GAAG,EAAoB,MAAM,OAAO,CAAA;AAIlD,OAAO,EACL,OAAO,EACP,KAAK,WAAW,EAEjB,MAAM,6BAA6B,CAAA;AAsHpC,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BsB,CAAA;AAEhC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,UAAU,EAAE,KAKxB,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAYpB,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAQrB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAS3B,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAevB,CAAA;AAiDD,eAAO,MAAM,aAAa,EAAE,KAG3B,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KASzB,CAAA;AAmBD,eAAO,MAAM,eAAe,EAAE,KAG7B,CAAA;AAmCD,eAAO,MAAM,QAAQ,EAAE,KAAyD,CAAA"}

package/dist/test/command-hotkeys.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=command-hotkeys.spec.d.ts.map

package/dist/test/command-hotkeys.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"command-hotkeys.spec.d.ts","sourceRoot":"","sources":["../../test/command-hotkeys.spec.ts"],"names":[],"mappings":""}

package/dist/test/command.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=command.spec.d.ts.map

package/dist/test/command.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"command.spec.d.ts","sourceRoot":"","sources":["../../test/command.spec.ts"],"names":[],"mappings":""}

package/dist/test/hotkeys.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=hotkeys.spec.d.ts.map

package/dist/test/hotkeys.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hotkeys.spec.d.ts","sourceRoot":"","sources":["../../test/hotkeys.spec.ts"],"names":[],"mappings":""}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@techsio/ui-kit",
-  "version": "0.45.0",
+  "version": "0.47.0",
   "license": "MIT",
   "type": "module",
   "repository": {
@@ -9,6 +9,10 @@
     "directory": "libs/ui"
   },
   "exports": {
+    "./hotkeys": {
+      "types": "./dist/src/hotkeys.d.ts",
+      "import": "./dist/hotkeys.js"
+    },
     "./types/zag": {
       "types": "./dist/src/types/zag.d.ts",
       "import": "./dist/types/zag.js"
@@ -111,6 +115,7 @@
     "@zag-js/dialog": "1.43.3",
     "@zag-js/drawer": "1.43.3",
     "@zag-js/file-upload": "1.43.3",
+    "@zag-js/hotkeys": "1.43.3",
     "@zag-js/i18n-utils": "1.43.3",
     "@zag-js/menu": "1.43.3",
     "@zag-js/number-input": "1.43.3",

package/src/tokens/components/atoms/_hotkeys.css

@@ -0,0 +1,36 @@
+@theme static {
+  /* BASE COLOR MAPPING */
+  --color-hotkeys-surface: var(--color-surface);
+  --color-hotkeys-text: var(--color-fg-secondary);
+  --color-hotkeys-outline: var(--color-border-primary);
+
+  /* DERIVED COLORS */
+  --color-hotkeys-key-bg: var(--color-hotkeys-surface);
+  --color-hotkeys-key-fg: var(--color-hotkeys-text);
+  --color-hotkeys-key-border: var(--color-hotkeys-outline);
+  --color-hotkeys-separator-fg: var(--color-hotkeys-text);
+
+  /* SPACING */
+  --gap-hotkeys: var(--spacing-50);
+  --padding-hotkeys-key-x: var(--spacing-100);
+  --padding-hotkeys-key-y: var(--spacing-50);
+
+  /* TYPOGRAPHY */
+  --text-hotkeys-sm: var(--text-xs);
+  --font-weight-hotkeys: var(--font-weight-medium);
+
+  /* BORDERS & RADIUS */
+  --border-width-hotkeys-key: var(--border-width-sm);
+  --radius-hotkeys-key: var(--radius-sm);
+}
+
+@utility hotkeys-key-border-width {
+  border-width: var(--border-width-hotkeys-key);
+}
+
+@utility hotkeys-target-focus {
+  outline-style: var(--default-ring-style);
+  outline-width: var(--default-ring-width);
+  outline-color: var(--color-primary);
+  outline-offset: var(--default-ring-offset);
+}

package/src/tokens/components/components.css

@@ -5,6 +5,7 @@
 @import "./atoms/_button.css";
 @import "./atoms/_status-text.css";
 @import "./atoms/_checkbox.css";
+@import "./atoms/_hotkeys.css";
 @import "./atoms/_icon.css";
 @import "./atoms/_image.css";
 @import "./atoms/_input.css";
@@ -23,6 +24,7 @@
 @import "./molecules/_chart.css";
 @import "./molecules/_color-select.css";
 @import "./molecules/_combobox.css";
+@import "./molecules/_command.css";
 @import "./molecules/_date-picker.css";
 @import "./molecules/_dialog.css";
 @import "./molecules/_drawer.css";

package/src/tokens/components/molecules/_command.css

@@ -0,0 +1,43 @@
+@theme static {
+  /* BASE COLOR MAPPING */
+  --color-command-surface: var(--color-popup-bg);
+  --color-command-foreground: var(--color-popup-item-fg);
+  --color-command-muted: var(--color-popup-item-fg-muted);
+  --color-command-highlight: var(--color-popup-item-bg-hover);
+
+  /* DERIVED COLORS */
+  --color-command-bg: var(--color-command-surface);
+  --color-command-fg: var(--color-command-foreground);
+  --color-command-border: var(--color-popup-border);
+  --color-command-group-label-fg: var(--color-command-muted);
+  --color-command-empty-fg: var(--color-command-muted);
+
+  /* STATE VARIATIONS */
+  --color-command-item-bg-highlighted: var(--color-command-highlight);
+
+  /* DISABLED STATES */
+  --color-command-item-fg-disabled: var(--color-popup-item-fg-disabled);
+
+  /* SPACING */
+  --spacing-command-gap: var(--spacing-100);
+  --spacing-command-item-gap: var(--spacing-popup-item-md);
+  --spacing-command-list-max: var(--container-xs);
+  --padding-command: var(--spacing-150);
+  --padding-command-list: var(--padding-popup-viewport);
+  --padding-command-item-x: var(--padding-popup-item-x-md);
+  --padding-command-item-y: var(--padding-popup-item-y-md);
+  --padding-command-empty: var(--spacing-300);
+
+  /* TYPOGRAPHY */
+  --text-command-md: var(--text-sm);
+  --font-weight-command-group-label: var(--font-weight-medium);
+
+  /* BORDERS & RADIUS */
+  --border-width-command: var(--border-width-popup);
+  --radius-command: var(--radius-popup);
+  --radius-command-item: var(--radius-popup-item);
+}
+
+@utility command-border-width {
+  border-width: var(--border-width-command);
+}

package/src/tokens/components/organisms/_data-table.css

@@ -1,3 +1,26 @@
+/*
+ * DataTable — component tokens.
+ *
+ * The colour, radius and spacing tokens all come from Figma via
+ * libs/ui/src/tokens/figma/variables.css (`--color-data-table-*`,
+ * `--padding-data-table-*`, `--spacing-data-table-*`).
+ *
+ * Kept here: the `-x`/`-y` padding composites. Figma exports padding split
+ * into halves, and Tailwind's `p-*` utilities resolve a single
+ * `--padding-<name>` value — there is no `px-<name>` lookup for a `-x` token.
+ * So the shorthands are rebuilt from the Figma halves (padding: y x), exactly
+ * as _table.css does for `--padding-table-cell-*`.
+ */
+
+@theme static {
+  --padding-data-table-toolbar: var(--padding-data-table-toolbar-y)
+    var(--padding-data-table-toolbar-x);
+  --padding-data-table-filter-cell: var(--padding-data-table-filter-cell-y)
+    var(--padding-data-table-filter-cell-x);
+  --padding-data-table-pagination: var(--padding-data-table-pagination-y)
+    var(--padding-data-table-pagination-x);
+}
+
 /*
  * DataTable — nested-row tint.
  *
@@ -5,10 +28,9 @@
  * than a background, so it composes with `striped`'s zebra background instead
  * of losing the Tailwind-merge conflict against it (two `bg-*` utilities on
  * one element can't both render; a shadow layers on top of whichever
- * background is already there). Reuses `--color-table-row-bg-hover`, an
- * existing Figma-exported Table token, rather than a raw semantic token or a
- * new one added ahead of the Figma sync this component's other colors are
- * still waiting on (see the "PROTOTYPE styling" note in data-table.tsx).
+ * background is already there). Reads `--color-data-table-row-bg-nested`,
+ * which aliases `--color-table-row-bg-hover` in Figma — the depth shading can
+ * now be retargeted without this file knowing which Table token backs it.
  */
 /*
  * Verified: box-shadow on a `<tr>` *does* paint under `border-collapse` in
@@ -21,7 +43,7 @@
  * would cause.
  */
 @utility data-table-row-nested-tint {
-  box-shadow: inset 0 0 0 9999px var(--color-table-row-bg-hover);
+  box-shadow: inset 0 0 0 9999px var(--color-data-table-row-bg-nested);
 }
 
 /*
@@ -37,13 +59,14 @@
  * inheriting it yields a see-through cell.
  *
  * Compositing solves both at once — the same trick `OPAQUE_HEADER_BG` uses for
- * the header. The opaque table surface is the background-*color*; the row tint
+ * the header. The opaque surface is `--color-data-table-pinned-cell-bg` as the
+ * background-*color*; the row tint
  * is painted over it as a gradient image, read from a custom property the row
  * sets. Custom properties inherit, so the row can drive its cells' tint
  * without either knowing about the other.
  */
 @utility data-table-frozen-cell {
-  background-color: var(--color-table-bg);
+  background-color: var(--color-data-table-pinned-cell-bg);
   background-image: linear-gradient(
     var(--dt-row-tint, transparent),
     var(--dt-row-tint, transparent)

package/src/tokens/components/organisms/_table.css

@@ -14,21 +14,4 @@
     var(--padding-table-cell-md-x);
   --padding-table-cell-lg: var(--padding-table-cell-lg-y)
     var(--padding-table-cell-lg-x);
-
-  /*
-   * Foreground for a selected row. Figma exports
-   * --color-table-row-bg-selected but has no `fg` counterpart, so
-   * `text-table-row-fg-selected` in table.tsx generated no utility at all and
-   * selected rows silently kept their normal text colour on the filled brand
-   * background. Reported by review; this restores the intended pairing.
-   *
-   * White clears AA against every selected background the row can have:
-   * base light #155dfc 5.24:1, base dark #0069a8 5.86:1, neo #e60101 4.81:1
-   * in both modes. Mode-invariant, because the selected fill stays a solid
-   * brand colour in light and dark alike.
-   *
-   * TEMPORARY BRIDGE: delete once Figma exports color/table/row/fg/selected —
-   * figma/variables.css is imported after this file and would win.
-   */
-  --color-table-row-fg-selected: var(--color-white);
 }