@spear-ai/spectral 1.6.16 → 1.7.0

package/dist/Kbd.d.ts

@@ -1,12 +1,15 @@
 import { ComponentProps } from 'react';
-export type KbdProps = {
+export type KbdSymbol = 'arrowLeft' | 'arrowRight' | 'arrowUp' | 'arrowDown' | 'command' | 'option' | 'shift' | 'control' | 'return' | 'delete';
+export interface KbdProps {
     className?: string;
-};
-export type KbdGroupProps = {
+    symbol?: KbdSymbol;
+    symbolPosition?: 'start' | 'end';
+}
+export interface KbdGroupProps {
     className?: string;
-};
+}
 export declare const Kbd: {
-    ({ className, ...props }: KbdProps & ComponentProps<"kbd">): import("react/jsx-runtime").JSX.Element;
+    ({ className, symbol, symbolPosition, children, ...props }: KbdProps & ComponentProps<"kbd">): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export declare const KbdGroup: {

package/dist/Kbd.js

@@ -1,23 +1,88 @@
 import "./styles/main.css";
-import { jsx as s } from "react/jsx-runtime";
-import { cn as n } from "./utils/twUtils.js";
-const o = ({ className: t, ...e }) => /* @__PURE__ */ s(
-  "kbd",
-  {
-    "data-slot": "kbd",
-    "data-testid": "spectral-kbd",
-    className: n(
-      "bg-kbd-bg text-kbd-text pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-mono text-xs font-medium select-none",
-      "[[data-slot=tooltip-content]_&]:bg-level-three [&_svg:not([class*='size-'])]:size-3",
-      t
-    ),
-    ...e
-  }
-);
-o.displayName = "Kbd";
-const d = ({ className: t, ...e }) => /* @__PURE__ */ s("kbd", { "data-slot": "kbd-group", "data-testid": "spectral-kbd-group", className: n("inline-flex items-center gap-1", t), ...e });
-d.displayName = "KbdGroup";
+import { jsxs as w, jsx as t } from "react/jsx-runtime";
+import { cn as d } from "./utils/twUtils.js";
+const c = {
+  arrowLeft: /* @__PURE__ */ t("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ t("path", { d: "M10 5.75L3.75 12L10 18.25M4.5 12H20.25", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+  arrowRight: /* @__PURE__ */ t("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ t("path", { d: "M14 5.75L20.25 12L14 18.25M19.5 12H3.75", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+  arrowUp: /* @__PURE__ */ t("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ t("path", { d: "M5.75 10L12 3.75L18.25 10M12 20.25V4.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+  arrowDown: /* @__PURE__ */ t("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ t("path", { d: "M18 14L12 20L6 14M12 19V4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+  command: /* @__PURE__ */ t("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ t(
+    "path",
+    {
+      d: "M9.25 9.25V6.5C9.25 4.98122 8.01878 3.75 6.5 3.75C4.98122 3.75 3.75 4.98122 3.75 6.5C3.75 8.01878 4.98122 9.25 6.5 9.25H9.25ZM9.25 9.25H14.75M9.25 9.25V14.75M14.75 9.25V6.5C14.75 4.98122 15.9812 3.75 17.5 3.75C19.0188 3.75 20.25 4.98122 20.25 6.5C20.25 8.01878 19.0188 9.25 17.5 9.25H14.75ZM14.75 9.25V14.75M14.75 14.75H9.25M14.75 14.75V17.5C14.75 19.0188 15.9812 20.25 17.5 20.25C19.0188 20.25 20.25 19.0188 20.25 17.5C20.25 15.9812 19.0188 14.75 17.5 14.75H14.75ZM9.25 14.75V17.5C9.25 19.0188 8.01878 20.25 6.5 20.25C4.98122 20.25 3.75 19.0188 3.75 17.5C3.75 15.9812 4.98122 14.75 6.5 14.75H9.25Z",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "square"
+    }
+  ) }),
+  option: /* @__PURE__ */ t("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ t("path", { d: "M3.75 4.75H7.40962C7.77384 4.75 8.10925 4.94802 8.2852 5.26692L15.7148 18.7331C15.8907 19.052 16.2262 19.25 16.5904 19.25H20.25M15.75 4.75H20.25", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+  shift: /* @__PURE__ */ t("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ t(
+    "path",
+    {
+      d: "M2.91032 11.5511L11.2848 2.98182C11.6771 2.5804 12.3229 2.5804 12.7152 2.98182L21.0897 11.5511C21.7085 12.1843 21.2599 13.25 20.3745 13.25H17.1316V19.25C17.1316 19.8023 16.6839 20.25 16.1316 20.25H7.86842C7.31614 20.25 6.86842 19.8023 6.86842 19.25V13.25H3.62551C2.74013 13.25 2.2915 12.1843 2.91032 11.5511Z",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "square",
+      strokeLinejoin: "round"
+    }
+  ) }),
+  control: /* @__PURE__ */ t("svg", { className: "-translate-y-0.5", width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ t("path", { d: "M8 13.9999L11.6464 10.3535C11.8417 10.1582 12.1583 10.1582 12.3536 10.3535L16 13.9999", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+  return: /* @__PURE__ */ t("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ t(
+    "path",
+    {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M20.25 4C19.8358 4 19.5 4.33579 19.5 4.75V14.25C19.5 14.3881 19.3881 14.5 19.25 14.5H5.56066L8.28033 11.7803C8.57322 11.4874 8.57322 11.0126 8.28033 10.7197C7.98744 10.4268 7.51256 10.4268 7.21967 10.7197L3.21967 14.7197C2.92678 15.0126 2.92678 15.4874 3.21967 15.7803L7.21967 19.7803C7.51256 20.0732 7.98744 20.0732 8.28033 19.7803C8.57322 19.4874 8.57322 19.0126 8.28033 18.7197L5.56066 16H19.25C20.2165 16 21 15.2165 21 14.25V4.75C21 4.33579 20.6642 4 20.25 4Z",
+      fill: "currentColor"
+    }
+  ) }),
+  delete: /* @__PURE__ */ t("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ t(
+    "path",
+    {
+      d: "M14.9988 9.75L12.7488 12M12.7488 12L10.4988 14.25M12.7488 12L10.4988 9.75M12.7488 12L14.9988 14.25M6.55509 4.75H20.2488C20.8011 4.75 21.2488 5.19772 21.2488 5.75V18.25C21.2488 18.8023 20.8011 19.25 20.2488 19.25H6.55509C6.2092 19.25 5.88786 19.0712 5.70545 18.7774L1.82614 12.5274C1.62566 12.2044 1.62566 11.7956 1.82614 11.4726L5.70545 5.22264C5.88786 4.92875 6.2092 4.75 6.55509 4.75Z",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) })
+}, p = {
+  arrowLeft: "Left Arrow",
+  arrowRight: "Right Arrow",
+  arrowUp: "Up Arrow",
+  arrowDown: "Down Arrow",
+  command: "Command",
+  option: "Option",
+  shift: "Shift",
+  control: "Control",
+  return: "Return",
+  delete: "Delete"
+}, g = ({ className: r, symbol: e, symbolPosition: n = "start", children: o, ...i }) => {
+  const l = o != null && o !== "", s = e && /* @__PURE__ */ t("span", { "aria-hidden": "true", children: c[e] }), a = !l && e ? p[e] : void 0, h = i["aria-label"] ?? a;
+  return /* @__PURE__ */ w(
+    "kbd",
+    {
+      className: d(
+        "bg-kbd-bg text-kbd-text pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-mono! text-xs font-medium select-none",
+        "in-data-[slot=tooltip-content]:bg-level-three [&_svg:not([class*='size-'])]:size-3",
+        r
+      ),
+      "data-slot": "kbd",
+      "data-testid": "spectral-kbd",
+      ...i,
+      "aria-label": h,
+      children: [
+        n === "start" && s,
+        o,
+        n === "end" && s
+      ]
+    }
+  );
+};
+g.displayName = "Kbd";
+const C = ({ className: r, ...e }) => /* @__PURE__ */ t("kbd", { className: d("inline-flex items-center gap-1", r), "data-slot": "kbd-group", "data-testid": "spectral-kbd-group", ...e });
+C.displayName = "KbdGroup";
 export {
-  o as Kbd,
-  d as KbdGroup
+  g as Kbd,
+  C as KbdGroup
 };

package/dist/Label.d.ts

@@ -1,7 +1,9 @@
 import { ComponentPropsWithoutRef, Ref } from 'react';
-export type LabelProps = ComponentPropsWithoutRef<'label'>;
+export interface LabelProps extends ComponentPropsWithoutRef<'label'> {
+    ref?: Ref<HTMLLabelElement>;
+}
 export declare const Label: {
-    ({ ref, className, ...props }: LabelProps & {
+    ({ className, ref, ...props }: LabelProps & {
         ref?: Ref<HTMLLabelElement>;
     }): import("react/jsx-runtime").JSX.Element;
     displayName: string;

package/dist/Label.js

@@ -3,12 +3,12 @@ import { jsx as o } from "react/jsx-runtime";
 import { cn as t } from "./utils/twUtils.js";
 import "react";
 const r = ({
-  ref: e,
-  className: a,
+  className: e,
+  ref: a,
   ...l
 }) => (
   // eslint-disable-next-line jsx-a11y/label-has-associated-control
-  /* @__PURE__ */ o("label", { ref: e, "data-slot": "label", className: t("text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70", a), ...l })
+  /* @__PURE__ */ o("label", { className: t("text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70", e), "data-slot": "label", ref: a, ...l })
 );
 r.displayName = "Label";
 export {

package/dist/MultiSelect/MultiSelectBase.d.ts

@@ -31,7 +31,7 @@ export interface MultiSelectBaseProps extends Omit<ButtonHTMLAttributes<HTMLButt
     'aria-describedby'?: string;
 }
 export declare const MultiSelectBase: {
-    ({ ref, className, clearAllLabel, closeOnSelect, emptyMessage, errorMessage, id, label, loadingMessage, maxCount, name, onChange, options, placeholder, searchPlaceholder, selectAllLabel, showClearAll, showSearch, showSelectAll, sortAlphabetically, state, value, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, ...props }: MultiSelectBaseProps & {
+    ({ className, clearAllLabel, closeOnSelect, emptyMessage, errorMessage, id, label, loadingMessage, maxCount, name, onChange, options, placeholder, ref, searchPlaceholder, selectAllLabel, showClearAll, showSearch, showSelectAll, sortAlphabetically, state, value, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, ...props }: MultiSelectBaseProps & {
         ref?: Ref<HTMLButtonElement>;
     }): import("react/jsx-runtime").JSX.Element;
     displayName: string;