@cystackapp/ui 1.5.0 → 2.0.0

package/dist/components/dropdown/Dropdown.d.ts

@@ -0,0 +1,45 @@
+import { DropdownProps } from './types';
+/**
+ * Generic standalone dropdown for action menus, context menus, or selection lists.
+ *
+ * Supports controlled (`open`) and uncontrolled (`defaultOpen`) open state.
+ * When `selected` is provided, the dropdown shows checkmarks (selection mode).
+ * Otherwise it behaves as a plain action menu.
+ *
+ * @example
+ * // Action menu
+ * <Dropdown
+ *   items={[
+ *     { id: "edit", label: "Edit", icon: <Edit01 /> },
+ *     { type: "divider" },
+ *     { id: "delete", label: "Delete", danger: true },
+ *   ]}
+ *   onSelect={(item) => handleAction(item.id)}
+ * >
+ *   <IconButton icon={<DotsVertical />} />
+ * </Dropdown>
+ *
+ * @example
+ * // Selection dropdown with checkmarks
+ * <Dropdown
+ *   items={statusOptions}
+ *   selected={currentStatus}
+ *   onSelect={(item) => setStatus(item.id)}
+ *   syncWidth
+ * >
+ *   <Button>{currentStatusLabel} <ChevronDown /></Button>
+ * </Dropdown>
+ *
+ * @example
+ * // Custom item rendering
+ * <Dropdown
+ *   items={[
+ *     { id: "high", label: "High", render: () => <Badge color="error">High</Badge> },
+ *     { id: "low", label: "Low", render: () => <Badge color="success">Low</Badge> },
+ *   ]}
+ *   onSelect={handleSelect}
+ * >
+ *   <Button>Priority</Button>
+ * </Dropdown>
+ */
+export declare const Dropdown: ({ items, onSelect, selected, open: openProp, defaultOpen, onOpenChange, placement, syncWidth, children, menuClassName, className, disabled, }: DropdownProps) => import("react").JSX.Element;

package/dist/components/dropdown/Dropdown.js

@@ -0,0 +1,133 @@
+import { jsxs as C, Fragment as G, jsx as I } from "react/jsx-runtime";
+import { useRef as b, useState as J, useMemo as P, useCallback as i, useEffect as g } from "react";
+import { cn as Q } from "../../utils/cn.js";
+import { usePopoverCoord as U } from "../popover/use-popover-coord.js";
+import { DropdownMenu as V } from "./DropdownMenu.js";
+import { flattenItems as W } from "./dropdown-utils.js";
+import { useDropdownKeyboard as X } from "./use-dropdown-keyboard.js";
+const oe = ({
+  items: d,
+  onSelect: m,
+  selected: r,
+  open: k,
+  defaultOpen: A = !1,
+  onOpenChange: p,
+  placement: K = "bottomLeft",
+  syncWidth: S = !1,
+  children: L,
+  menuClassName: R,
+  className: T,
+  disabled: a = !1
+}) => {
+  const f = b(null), v = b(
+    `dropdown-menu-${Math.random().toString(36).slice(2, 9)}`
+  ).current, h = b(null), y = k !== void 0, [j, H] = J(A), n = y ? k : j, { style: N } = U(f, h, {
+    position: K,
+    syncWidth: S
+  }), { activeId: w, setActiveId: q, handleNavigationKeyDown: x, resetActive: c } = X(d), B = P(() => r === void 0 ? /* @__PURE__ */ new Set() : Array.isArray(r) ? new Set(r) : /* @__PURE__ */ new Set([r]), [r]), F = r !== void 0, s = i(
+    (e) => {
+      y || H(e), p == null || p(e);
+    },
+    [y, p]
+  ), t = i(() => {
+    s(!1), c();
+  }, [s, c]), D = i(
+    (e) => {
+      var o, u;
+      m == null || m(e), t(), (u = ((o = f.current) == null ? void 0 : o.querySelector(
+        'button:not([disabled]), [href], input:not([disabled]), [tabindex]:not([tabindex="-1"])'
+      )) ?? f.current) == null || u.focus();
+    },
+    [m, t]
+  ), $ = i(() => {
+    a || s(!n);
+  }, [a, n, s]), E = i(
+    (e) => {
+      if (!a) {
+        if (!n && ["ArrowDown", "Enter", " "].includes(e.key)) {
+          e.preventDefault(), s(!0);
+          return;
+        }
+        if (n) {
+          if (e.key === "Escape") {
+            e.preventDefault(), t();
+            return;
+          }
+          if (e.key === "Tab") {
+            t();
+            return;
+          }
+          if ((e.key === "Enter" || e.key === " ") && w !== null) {
+            e.preventDefault();
+            const l = W(d).find((o) => o.id === w);
+            l && D(l);
+            return;
+          }
+          x(e);
+        }
+      }
+    },
+    [
+      a,
+      n,
+      s,
+      t,
+      D,
+      w,
+      x,
+      d
+    ]
+  ), z = i((e) => {
+    e.preventDefault();
+  }, []);
+  return g(() => {
+    if (!n) return;
+    function e(l) {
+      const o = l.target, u = f.current, M = document.getElementById(v);
+      u != null && u.contains(o) || M != null && M.contains(o) || t();
+    }
+    return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+  }, [n, v, t]), g(() => {
+    n || c();
+  }, [n, c]), /* @__PURE__ */ C(G, { children: [
+    /* @__PURE__ */ I(
+      "span",
+      {
+        ref: f,
+        "aria-haspopup": "menu",
+        "aria-expanded": n,
+        "aria-controls": n ? v : void 0,
+        className: Q(
+          "inline-flex",
+          a && "cursor-not-allowed",
+          T
+        ),
+        onClick: $,
+        onKeyDown: E,
+        children: L
+      }
+    ),
+    /* @__PURE__ */ I(
+      V,
+      {
+        entries: d,
+        isOpen: n,
+        style: N,
+        menuRef: h,
+        menuClassName: R,
+        selectedSet: B,
+        selectionMode: F,
+        activeId: w,
+        menuId: v,
+        onSelect: D,
+        onHoverEnter: q,
+        onHoverLeave: c,
+        onKeyDown: E,
+        onMouseDown: z
+      }
+    )
+  ] });
+};
+export {
+  oe as Dropdown
+};

