@epilot/volt-ui-experimental-griffel 0.1.0-experiment.1

package/dist/components/command/command.d.ts

@@ -0,0 +1,85 @@
+import * as React from "react";
+import { Command as CommandPrimitive } from "cmdk";
+import { Dialog } from "../dialog/dialog";
+export type CommandProps = React.ComponentProps<typeof CommandPrimitive> & {
+    "data-slot"?: string;
+};
+export declare const Command: React.ForwardRefExoticComponent<Omit<CommandProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export type CommandDialogProps = Omit<React.ComponentProps<typeof Dialog>, "children"> & {
+    children?: React.ReactNode;
+    title?: string;
+    description?: string;
+    className?: string;
+    showCloseButton?: boolean;
+};
+export declare const CommandDialog: React.ForwardRefExoticComponent<Omit<CommandDialogProps, "ref"> & React.RefAttributes<HTMLElement>>;
+export type CommandInputProps = React.ComponentProps<typeof CommandPrimitive.Input> & {
+    wrapperClassName?: string;
+};
+export declare const CommandInput: React.ForwardRefExoticComponent<Omit<CommandInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export type CommandListProps = React.ComponentProps<typeof CommandPrimitive.List>;
+export declare const CommandList: React.ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
+    label?: string;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export type CommandEmptyProps = React.ComponentProps<typeof CommandPrimitive.Empty>;
+export declare const CommandEmpty: React.ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export type CommandGroupProps = React.ComponentProps<typeof CommandPrimitive.Group>;
+export declare const CommandGroup: React.ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "heading" | "value"> & {
+    heading?: React.ReactNode;
+    value?: string;
+    forceMount?: boolean;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export type CommandSeparatorProps = React.ComponentProps<typeof CommandPrimitive.Separator>;
+export declare const CommandSeparator: React.ForwardRefExoticComponent<Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
+    alwaysRender?: boolean;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export type CommandItemProps = React.ComponentProps<typeof CommandPrimitive.Item>;
+export declare const CommandItem: React.ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "onSelect" | "disabled" | "value"> & {
+    disabled?: boolean;
+    onSelect?: (value: string) => void;
+    value?: string;
+    keywords?: string[];
+    forceMount?: boolean;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export type CommandShortcutProps = React.ComponentProps<"span">;
+export declare const CommandShortcut: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export type CommandLoadingProps = React.ComponentProps<typeof CommandPrimitive.Loading>;
+export declare const CommandLoading: React.ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
+    progress?: number;
+    label?: string;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Command as CommandRoot };

package/dist/components/command/command.js

@@ -0,0 +1,358 @@
+import { jsx as n, jsxs as x } from "react/jsx-runtime";
+import * as s from "react";
+import { Command as p } from "../../node_modules/cmdk/dist/index.js";
+import { shorthands as c } from "../../node_modules/@griffel/core/src/index.js";
+import { SLOT_ATTR as i } from "../../renderer/contract.js";
+import { makeVoltStyles as b } from "../../styles/make-styles.js";
+import { spacingElement1 as u, grayA3 as k, spacingElement3 as h, spacingElement2 as r, fontWeightMedium as R, grayA11 as f, textXs as S, accentA3 as v, grayA12 as y, textSm as C, semGraySoft as N, body as q, radiusSm as I, radiusMd as T } from "../../tokens/index.js";
+import { Dialog as B, DialogHeader as D, DialogTitle as E, DialogDescription as A, DialogContent as W } from "../dialog/dialog.js";
+import { mergeClasses as m } from "../../node_modules/@griffel/core/src/mergeClasses.js";
+const X = (d) => /* @__PURE__ */ n(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    height: "24px",
+    viewBox: "0 -960 960 960",
+    width: "24px",
+    fill: "currentColor",
+    ...d,
+    children: /* @__PURE__ */ n("path", { d: "M380-320q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l224 224q11 11 11 28t-11 28q-11 11-28 11t-28-11L532-372q-30 24-69 38t-83 14Zm0-80q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z" })
+  }
+), l = b({
+  root: {
+    backgroundColor: q,
+    color: y,
+    display: "flex",
+    height: "100%",
+    width: "100%",
+    flexDirection: "column",
+    overflowX: "hidden",
+    overflowY: "hidden",
+    ...c.borderRadius(T)
+  },
+  inputWrapper: {
+    display: "flex",
+    alignItems: "center",
+    ...c.gap(r),
+    ...c.borderBottom("1px", "solid", k),
+    paddingLeft: h,
+    paddingRight: h
+  },
+  searchIcon: {
+    width: "1.25rem",
+    height: "1.25rem",
+    flexShrink: 0,
+    opacity: 0.5
+  },
+  input: {
+    height: "3rem",
+    display: "flex",
+    width: "100%",
+    ...c.borderRadius(T),
+    backgroundColor: "transparent",
+    paddingTop: h,
+    paddingBottom: h,
+    fontSize: C,
+    outlineStyle: "none",
+    "::placeholder": {
+      color: f
+    },
+    ":disabled": {
+      cursor: "not-allowed",
+      opacity: 0.5
+    }
+  },
+  list: {
+    overflowX: "hidden",
+    overflowY: "auto",
+    scrollPaddingTop: u,
+    scrollPaddingBottom: u
+  },
+  empty: {
+    paddingTop: "1.5rem",
+    paddingBottom: "1.5rem",
+    textAlign: "center",
+    fontSize: C,
+    color: f
+  },
+  group: {
+    color: y,
+    overflowX: "hidden",
+    overflowY: "hidden",
+    ...c.padding(u),
+    "& [cmdk-group-heading]": {
+      color: f,
+      paddingLeft: r,
+      paddingRight: r,
+      paddingTop: "0.375rem",
+      paddingBottom: "0.375rem",
+      fontSize: S,
+      fontWeight: R
+    }
+  },
+  separator: {
+    backgroundColor: N,
+    marginLeft: `calc(-1 * ${u})`,
+    marginRight: `calc(-1 * ${u})`,
+    height: "1px"
+  },
+  item: {
+    position: "relative",
+    display: "flex",
+    cursor: "default",
+    alignItems: "center",
+    ...c.gap(r),
+    ...c.borderRadius(I),
+    paddingLeft: r,
+    paddingRight: r,
+    paddingTop: "0.375rem",
+    paddingBottom: "0.375rem",
+    fontSize: C,
+    outlineStyle: "none",
+    userSelect: "none",
+    color: y,
+    "&[data-selected='true'], &[aria-selected='true']": {
+      backgroundColor: v
+    },
+    ":hover": {
+      backgroundColor: v
+    },
+    "&[data-disabled='true'], &[aria-disabled='true']": {
+      pointerEvents: "none",
+      opacity: 0.5
+    },
+    "& svg": {
+      pointerEvents: "none",
+      flexShrink: 0,
+      width: "1rem",
+      height: "1rem"
+    },
+    "& svg:not([class*='text-'])": {
+      color: f
+    }
+  },
+  shortcut: {
+    color: f,
+    marginLeft: "auto",
+    fontSize: S,
+    letterSpacing: "0.1em"
+  },
+  loading: {
+    color: f
+  },
+  dialogContent: {
+    overflowX: "hidden",
+    overflowY: "hidden",
+    ...c.padding(0)
+  },
+  dialogCommand: {
+    "& [cmdk-group-heading]": {
+      color: f,
+      paddingLeft: r,
+      paddingRight: r,
+      fontWeight: R
+    },
+    [`& [${i}="command-input-wrapper"]`]: {
+      height: "3rem"
+    },
+    "& [cmdk-group]": {
+      paddingLeft: r,
+      paddingRight: r
+    },
+    "& [cmdk-item]": {
+      paddingLeft: r,
+      paddingRight: r,
+      paddingTop: h,
+      paddingBottom: h
+    },
+    "& [cmdk-item] svg": {
+      width: "1.25rem",
+      height: "1.25rem"
+    },
+    "& [cmdk-input-wrapper] svg": {
+      width: "1.25rem",
+      height: "1.25rem"
+    },
+    "& [cmdk-input]": {
+      height: "3rem"
+    }
+  },
+  srOnly: {
+    position: "absolute",
+    width: "1px",
+    height: "1px",
+    paddingTop: 0,
+    paddingBottom: 0,
+    paddingLeft: 0,
+    paddingRight: 0,
+    marginTop: "-1px",
+    marginBottom: "-1px",
+    marginLeft: "-1px",
+    marginRight: "-1px",
+    overflowX: "hidden",
+    overflowY: "hidden",
+    clip: "rect(0, 0, 0, 0)",
+    whiteSpace: "nowrap",
+    ...c.borderWidth(0)
+  }
+}), z = s.forwardRef(function({ className: t, "data-slot": o = "command", ...a }, e) {
+  const g = l();
+  return /* @__PURE__ */ n(
+    p,
+    {
+      ref: e,
+      "data-slot": o,
+      [i]: o,
+      className: m(g.root, t),
+      ...a
+    }
+  );
+});
+s.forwardRef(
+  function({
+    title: t = "Command Palette",
+    description: o = "Search for a command to run...",
+    children: a,
+    className: e,
+    showCloseButton: g = !0,
+    ...L
+  }, Y) {
+    const w = l();
+    return /* @__PURE__ */ x(B, { ...L, children: [
+      /* @__PURE__ */ x(D, { className: w.srOnly, children: [
+        /* @__PURE__ */ n(E, { children: t }),
+        /* @__PURE__ */ n(A, { children: o })
+      ] }),
+      /* @__PURE__ */ n(
+        W,
+        {
+          className: m(w.dialogContent, e),
+          showCloseButton: g,
+          children: /* @__PURE__ */ n(z, { className: w.dialogCommand, children: a })
+        }
+      )
+    ] });
+  }
+);
+const H = s.forwardRef(function({ className: t, wrapperClassName: o, ...a }, e) {
+  const g = l();
+  return /* @__PURE__ */ x(
+    "div",
+    {
+      "data-slot": "command-input-wrapper",
+      [i]: "command-input-wrapper",
+      className: m(g.inputWrapper, o),
+      children: [
+        /* @__PURE__ */ n(X, { className: g.searchIcon }),
+        /* @__PURE__ */ n(
+          p.Input,
+          {
+            ref: e,
+            "data-slot": "command-input",
+            [i]: "command-input",
+            className: m(g.input, t),
+            ...a
+          }
+        )
+      ]
+    }
+  );
+}), V = s.forwardRef(function({ className: t, ...o }, a) {
+  const e = l();
+  return /* @__PURE__ */ n(
+    p.List,
+    {
+      ref: a,
+      "data-slot": "command-list",
+      [i]: "command-list",
+      className: m(e.list, t),
+      ...o
+    }
+  );
+}), F = s.forwardRef(function({ className: t, ...o }, a) {
+  const e = l();
+  return /* @__PURE__ */ n(
+    p.Empty,
+    {
+      ref: a,
+      "data-slot": "command-empty",
+      [i]: "command-empty",
+      className: m(e.empty, t),
+      ...o
+    }
+  );
+}), J = s.forwardRef(function({ className: t, ...o }, a) {
+  const e = l();
+  return /* @__PURE__ */ n(
+    p.Group,
+    {
+      ref: a,
+      "data-slot": "command-group",
+      [i]: "command-group",
+      className: m(e.group, t),
+      ...o
+    }
+  );
+}), K = s.forwardRef(function({ className: t, ...o }, a) {
+  const e = l();
+  return /* @__PURE__ */ n(
+    p.Separator,
+    {
+      ref: a,
+      "data-slot": "command-separator",
+      [i]: "command-separator",
+      className: m(e.separator, t),
+      ...o
+    }
+  );
+}), Q = s.forwardRef(function({ className: t, ...o }, a) {
+  const e = l();
+  return /* @__PURE__ */ n(
+    p.Item,
+    {
+      ref: a,
+      "data-slot": "command-item",
+      [i]: "command-item",
+      className: m(e.item, t),
+      ...o
+    }
+  );
+});
+s.forwardRef(function({ className: t, ...o }, a) {
+  const e = l();
+  return /* @__PURE__ */ n(
+    "span",
+    {
+      ref: a,
+      "data-slot": "command-shortcut",
+      [i]: "command-shortcut",
+      className: m(e.shortcut, t),
+      ...o
+    }
+  );
+});
+const U = s.forwardRef(function({ className: t, ...o }, a) {
+  const e = l();
+  return /* @__PURE__ */ n(
+    p.Loading,
+    {
+      ref: a,
+      "data-slot": "command-loading",
+      [i]: "command-loading",
+      className: m(e.loading, t),
+      ...o
+    }
+  );
+});
+export {
+  z as Command,
+  F as CommandEmpty,
+  J as CommandGroup,
+  H as CommandInput,
+  Q as CommandItem,
+  V as CommandList,
+  U as CommandLoading,
+  z as CommandRoot,
+  K as CommandSeparator
+};
+//# sourceMappingURL=command.js.map