package/dist/components/dropdown/DropdownMenu.d.ts

@@ -0,0 +1,20 @@
+import { CSSProperties, RefObject } from 'react';
+import { DropdownEntry, DropdownItem } from './types';
+interface DropdownMenuProps {
+    entries: DropdownEntry[];
+    isOpen: boolean;
+    style: CSSProperties | undefined;
+    menuRef: RefObject<HTMLDivElement>;
+    menuClassName?: string;
+    selectedSet: Set<string>;
+    selectionMode: boolean;
+    activeId: string | null;
+    menuId: string;
+    onSelect: (item: DropdownItem) => void;
+    onHoverEnter: (id: string) => void;
+    onHoverLeave: () => void;
+    onKeyDown: (e: React.KeyboardEvent) => void;
+    onMouseDown: (e: React.MouseEvent) => void;
+}
+export declare const DropdownMenu: ({ entries, isOpen, style, menuRef, menuClassName, selectedSet, selectionMode, activeId, menuId, onSelect, onHoverEnter, onHoverLeave, onKeyDown, onMouseDown, }: DropdownMenuProps) => import('react').ReactPortal;
+export {};

package/dist/components/dropdown/DropdownMenu.js

@@ -0,0 +1,78 @@
+import { jsx as r, jsxs as w } from "react/jsx-runtime";
+import { createPortal as N } from "react-dom";
+import { cn as $ } from "../../utils/cn.js";
+import { DropdownMenuItem as m } from "./DropdownMenuItem.js";
+const z = ({
+  entries: u,
+  isOpen: c,
+  style: n,
+  menuRef: v,
+  menuClassName: b,
+  selectedSet: d,
+  selectionMode: a,
+  activeId: e,
+  menuId: f,
+  onSelect: s,
+  onHoverEnter: p,
+  onHoverLeave: t,
+  onKeyDown: g,
+  onMouseDown: h
+}) => {
+  const x = /* @__PURE__ */ r(
+    "div",
+    {
+      ref: v,
+      id: f,
+      role: "menu",
+      "aria-activedescendant": e ?? void 0,
+      className: $(
+        "z-20 rounded-lg border border-gray-v2-200 bg-white p-1 shadow-lg transition-all",
+        "max-h-[40vh] overflow-auto",
+        !c && "invisible pointer-events-none scale-95 opacity-0",
+        b
+      ),
+      style: n,
+      onKeyDown: g,
+      onMouseDown: h,
+      children: u.map((i, l) => "type" in i && i.type === "divider" ? /* @__PURE__ */ r(
+        "div",
+        {
+          role: "separator",
+          className: "my-1 border-t border-gray-v2-200"
+        },
+        `divider-${l}`
+      ) : "type" in i && i.type === "group" ? /* @__PURE__ */ w("div", { role: "group", children: [
+        /* @__PURE__ */ r("div", { className: "px-2 py-1.5 text-xs font-medium text-gray-v2-500", children: i.label }),
+        i.items.map((o) => /* @__PURE__ */ r(
+          m,
+          {
+            item: o,
+            isSelected: d.has(o.id),
+            isActive: e === o.id,
+            selectionMode: a,
+            onSelect: s,
+            onHoverEnter: p,
+            onHoverLeave: t
+          },
+          o.id
+        ))
+      ] }, `group-${i.label}-${l}`) : /* @__PURE__ */ r(
+        m,
+        {
+          item: i,
+          isSelected: d.has(i.id),
+          isActive: e === i.id,
+          selectionMode: a,
+          onSelect: s,
+          onHoverEnter: p,
+          onHoverLeave: t
+        },
+        i.id
+      ))
+    }
+  );
+  return N(x, document.body);
+};
+export {
+  z as DropdownMenu
+};

package/dist/components/dropdown/DropdownMenuItem.d.ts

@@ -0,0 +1,13 @@
+import { DropdownItem } from './types';
+interface DropdownMenuItemProps {
+    item: DropdownItem;
+    isSelected: boolean;
+    isActive: boolean;
+    /** Whether the dropdown is in selection mode (shows checkmarks). */
+    selectionMode: boolean;
+    onSelect: (item: DropdownItem) => void;
+    onHoverEnter: (id: string) => void;
+    onHoverLeave: () => void;
+}
+export declare const DropdownMenuItem: ({ item, isSelected, isActive, selectionMode, onSelect, onHoverEnter, onHoverLeave, }: DropdownMenuItemProps) => import("react").JSX.Element;
+export {};

package/dist/components/dropdown/DropdownMenuItem.js

@@ -0,0 +1,49 @@
+import { jsx as r, jsxs as a, Fragment as c } from "react/jsx-runtime";
+import { Check as p } from "@untitled-ui/icons-react";
+import { cn as b } from "../../utils/cn.js";
+import { getDropdownItemId as f } from "./dropdown-utils.js";
+const h = ({
+  item: e,
+  isSelected: n,
+  isActive: o,
+  selectionMode: l,
+  onSelect: s,
+  onHoverEnter: d,
+  onHoverLeave: t
+}) => {
+  const i = e.render ? e.render() : /* @__PURE__ */ r(m, { item: e });
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      role: "menuitem",
+      "aria-label": e.label,
+      "aria-disabled": e.disabled || void 0,
+      id: f(e.id),
+      className: b(
+        "flex items-center justify-between gap-2 rounded-md p-2 pr-2.5 text-sm font-semibold",
+        e.disabled ? "cursor-not-allowed opacity-50" : [
+          "cursor-pointer",
+          e.danger ? "text-error-v2-700" : "text-gray-v2-700",
+          n ? "bg-gray-v2-50 text-gray-v2-700" : o ? "bg-gray-v2-100" : "hover:bg-gray-v2-50"
+        ]
+      ),
+      onClick: () => {
+        e.disabled || s(e);
+      },
+      onMouseEnter: () => {
+        e.disabled || d(e.id);
+      },
+      onMouseLeave: t,
+      children: [
+        /* @__PURE__ */ r("div", { className: "flex min-w-0 items-center gap-2 overflow-hidden text-ellipsis", children: i }),
+        l ? n ? /* @__PURE__ */ r(p, { className: "h-5 w-5 min-w-5 text-brand-v2-600" }) : /* @__PURE__ */ r("div", { className: "w-5" }) : null
+      ]
+    }
+  );
+}, m = ({ item: e }) => /* @__PURE__ */ a(c, { children: [
+  e.icon ? /* @__PURE__ */ r("span", { className: "flex h-5 w-5 items-center justify-center", children: e.icon }) : null,
+  /* @__PURE__ */ r("span", { className: "truncate", children: e.label })
+] });
+export {
+  h as DropdownMenuItem
+};