package/dist/components/command/command.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"command.js","sources":["../../../src/components/command/command.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { Command as CommandPrimitive } from \"cmdk\"\nimport { mergeClasses, shorthands } from \"@griffel/core\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"../dialog/dialog\"\n\nconst SearchIcon = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 -960 960 960\"\n    width=\"24px\"\n    fill=\"currentColor\"\n    {...props}\n  >\n    <path d=\"M380-320q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l224 224q11 11 11 28t-11 28q-11 11-28 11t-28-11L532-372q-30 24-69 38t-83 14Zm0-80q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z\" />\n  </svg>\n)\n\nconst useStyles = makeVoltStyles({\n  root: {\n    backgroundColor: tokens.body,\n    color: tokens.grayA12,\n    display: \"flex\",\n    height: \"100%\",\n    width: \"100%\",\n    flexDirection: \"column\",\n    overflowX: \"hidden\",\n    overflowY: \"hidden\",\n    ...shorthands.borderRadius(tokens.radiusMd),\n  },\n  inputWrapper: {\n    display: \"flex\",\n    alignItems: \"center\",\n    ...shorthands.gap(tokens.spacingElement2),\n    ...shorthands.borderBottom(\"1px\", \"solid\", tokens.grayA3),\n    paddingLeft: tokens.spacingElement3,\n    paddingRight: tokens.spacingElement3,\n  },\n  searchIcon: {\n    width: \"1.25rem\",\n    height: \"1.25rem\",\n    flexShrink: 0,\n    opacity: 0.5,\n  },\n  input: {\n    height: \"3rem\",\n    display: \"flex\",\n    width: \"100%\",\n    ...shorthands.borderRadius(tokens.radiusMd),\n    backgroundColor: \"transparent\",\n    paddingTop: tokens.spacingElement3,\n    paddingBottom: tokens.spacingElement3,\n    fontSize: tokens.textSm,\n    outlineStyle: \"none\",\n    \"::placeholder\": {\n      color: tokens.grayA11,\n    },\n    \":disabled\": {\n      cursor: \"not-allowed\",\n      opacity: 0.5,\n    },\n  },\n  list: {\n    overflowX: \"hidden\",\n    overflowY: \"auto\",\n    scrollPaddingTop: tokens.spacingElement1,\n    scrollPaddingBottom: tokens.spacingElement1,\n  },\n  empty: {\n    paddingTop: \"1.5rem\",\n    paddingBottom: \"1.5rem\",\n    textAlign: \"center\",\n    fontSize: tokens.textSm,\n    color: tokens.grayA11,\n  },\n  group: {\n    color: tokens.grayA12,\n    overflowX: \"hidden\",\n    overflowY: \"hidden\",\n    ...shorthands.padding(tokens.spacingElement1),\n    \"& [cmdk-group-heading]\": {\n      color: tokens.grayA11,\n      paddingLeft: tokens.spacingElement2,\n      paddingRight: tokens.spacingElement2,\n      paddingTop: \"0.375rem\",\n      paddingBottom: \"0.375rem\",\n      fontSize: tokens.textXs,\n      fontWeight: tokens.fontWeightMedium,\n    },\n  },\n  separator: {\n    backgroundColor: tokens.semGraySoft,\n    marginLeft: `calc(-1 * ${tokens.spacingElement1})`,\n    marginRight: `calc(-1 * ${tokens.spacingElement1})`,\n    height: \"1px\",\n  },\n  item: {\n    position: \"relative\",\n    display: \"flex\",\n    cursor: \"default\",\n    alignItems: \"center\",\n    ...shorthands.gap(tokens.spacingElement2),\n    ...shorthands.borderRadius(tokens.radiusSm),\n    paddingLeft: tokens.spacingElement2,\n    paddingRight: tokens.spacingElement2,\n    paddingTop: \"0.375rem\",\n    paddingBottom: \"0.375rem\",\n    fontSize: tokens.textSm,\n    outlineStyle: \"none\",\n    userSelect: \"none\",\n    color: tokens.grayA12,\n    \"&[data-selected='true'], &[aria-selected='true']\": {\n      backgroundColor: tokens.accentA3,\n    },\n    \":hover\": {\n      backgroundColor: tokens.accentA3,\n    },\n    \"&[data-disabled='true'], &[aria-disabled='true']\": {\n      pointerEvents: \"none\",\n      opacity: 0.5,\n    },\n    \"& svg\": {\n      pointerEvents: \"none\",\n      flexShrink: 0,\n      width: \"1rem\",\n      height: \"1rem\",\n    },\n    \"& svg:not([class*='text-'])\": {\n      color: tokens.grayA11,\n    },\n  },\n  shortcut: {\n    color: tokens.grayA11,\n    marginLeft: \"auto\",\n    fontSize: tokens.textXs,\n    letterSpacing: \"0.1em\",\n  },\n  loading: {\n    color: tokens.grayA11,\n  },\n  dialogContent: {\n    overflowX: \"hidden\",\n    overflowY: \"hidden\",\n    ...shorthands.padding(0),\n  },\n  dialogCommand: {\n    \"& [cmdk-group-heading]\": {\n      color: tokens.grayA11,\n      paddingLeft: tokens.spacingElement2,\n      paddingRight: tokens.spacingElement2,\n      fontWeight: tokens.fontWeightMedium,\n    },\n    [`& [${SLOT_ATTR}=\"command-input-wrapper\"]`]: {\n      height: \"3rem\",\n    },\n    \"& [cmdk-group]\": {\n      paddingLeft: tokens.spacingElement2,\n      paddingRight: tokens.spacingElement2,\n    },\n    \"& [cmdk-item]\": {\n      paddingLeft: tokens.spacingElement2,\n      paddingRight: tokens.spacingElement2,\n      paddingTop: tokens.spacingElement3,\n      paddingBottom: tokens.spacingElement3,\n    },\n    \"& [cmdk-item] svg\": {\n      width: \"1.25rem\",\n      height: \"1.25rem\",\n    },\n    \"& [cmdk-input-wrapper] svg\": {\n      width: \"1.25rem\",\n      height: \"1.25rem\",\n    },\n    \"& [cmdk-input]\": {\n      height: \"3rem\",\n    },\n  },\n  srOnly: {\n    position: \"absolute\",\n    width: \"1px\",\n    height: \"1px\",\n    paddingTop: 0,\n    paddingBottom: 0,\n    paddingLeft: 0,\n    paddingRight: 0,\n    marginTop: \"-1px\",\n    marginBottom: \"-1px\",\n    marginLeft: \"-1px\",\n    marginRight: \"-1px\",\n    overflowX: \"hidden\",\n    overflowY: \"hidden\",\n    clip: \"rect(0, 0, 0, 0)\",\n    whiteSpace: \"nowrap\",\n    ...shorthands.borderWidth(0),\n  },\n})\n\nexport type CommandProps = React.ComponentProps<typeof CommandPrimitive> & {\n  \"data-slot\"?: string\n}\n\nexport const Command = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive>,\n  CommandProps\n>(function Command(\n  { className, \"data-slot\": dataSlot = \"command\", ...props },\n  ref\n) {\n  const styles = useStyles()\n\n  return (\n    <CommandPrimitive\n      ref={ref}\n      data-slot={dataSlot}\n      {...{ [SLOT_ATTR]: dataSlot }}\n      className={mergeClasses(styles.root, className)}\n      {...props}\n    />\n  )\n})\n\nexport type CommandDialogProps = Omit<\n  React.ComponentProps<typeof Dialog>,\n  \"children\"\n> & {\n  children?: React.ReactNode\n  title?: string\n  description?: string\n  className?: string\n  showCloseButton?: boolean\n}\n\nexport const CommandDialog = React.forwardRef<HTMLElement, CommandDialogProps>(\n  function CommandDialog(\n    {\n      title = \"Command Palette\",\n      description = \"Search for a command to run...\",\n      children,\n      className,\n      showCloseButton = true,\n      ...props\n    },\n    _ref\n  ) {\n    const styles = useStyles()\n\n    return (\n      <Dialog {...props}>\n        <DialogHeader className={styles.srOnly}>\n          <DialogTitle>{title}</DialogTitle>\n          <DialogDescription>{description}</DialogDescription>\n        </DialogHeader>\n        <DialogContent\n          className={mergeClasses(styles.dialogContent, className)}\n          showCloseButton={showCloseButton}\n        >\n          <Command className={styles.dialogCommand}>{children}</Command>\n        </DialogContent>\n      </Dialog>\n    )\n  }\n)\n\nexport type CommandInputProps = React.ComponentProps<\n  typeof CommandPrimitive.Input\n> & {\n  wrapperClassName?: string\n}\n\nexport const CommandInput = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Input>,\n  CommandInputProps\n>(function CommandInput({ className, wrapperClassName, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <div\n      data-slot=\"command-input-wrapper\"\n      {...{ [SLOT_ATTR]: \"command-input-wrapper\" }}\n      className={mergeClasses(styles.inputWrapper, wrapperClassName)}\n    >\n      <SearchIcon className={styles.searchIcon} />\n      <CommandPrimitive.Input\n        ref={ref}\n        data-slot=\"command-input\"\n        {...{ [SLOT_ATTR]: \"command-input\" }}\n        className={mergeClasses(styles.input, className)}\n        {...props}\n      />\n    </div>\n  )\n})\n\nexport type CommandListProps = React.ComponentProps<\n  typeof CommandPrimitive.List\n>\n\nexport const CommandList = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.List>,\n  CommandListProps\n>(function CommandList({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <CommandPrimitive.List\n      ref={ref}\n      data-slot=\"command-list\"\n      {...{ [SLOT_ATTR]: \"command-list\" }}\n      className={mergeClasses(styles.list, className)}\n      {...props}\n    />\n  )\n})\n\nexport type CommandEmptyProps = React.ComponentProps<\n  typeof CommandPrimitive.Empty\n>\n\nexport const CommandEmpty = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Empty>,\n  CommandEmptyProps\n>(function CommandEmpty({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <CommandPrimitive.Empty\n      ref={ref}\n      data-slot=\"command-empty\"\n      {...{ [SLOT_ATTR]: \"command-empty\" }}\n      className={mergeClasses(styles.empty, className)}\n      {...props}\n    />\n  )\n})\n\nexport type CommandGroupProps = React.ComponentProps<\n  typeof CommandPrimitive.Group\n>\n\nexport const CommandGroup = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Group>,\n  CommandGroupProps\n>(function CommandGroup({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <CommandPrimitive.Group\n      ref={ref}\n      data-slot=\"command-group\"\n      {...{ [SLOT_ATTR]: \"command-group\" }}\n      className={mergeClasses(styles.group, className)}\n      {...props}\n    />\n  )\n})\n\nexport type CommandSeparatorProps = React.ComponentProps<\n  typeof CommandPrimitive.Separator\n>\n\nexport const CommandSeparator = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Separator>,\n  CommandSeparatorProps\n>(function CommandSeparator({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <CommandPrimitive.Separator\n      ref={ref}\n      data-slot=\"command-separator\"\n      {...{ [SLOT_ATTR]: \"command-separator\" }}\n      className={mergeClasses(styles.separator, className)}\n      {...props}\n    />\n  )\n})\n\nexport type CommandItemProps = React.ComponentProps<\n  typeof CommandPrimitive.Item\n>\n\nexport const CommandItem = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Item>,\n  CommandItemProps\n>(function CommandItem({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <CommandPrimitive.Item\n      ref={ref}\n      data-slot=\"command-item\"\n      {...{ [SLOT_ATTR]: \"command-item\" }}\n      className={mergeClasses(styles.item, className)}\n      {...props}\n    />\n  )\n})\n\nexport type CommandShortcutProps = React.ComponentProps<\"span\">\n\nexport const CommandShortcut = React.forwardRef<\n  HTMLSpanElement,\n  CommandShortcutProps\n>(function CommandShortcut({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <span\n      ref={ref}\n      data-slot=\"command-shortcut\"\n      {...{ [SLOT_ATTR]: \"command-shortcut\" }}\n      className={mergeClasses(styles.shortcut, className)}\n      {...props}\n    />\n  )\n})\n\nexport type CommandLoadingProps = React.ComponentProps<\n  typeof CommandPrimitive.Loading\n>\n\nexport const CommandLoading = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Loading>,\n  CommandLoadingProps\n>(function CommandLoading({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <CommandPrimitive.Loading\n      ref={ref}\n      data-slot=\"command-loading\"\n      {...{ [SLOT_ATTR]: \"command-loading\" }}\n      className={mergeClasses(styles.loading, className)}\n      {...props}\n    />\n  )\n})\n\nexport { Command as CommandRoot }\n"],"names":["SearchIcon","props","jsx","useStyles","makeVoltStyles","tokens.body","tokens.grayA12","shorthands","tokens.radiusMd","tokens.spacingElement2","tokens.grayA3","tokens.spacingElement3","tokens.textSm","tokens.grayA11","tokens.spacingElement1","tokens.textXs","tokens.fontWeightMedium","tokens.semGraySoft","tokens.radiusSm","tokens.accentA3","SLOT_ATTR","Command","React","className","dataSlot","ref","styles","CommandPrimitive","mergeClasses","title","description","children","showCloseButton","_ref","jsxs","Dialog","DialogHeader","DialogTitle","DialogDescription","DialogContent","CommandInput","wrapperClassName","CommandList","CommandEmpty","CommandGroup","CommandSeparator","CommandItem","CommandLoading"],"mappings":"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"}