package/dist/components/dropdown/DropdownTestStory.d.ts

@@ -0,0 +1,5 @@
+export declare const DropdownWithCallback: () => import("react").JSX.Element;
+export declare const DropdownWithSelection: () => import("react").JSX.Element;
+export declare const DropdownWithDisabledItem: () => import("react").JSX.Element;
+export declare const DropdownWithGroups: () => import("react").JSX.Element;
+export declare const DropdownDisabled: () => import("react").JSX.Element;

package/dist/components/dropdown/dropdown-utils.d.ts

@@ -0,0 +1,4 @@
+import { DropdownEntry, DropdownItem } from './types';
+export declare function getDropdownItemId(id: string): string;
+/** Flatten entries into a list of actionable (non-disabled) items. */
+export declare function flattenItems(entries: DropdownEntry[]): DropdownItem[];

package/dist/components/dropdown/dropdown-utils.js

@@ -0,0 +1,14 @@
+function i(e) {
+  return `dropdown-item-${e}`;
+}
+function o(e) {
+  return e.flatMap(
+    (t) => "type" in t && t.type === "group" ? t.items : [t]
+  ).filter(
+    (t) => !("type" in t) && !t.disabled
+  );
+}
+export {
+  o as flattenItems,
+  i as getDropdownItemId
+};

package/dist/components/dropdown/types.d.ts

@@ -0,0 +1,48 @@
+import { ReactNode } from 'react';
+export interface DropdownItem {
+    id: string;
+    /** Plain text label — used for accessibility and keyboard type-ahead. */
+    label: string;
+    /** Custom visual override. When provided, replaces the default icon + label rendering. */
+    render?: () => ReactNode;
+    icon?: ReactNode;
+    disabled?: boolean;
+    /** Render with destructive styling (red text). */
+    danger?: boolean;
+}
+export interface DropdownGroup {
+    type: "group";
+    label: string;
+    items: DropdownItem[];
+}
+export interface DropdownDivider {
+    type: "divider";
+}
+export type DropdownEntry = DropdownItem | DropdownGroup | DropdownDivider;
+export type DropdownPlacement = "bottomLeft" | "bottomRight" | "topLeft" | "topRight";
+export interface DropdownProps {
+    /** Menu entries: items, groups, and dividers. */
+    items: DropdownEntry[];
+    /** Called when an item is clicked. */
+    onSelect?: (item: DropdownItem) => void;
+    /** Currently selected item id(s). When provided, shows checkmarks. */
+    selected?: string | string[];
+    /** Controlled open state. */
+    open?: boolean;
+    /** Initial open state for uncontrolled mode. Default: false. */
+    defaultOpen?: boolean;
+    /** Callback when open state changes. */
+    onOpenChange?: (open: boolean) => void;
+    /** Preferred placement. Auto-flips when near viewport edge. Default: "bottomLeft". */
+    placement?: DropdownPlacement;
+    /** Sync menu width to trigger width. Default: false. */
+    syncWidth?: boolean;
+    /** The trigger element. */
+    children: ReactNode;
+    /** Additional classes on the menu panel. */
+    menuClassName?: string;
+    /** Additional classes on the trigger wrapper. */
+    className?: string;
+    /** Disable the dropdown entirely. */
+    disabled?: boolean;
+}

package/dist/components/dropdown/use-dropdown-keyboard.d.ts

@@ -0,0 +1,12 @@
+import { DropdownEntry } from './types';
+/**
+ * Manages keyboard navigation state for dropdown items.
+ * Only handles ArrowUp/Down/Home/End navigation — the parent is responsible
+ * for acting on Enter/Escape/Tab via the returned `activeId`.
+ */
+export declare function useDropdownKeyboard(entries: DropdownEntry[]): {
+    activeId: string | null;
+    setActiveId: import('react').Dispatch<import('react').SetStateAction<string | null>>;
+    handleNavigationKeyDown: (e: React.KeyboardEvent) => void;
+    resetActive: () => void;
+};

package/dist/components/dropdown/use-dropdown-keyboard.js

@@ -0,0 +1,49 @@
+import { useState as f, useMemo as p, useCallback as l } from "react";
+import { flattenItems as g, getDropdownItemId as m } from "./dropdown-utils.js";
+function w(d) {
+  const [o, a] = f(null), e = p(() => g(d), [d]), c = l(() => o === null ? -1 : e.findIndex((t) => t.id === o), [o, e]), r = l(
+    (t) => {
+      if (e.length === 0) return;
+      const n = (t % e.length + e.length) % e.length;
+      a(e[n].id);
+      const s = document.getElementById(
+        m(e[n].id)
+      );
+      s == null || s.scrollIntoView({ block: "nearest" });
+    },
+    [e]
+  ), i = l(
+    (t) => {
+      if (e.length !== 0)
+        switch (t.key) {
+          case "ArrowDown": {
+            t.preventDefault();
+            const n = c();
+            r(n + 1);
+            break;
+          }
+          case "ArrowUp": {
+            t.preventDefault();
+            const n = c();
+            r(n === -1 ? e.length - 1 : n - 1);
+            break;
+          }
+          case "Home": {
+            t.preventDefault(), r(0);
+            break;
+          }
+          case "End": {
+            t.preventDefault(), r(e.length - 1);
+            break;
+          }
+        }
+    },
+    [e, c, r]
+  ), u = l(() => {
+    a(null);
+  }, []);
+  return { activeId: o, setActiveId: a, handleNavigationKeyDown: i, resetActive: u };
+}
+export {
+  w as useDropdownKeyboard
+};

package/dist/components/empty-state/EmptyState.d.ts

@@ -0,0 +1,26 @@
+import { ReactNode } from 'react';
+interface Props {
+    title: string;
+    supportingText?: string;
+    /**
+     * - `"illustration"`: cloud graphic with grid background (default)
+     * - `"featured-icon"`: icon in a bordered box with circles background
+     * @default "illustration"
+     */
+    type?: "featured-icon" | "illustration";
+    buttons?: ReactNode;
+    className?: string;
+    /** Override the default SearchLg icon for `type="featured-icon"`. */
+    icon?: ReactNode;
+}
+/**
+ * Generic empty state for lists, tables, and sections.
+ *
+ * @example
+ * ```tsx
+ * <EmptyState title="No results" supportingText="Try a different filter." type="featured-icon" />
+ * <EmptyState title="Nothing here yet" buttons={<Button>Add item</Button>} />
+ * ```
+ */
+export declare const EmptyState: ({ title, supportingText, type, buttons, className, icon, }: Props) => import("react").JSX.Element;
+export {};

package/dist/components/empty-state/EmptyState.js

@@ -0,0 +1,36 @@
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import { SearchLg as o } from "@untitled-ui/icons-react";
+import { cn as m } from "../../utils/cn.js";
+import n from "../../assets/background-pattern-grid.svg.js";
+import d from "../../assets/background-pattern-circles-md.svg.js";
+import f from "../../assets/empty-cloud.svg.js";
+const N = ({
+  title: s,
+  supportingText: r,
+  type: t = "illustration",
+  buttons: a,
+  className: i,
+  icon: c
+}) => /* @__PURE__ */ l(
+  "div",
+  {
+    className: m(
+      "relative flex flex-1 flex-col items-center justify-center gap-8 overflow-hidden pb-6 pt-12",
+      i
+    ),
+    children: [
+      t === "illustration" ? /* @__PURE__ */ e(n, { className: "absolute -top-1/3 h-120 w-120" }) : /* @__PURE__ */ e(d, { className: "absolute -top-[10.55rem] h-120 w-120" }),
+      /* @__PURE__ */ l("div", { className: "z-10 flex flex-col items-center gap-5", children: [
+        t === "illustration" ? /* @__PURE__ */ e(f, { className: "h-32 w-43" }) : /* @__PURE__ */ e("div", { className: "flex h-12 w-12 items-center justify-center rounded-lg border border-gray-v2-200 bg-white shadow-xs", children: c ?? /* @__PURE__ */ e(o, { className: "h-6 w-6" }) }),
+        /* @__PURE__ */ l("div", { className: "flex flex-col items-center gap-2 px-3 text-center", children: [
+          /* @__PURE__ */ e("span", { className: "text-lg font-semibold text-gray-v2-700", children: s }),
+          r ? /* @__PURE__ */ e("span", { className: "text-sm text-gray-v2", children: r }) : null
+        ] })
+      ] }),
+      a ? /* @__PURE__ */ e("div", { className: "flex gap-3", children: a }) : null
+    ]
+  }
+);
+export {
+  N as EmptyState
+};