package/dist/components/date-range-picker/date-range-picker-utils.d.ts

@@ -0,0 +1,2 @@
+export { formatDateTimeDisplay, parseDateTimeInput, isDateInRange, normalizeRange, } from "../date-time-picker/date-time-picker-utils";
+export type { DateTimePickerLocale, DateRange, } from "../date-time-picker/date-time-picker-utils";

package/dist/components/date-range-picker/date-range-picker.d.ts

@@ -0,0 +1,34 @@
+import * as React from "react";
+import { RangeCalendar } from "./range-calendar";
+import type { RangeCalendarProps } from "./range-calendar";
+import type { DateRange, DateTimePickerLocale } from "./date-range-picker-utils";
+export type DateRangePreset = {
+    label: string;
+    getValue: () => DateRange;
+};
+export type DateRangePickerProps = {
+    value: DateRange;
+    onChange: (range: DateRange) => void;
+    onBlur?: () => void;
+    disabled?: boolean;
+    disablePast?: boolean;
+    label?: string;
+    error?: string;
+    startPlaceholder?: string;
+    endPlaceholder?: string;
+    format?: string;
+    locale?: DateTimePickerLocale;
+    className?: string;
+    keyboardIcon?: React.ReactNode;
+    inputAriaLabel?: string;
+    openPickerAriaLabel?: string;
+    previousMonthLabel?: string;
+    nextMonthLabel?: string;
+    testId?: string;
+    currentTimeInTimezone?: Date;
+    showWeekNumbers?: boolean;
+    presets?: DateRangePreset[];
+};
+export declare const DateRangePicker: React.ForwardRefExoticComponent<DateRangePickerProps & React.RefAttributes<HTMLDivElement>>;
+export { RangeCalendar };
+export type { RangeCalendarProps, DateRange, DateTimePickerLocale };