package/dist/components/error-state/ErrorState.d.ts

@@ -5,5 +5,5 @@ interface Props {
     buttons?: ReactNode;
     className?: string;
 }
-export declare const ErrorState: ({ title, supportingText, buttons, className, }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const ErrorState: ({ title, supportingText, buttons, className, }: Props) => import("react").JSX.Element;
 export {};

package/dist/components/featured-icon/FeaturedIcon.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode, SVGProps } from 'react';
+type FeaturedIconSize = "md" | "lg";
+interface Props {
+    Icon: (props: SVGProps<SVGSVGElement>) => ReactNode;
+    size?: FeaturedIconSize;
+    /** Use when the surrounding background is dark, so the glass overlay stays legible. */
+    darkMode?: boolean;
+    backgroundClassName?: string;
+    iconClassName?: string;
+}
+export declare const FeaturedIcon: ({ Icon, size, darkMode, backgroundClassName, iconClassName, }: Props) => import("react").JSX.Element;
+export {};

package/dist/components/featured-icon/FeaturedIcon.js

@@ -0,0 +1,44 @@
+import { jsxs as a, jsx as t } from "react/jsx-runtime";
+import { cn as e } from "../../utils/cn.js";
+const d = {
+  md: "size-10 min-w-10",
+  lg: "size-12 min-w-12"
+}, u = ({
+  Icon: r,
+  size: l = "md",
+  darkMode: i = !1,
+  backgroundClassName: o,
+  iconClassName: s
+}) => /* @__PURE__ */ a(
+  "div",
+  {
+    className: e(
+      "relative flex items-center justify-center",
+      d[l]
+    ),
+    children: [
+      /* @__PURE__ */ t(
+        "div",
+        {
+          className: e(
+            "absolute -top-[8%] left-[4%] origin-bottom-right rotate-15 h-full w-full rounded-lg bg-brand-v2-700",
+            o
+          )
+        }
+      ),
+      /* @__PURE__ */ t(
+        "div",
+        {
+          className: e(
+            "h-full w-full min-w-full border rounded-lg backdrop-blur-sm",
+            i ? "bg-white/40 border-white/40" : "bg-white/60 border-white/60"
+          )
+        }
+      ),
+      /* @__PURE__ */ t(r, { className: e("absolute h-1/2 w-1/2 text-white", s) })
+    ]
+  }
+);
+export {
+  u as FeaturedIcon
+};

package/dist/components/form-field/FormField.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+interface Props {
+    label: ReactNode;
+    children: ReactNode;
+    /** id of the associated control — wires up htmlFor for accessibility */
+    htmlFor: string;
+    required?: boolean;
+    error?: ReactNode;
+    hint?: ReactNode;
+    className?: string;
+}
+export declare const FormField: ({ label, children, htmlFor, required, error, hint, className, }: Props) => import("react").JSX.Element;
+export {};

package/dist/components/form-field/FormField.js

@@ -0,0 +1,21 @@
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { cn as n } from "../../utils/cn.js";
+const o = ({
+  label: a,
+  children: m,
+  htmlFor: r,
+  required: c,
+  error: l,
+  hint: s,
+  className: x
+}) => /* @__PURE__ */ t("div", { className: n("flex flex-col gap-1.5 w-full", x), children: [
+  /* @__PURE__ */ t("label", { htmlFor: r, className: "text-sm font-medium text-gray-v2-700", children: [
+    a,
+    c && /* @__PURE__ */ e("span", { className: "ml-0.5 text-brand-v2-600", children: "*" })
+  ] }),
+  m,
+  l ? /* @__PURE__ */ e("p", { className: "text-sm text-error-v2-600", children: l }) : s ? /* @__PURE__ */ e("p", { className: "text-sm text-gray-v2-600", children: s }) : null
+] });
+export {
+  o as FormField
+};

package/dist/components/keyboard-shortcut-label/KeyboardShortcutLabel.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode, SVGProps } from 'react';
+interface Props {
+    name: string;
+    Icon?: (props: SVGProps<SVGSVGElement>) => ReactNode;
+    className?: string;
+}
+export declare const KeyboardShortcutLabel: ({ name, Icon, className }: Props) => import("react").JSX.Element;
+export {};