@medusajs/ui 1.0.0 → 2.0.0

package/dist/esm/components/calendar/calendar.js

@@ -2,8 +2,8 @@
 import { ChevronLeftMini, ChevronRightMini } from "@medusajs/icons";
 import * as React from "react";
 import { DayPicker, useDayRender, } from "react-day-picker";
-import { buttonVariants } from "../button";
 import { clx } from "../../utils/clx";
+import { iconButtonVariants } from "../icon-button";
 const Calendar = ({ className, classNames, mode = "single", showOutsideDays = true, ...props }) => {
     return (React.createElement(DayPicker, { mode: mode, showOutsideDays: showOutsideDays, className: clx(className), classNames: {
             months: "flex flex-col sm:flex-row",
@@ -11,14 +11,14 @@ const Calendar = ({ className, classNames, mode = "single", showOutsideDays = tr
             caption: "flex justify-center relative items-center h-9",
             caption_label: "txt-compact-small-plus absolute bottom-0 left-0 right-0 top-1 flex items-center justify-center text-ui-fg-base",
             nav: "space-x-1 flex items-center bg-ui-bg-base-pressed rounded-md w-full h-full justify-between p-0.5",
-            nav_button: clx(buttonVariants({ variant: "secondary", format: "icon" }), "h-8 w-8"),
+            nav_button: clx(iconButtonVariants({ variant: "primary", size: "base" })),
             nav_button_previous: "!absolute left-0.5",
             nav_button_next: "!absolute right-0.5",
             table: "w-full border-collapse space-y-1",
             head_row: "flex w-full gap-x-2",
             head_cell: clx("txt-compact-small-plus text-ui-fg-muted m-0 box-border flex h-8 w-8 items-center justify-center p-0"),
             row: "flex w-full mt-2 gap-x-2",
-            cell: "txt-compact-small-plus relative rounded-md p-0 text-center focus-within:relative focus-within:z-20",
+            cell: "txt-compact-small-plus relative rounded-md p-0 text-center focus-within:relative",
             day: "txt-compact-small-plus text-ui-fg-base bg-ui-bg-base border-ui-bg-base hover:bg-ui-bg-base-hover focus:!border-ui-border-interactive focus:shadow-borders-focus h-8 w-8 rounded-md border p-0 text-center outline-none transition-all",
             day_selected: "bg-ui-bg-interactive text-ui-fg-on-color hover:bg-ui-bg-interactive focus:bg-ui-bg-interactive",
             day_outside: "text-ui-fg-disabled aria-selected:text-ui-fg-on-color",
@@ -50,7 +50,7 @@ const Day = ({ date, displayMonth }) => {
         return (React.createElement("div", { ...divProps, className: clx("flex items-center justify-center", divProps.className) }));
     }
     const { children: buttonChildren, className: buttonClassName, ...buttonPropsRest } = buttonProps;
-    return (React.createElement("button", { ref: ref, ...buttonPropsRest, className: clx("relative", buttonClassName) },
+    return (React.createElement("button", { ref: ref, ...buttonPropsRest, type: "button", className: clx("relative", buttonClassName) },
         buttonChildren,
         today && (React.createElement("span", { className: clx("absolute right-[5px] top-[5px] h-1 w-1 rounded-full", {
                 "bg-ui-fg-interactive": !selected,

package/dist/esm/components/calendar/calendar.js.map

@@ -1 +1 @@
-{"version":3,"file":"calendar.js","sourceRoot":"","sources":["../../../../src/components/calendar/calendar.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\n\nimport { ChevronLeftMini, ChevronRightMini } from \"@medusajs/icons\"\nimport * as React from \"react\"\nimport {\n  DayPicker,\n  useDayRender,\n  type DayPickerRangeProps,\n  type DayPickerSingleProps,\n  type DayProps,\n} from \"react-day-picker\"\n\nimport { buttonVariants } from \"@/components/button\"\nimport { clx } from \"@/utils/clx\"\n\ntype OmitKeys<T, K extends keyof T> = {\n  [P in keyof T as P extends K ? never : P]: T[P]\n}\n\ntype KeysToOmit = \"showWeekNumber\" | \"captionLayout\" | \"mode\"\n\ntype SingleProps = OmitKeys<DayPickerSingleProps, KeysToOmit>\ntype RangeProps = OmitKeys<DayPickerRangeProps, KeysToOmit>\n\ntype CalendarProps =\n  | ({\n      mode: \"single\"\n    } & SingleProps)\n  | ({\n      mode?: undefined\n    } & SingleProps)\n  | ({\n      mode: \"range\"\n    } & RangeProps)\n\nconst Calendar = ({\n  className,\n  classNames,\n  mode = \"single\",\n  showOutsideDays = true,\n  ...props\n}: CalendarProps) => {\n  return (\n    <DayPicker\n      mode={mode}\n      showOutsideDays={showOutsideDays}\n      className={clx(className)}\n      classNames={{\n        months: \"flex flex-col sm:flex-row\",\n        month: \"space-y-2 p-3\",\n        caption: \"flex justify-center relative items-center h-9\",\n        caption_label:\n          \"txt-compact-small-plus absolute bottom-0 left-0 right-0 top-1 flex items-center justify-center text-ui-fg-base\",\n        nav: \"space-x-1 flex items-center bg-ui-bg-base-pressed rounded-md w-full h-full justify-between p-0.5\",\n        nav_button: clx(\n          buttonVariants({ variant: \"secondary\", format: \"icon\" }),\n          \"h-8 w-8\"\n        ),\n        nav_button_previous: \"!absolute left-0.5\",\n        nav_button_next: \"!absolute right-0.5\",\n        table: \"w-full border-collapse space-y-1\",\n        head_row: \"flex w-full gap-x-2\",\n        head_cell: clx(\n          \"txt-compact-small-plus text-ui-fg-muted m-0 box-border flex h-8 w-8 items-center justify-center p-0\"\n        ),\n        row: \"flex w-full mt-2 gap-x-2\",\n        cell: \"txt-compact-small-plus relative rounded-md p-0 text-center focus-within:relative focus-within:z-20\",\n        day: \"txt-compact-small-plus text-ui-fg-base bg-ui-bg-base border-ui-bg-base hover:bg-ui-bg-base-hover focus:!border-ui-border-interactive focus:shadow-borders-focus h-8 w-8 rounded-md border p-0 text-center outline-none transition-all\",\n        day_selected:\n          \"bg-ui-bg-interactive text-ui-fg-on-color hover:bg-ui-bg-interactive focus:bg-ui-bg-interactive\",\n        day_outside: \"text-ui-fg-disabled aria-selected:text-ui-fg-on-color\",\n        day_disabled: \"text-ui-fg-disabled\",\n        day_range_middle:\n          \"aria-selected:!bg-ui-bg-highlight aria-selected:!text-ui-fg-interactive\",\n        day_hidden: \"invisible\",\n        ...classNames,\n      }}\n      components={{\n        IconLeft: () => <ChevronLeftMini />,\n        IconRight: () => <ChevronRightMini />,\n        Day: Day,\n      }}\n      {...(props as SingleProps & RangeProps)}\n    />\n  )\n}\nCalendar.displayName = \"Calendar\"\n\nconst Day = ({ date, displayMonth }: DayProps) => {\n  const ref = React.useRef<HTMLButtonElement>(null)\n  const { activeModifiers, buttonProps, divProps, isButton, isHidden } =\n    useDayRender(date, displayMonth, ref)\n\n  const { selected, today, disabled, range_middle } = activeModifiers\n\n  React.useEffect(() => {\n    if (selected) {\n      ref.current?.focus()\n    }\n  }, [selected])\n\n  if (isHidden) {\n    return <></>\n  }\n\n  if (!isButton) {\n    return (\n      <div\n        {...divProps}\n        className={clx(\"flex items-center justify-center\", divProps.className)}\n      />\n    )\n  }\n\n  const {\n    children: buttonChildren,\n    className: buttonClassName,\n    ...buttonPropsRest\n  } = buttonProps\n\n  return (\n    <button\n      ref={ref}\n      {...buttonPropsRest}\n      className={clx(\"relative\", buttonClassName)}\n    >\n      {buttonChildren}\n      {today && (\n        <span\n          className={clx(\n            \"absolute right-[5px] top-[5px] h-1 w-1 rounded-full\",\n            {\n              \"bg-ui-fg-interactive\": !selected,\n              \"bg-ui-fg-on-color\": selected,\n              \"!bg-ui-fg-interactive\": selected && range_middle,\n              \"bg-ui-fg-disabled\": disabled,\n            }\n          )}\n        />\n      )}\n    </button>\n  )\n}\n\nexport { Calendar }\n"]}
+{"version":3,"file":"calendar.js","sourceRoot":"","sources":["../../../../src/components/calendar/calendar.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\n\nimport { ChevronLeftMini, ChevronRightMini } from \"@medusajs/icons\"\nimport * as React from \"react\"\nimport {\n  DayPicker,\n  useDayRender,\n  type DayPickerRangeProps,\n  type DayPickerSingleProps,\n  type DayProps,\n} from \"react-day-picker\"\n\nimport { clx } from \"@/utils/clx\"\nimport { iconButtonVariants } from \"../icon-button\"\n\ntype OmitKeys<T, K extends keyof T> = {\n  [P in keyof T as P extends K ? never : P]: T[P]\n}\n\ntype KeysToOmit = \"showWeekNumber\" | \"captionLayout\" | \"mode\"\n\ntype SingleProps = OmitKeys<DayPickerSingleProps, KeysToOmit>\ntype RangeProps = OmitKeys<DayPickerRangeProps, KeysToOmit>\n\ntype CalendarProps =\n  | ({\n      mode: \"single\"\n    } & SingleProps)\n  | ({\n      mode?: undefined\n    } & SingleProps)\n  | ({\n      mode: \"range\"\n    } & RangeProps)\n\nconst Calendar = ({\n  className,\n  classNames,\n  mode = \"single\",\n  showOutsideDays = true,\n  ...props\n}: CalendarProps) => {\n  return (\n    <DayPicker\n      mode={mode}\n      showOutsideDays={showOutsideDays}\n      className={clx(className)}\n      classNames={{\n        months: \"flex flex-col sm:flex-row\",\n        month: \"space-y-2 p-3\",\n        caption: \"flex justify-center relative items-center h-9\",\n        caption_label:\n          \"txt-compact-small-plus absolute bottom-0 left-0 right-0 top-1 flex items-center justify-center text-ui-fg-base\",\n        nav: \"space-x-1 flex items-center bg-ui-bg-base-pressed rounded-md w-full h-full justify-between p-0.5\",\n        nav_button: clx(\n          iconButtonVariants({ variant: \"primary\", size: \"base\" })\n        ),\n        nav_button_previous: \"!absolute left-0.5\",\n        nav_button_next: \"!absolute right-0.5\",\n        table: \"w-full border-collapse space-y-1\",\n        head_row: \"flex w-full gap-x-2\",\n        head_cell: clx(\n          \"txt-compact-small-plus text-ui-fg-muted m-0 box-border flex h-8 w-8 items-center justify-center p-0\"\n        ),\n        row: \"flex w-full mt-2 gap-x-2\",\n        cell: \"txt-compact-small-plus relative rounded-md p-0 text-center focus-within:relative\",\n        day: \"txt-compact-small-plus text-ui-fg-base bg-ui-bg-base border-ui-bg-base hover:bg-ui-bg-base-hover focus:!border-ui-border-interactive focus:shadow-borders-focus h-8 w-8 rounded-md border p-0 text-center outline-none transition-all\",\n        day_selected:\n          \"bg-ui-bg-interactive text-ui-fg-on-color hover:bg-ui-bg-interactive focus:bg-ui-bg-interactive\",\n        day_outside: \"text-ui-fg-disabled aria-selected:text-ui-fg-on-color\",\n        day_disabled: \"text-ui-fg-disabled\",\n        day_range_middle:\n          \"aria-selected:!bg-ui-bg-highlight aria-selected:!text-ui-fg-interactive\",\n        day_hidden: \"invisible\",\n        ...classNames,\n      }}\n      components={{\n        IconLeft: () => <ChevronLeftMini />,\n        IconRight: () => <ChevronRightMini />,\n        Day: Day,\n      }}\n      {...(props as SingleProps & RangeProps)}\n    />\n  )\n}\nCalendar.displayName = \"Calendar\"\n\nconst Day = ({ date, displayMonth }: DayProps) => {\n  const ref = React.useRef<HTMLButtonElement>(null)\n  const { activeModifiers, buttonProps, divProps, isButton, isHidden } =\n    useDayRender(date, displayMonth, ref)\n\n  const { selected, today, disabled, range_middle } = activeModifiers\n\n  React.useEffect(() => {\n    if (selected) {\n      ref.current?.focus()\n    }\n  }, [selected])\n\n  if (isHidden) {\n    return <></>\n  }\n\n  if (!isButton) {\n    return (\n      <div\n        {...divProps}\n        className={clx(\"flex items-center justify-center\", divProps.className)}\n      />\n    )\n  }\n\n  const {\n    children: buttonChildren,\n    className: buttonClassName,\n    ...buttonPropsRest\n  } = buttonProps\n\n  return (\n    <button\n      ref={ref}\n      {...buttonPropsRest}\n      type=\"button\"\n      className={clx(\"relative\", buttonClassName)}\n    >\n      {buttonChildren}\n      {today && (\n        <span\n          className={clx(\n            \"absolute right-[5px] top-[5px] h-1 w-1 rounded-full\",\n            {\n              \"bg-ui-fg-interactive\": !selected,\n              \"bg-ui-fg-on-color\": selected,\n              \"!bg-ui-fg-interactive\": selected && range_middle,\n              \"bg-ui-fg-disabled\": disabled,\n            }\n          )}\n        />\n      )}\n    </button>\n  )\n}\n\nexport { Calendar }\n"]}

package/dist/esm/components/code-block/code-block.d.ts

@@ -1,8 +1,9 @@
-import React from "react";
+import * as React from "react";
 export type CodeSnippet = {
     label: string;
     language: string;
     code: string;
+    hideLineNumbers?: boolean;
 };
 type RootProps = {
     snippets: CodeSnippet[];
@@ -10,11 +11,8 @@ type RootProps = {
 type HeaderProps = {
     hideLabels?: boolean;
 };
-type BodyProps = {
-    hideLineNumbers?: boolean;
-};
 declare const CodeBlock: (({ snippets, className, children, ...props }: React.HTMLAttributes<HTMLDivElement> & RootProps) => React.JSX.Element) & {
-    Body: ({ className, hideLineNumbers, ...props }: React.HTMLAttributes<HTMLDivElement> & BodyProps) => React.JSX.Element;
+    Body: ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => React.JSX.Element;
     Header: (({ children, className, hideLabels, ...props }: React.HTMLAttributes<HTMLDivElement> & HeaderProps) => React.JSX.Element) & {
         Meta: ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => React.JSX.Element;
     };

package/dist/esm/components/code-block/code-block.js

@@ -1,17 +1,17 @@
 "use client";
+import { Highlight, themes } from "prism-react-renderer";
+import * as React from "react";
 import { Copy } from "../copy";
 import { clx } from "../../utils/clx";
-import { Highlight, themes } from "prism-react-renderer";
-import React, { createContext, useContext, useState } from "react";
-const CodeBlockContext = createContext(null);
+const CodeBlockContext = React.createContext(null);
 const useCodeBlockContext = () => {
-    const context = useContext(CodeBlockContext);
+    const context = React.useContext(CodeBlockContext);
     if (context === null)
         throw new Error("useCodeBlockContext can only be used within a CodeBlockContext");
     return context;
 };
 const Root = ({ snippets, className, children, ...props }) => {
-    const [active, setActive] = useState(snippets[0]);
+    const [active, setActive] = React.useState(snippets[0]);
     return (React.createElement(CodeBlockContext.Provider, { value: { snippets, active, setActive } },
         React.createElement("div", { className: clx("border-ui-code-border overflow-hidden rounded-lg border", className), ...props }, children)));
 };
@@ -28,7 +28,7 @@ const Meta = ({ className, ...props }) => {
     return (React.createElement("div", { className: clx("text-ui-code-text-subtle ml-auto", className), ...props }));
 };
 const Header = Object.assign(HeaderComponent, { Meta });
-const Body = ({ className, hideLineNumbers = false, ...props }) => {
+const Body = ({ className, ...props }) => {
     const { active } = useCodeBlockContext();
     return (React.createElement("div", { className: clx("bg-ui-code-bg-base relative p-4", className), ...props },
         React.createElement(Copy, { content: active.code, className: "text-ui-code-icon absolute right-4 top-4" }),
@@ -58,7 +58,7 @@ const Body = ({ className, hideLineNumbers = false, ...props }) => {
                     ...style,
                     background: "transparent",
                 } }, tokens.map((line, i) => (React.createElement("div", { key: i, ...getLineProps({ line }), className: "flex" },
-                !hideLineNumbers && (React.createElement("span", { className: "text-ui-code-text-subtle" }, i + 1)),
+                !active.hideLineNumbers && (React.createElement("span", { className: "text-ui-code-text-subtle" }, i + 1)),
                 React.createElement("div", { className: "pl-4" }, line.map((token, key) => (React.createElement("span", { key: key, ...getTokenProps({ token }) })))))))))))));
 };
 const CodeBlock = Object.assign(Root, { Body, Header, Meta });

package/dist/esm/components/code-block/code-block.js.map

@@ -1 +1 @@
-{"version":3,"file":"code-block.js","sourceRoot":"","sources":["../../../../src/components/code-block/code-block.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\n\nimport { Copy } from \"@/components/copy\"\nimport { clx } from \"@/utils/clx\"\nimport { Highlight, themes } from \"prism-react-renderer\"\nimport React, { createContext, useContext, useState } from \"react\"\n\nexport type CodeSnippet = {\n  label: string\n  language: string\n  code: string\n}\n\ntype CodeBlockState = {\n  snippets: CodeSnippet[]\n  active: CodeSnippet\n  setActive: (active: CodeSnippet) => void\n} | null\n\nconst CodeBlockContext = createContext<CodeBlockState>(null)\n\nconst useCodeBlockContext = () => {\n  const context = useContext(CodeBlockContext)\n\n  if (context === null)\n    throw new Error(\n      \"useCodeBlockContext can only be used within a CodeBlockContext\"\n    )\n\n  return context\n}\n\ntype RootProps = {\n  snippets: CodeSnippet[]\n}\n\nconst Root = ({\n  snippets,\n  className,\n  children,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement> & RootProps) => {\n  const [active, setActive] = useState(snippets[0])\n\n  return (\n    <CodeBlockContext.Provider value={{ snippets, active, setActive }}>\n      <div\n        className={clx(\n          \"border-ui-code-border overflow-hidden rounded-lg border\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </CodeBlockContext.Provider>\n  )\n}\n\ntype HeaderProps = {\n  hideLabels?: boolean\n}\n\nconst HeaderComponent = ({\n  children,\n  className,\n  hideLabels = false,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement> & HeaderProps) => {\n  const { snippets, active, setActive } = useCodeBlockContext()\n  return (\n    <div\n      className={clx(\n        \"border-b-ui-code-border bg-ui-code-bg-header flex items-center gap-2 border-b px-4 py-3\",\n        className\n      )}\n      {...props}\n    >\n      {!hideLabels &&\n        snippets.map((snippet) => (\n          <div\n            className={clx(\n              \"text-ui-code-text-subtle txt-compact-small-plus cursor-pointer rounded-full border border-transparent px-3 py-2 transition-all\",\n              {\n                \"text-ui-code-text-base border-ui-code-border bg-ui-code-bg-base cursor-default\":\n                  active.label === snippet.label,\n              }\n            )}\n            key={snippet.label}\n            onClick={() => setActive(snippet)}\n          >\n            {snippet.label}\n          </div>\n        ))}\n      {children}\n    </div>\n  )\n}\n\nconst Meta = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => {\n  return (\n    <div\n      className={clx(\"text-ui-code-text-subtle ml-auto\", className)}\n      {...props}\n    />\n  )\n}\n\nconst Header = Object.assign(HeaderComponent, { Meta })\n\ntype BodyProps = {\n  hideLineNumbers?: boolean\n}\n\nconst Body = ({\n  className,\n  hideLineNumbers = false,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement> & BodyProps) => {\n  const { active } = useCodeBlockContext()\n  return (\n    <div\n      className={clx(\"bg-ui-code-bg-base relative p-4\", className)}\n      {...props}\n    >\n      <Copy\n        content={active.code}\n        className=\"text-ui-code-icon absolute right-4 top-4\"\n      />\n      <div className=\"max-w-[90%]\">\n        <Highlight\n          theme={{\n            ...themes.palenight,\n            plain: {\n              color: \"rgba(249, 250, 251, 1)\",\n              backgroundColor: \"#111827\",\n            },\n            styles: [\n              {\n                types: [\"keyword\"],\n                style: {\n                  color: \"var(--fg-on-color)\",\n                },\n              },\n              {\n                types: [\"maybe-class-name\"],\n                style: {\n                  color: \"rgb(255, 203, 107)\",\n                },\n              },\n              ...themes.palenight.styles,\n            ],\n          }}\n          code={active.code}\n          language={active.language}\n        >\n          {({ style, tokens, getLineProps, getTokenProps }) => (\n            <pre\n              className=\"txt-compact-small whitespace-pre-wrap bg-transparent font-mono\"\n              style={{\n                ...style,\n                background: \"transparent\",\n              }}\n            >\n              {tokens.map((line, i) => (\n                <div key={i} {...getLineProps({ line })} className=\"flex\">\n                  {!hideLineNumbers && (\n                    <span className=\"text-ui-code-text-subtle\">{i + 1}</span>\n                  )}\n                  <div className=\"pl-4\">\n                    {line.map((token, key) => (\n                      <span key={key} {...getTokenProps({ token })} />\n                    ))}\n                  </div>\n                </div>\n              ))}\n            </pre>\n          )}\n        </Highlight>\n      </div>\n    </div>\n  )\n}\n\nconst CodeBlock = Object.assign(Root, { Body, Header, Meta })\n\nexport { CodeBlock }\n"]}
+{"version":3,"file":"code-block.js","sourceRoot":"","sources":["../../../../src/components/code-block/code-block.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\nimport { Highlight, themes } from \"prism-react-renderer\"\nimport * as React from \"react\"\n\nimport { Copy } from \"@/components/copy\"\nimport { clx } from \"@/utils/clx\"\n\nexport type CodeSnippet = {\n  label: string\n  language: string\n  code: string\n  hideLineNumbers?: boolean\n}\n\ntype CodeBlockState = {\n  snippets: CodeSnippet[]\n  active: CodeSnippet\n  setActive: (active: CodeSnippet) => void\n} | null\n\nconst CodeBlockContext = React.createContext<CodeBlockState>(null)\n\nconst useCodeBlockContext = () => {\n  const context = React.useContext(CodeBlockContext)\n\n  if (context === null)\n    throw new Error(\n      \"useCodeBlockContext can only be used within a CodeBlockContext\"\n    )\n\n  return context\n}\n\ntype RootProps = {\n  snippets: CodeSnippet[]\n}\n\nconst Root = ({\n  snippets,\n  className,\n  children,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement> & RootProps) => {\n  const [active, setActive] = React.useState(snippets[0])\n\n  return (\n    <CodeBlockContext.Provider value={{ snippets, active, setActive }}>\n      <div\n        className={clx(\n          \"border-ui-code-border overflow-hidden rounded-lg border\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </CodeBlockContext.Provider>\n  )\n}\n\ntype HeaderProps = {\n  hideLabels?: boolean\n}\n\nconst HeaderComponent = ({\n  children,\n  className,\n  hideLabels = false,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement> & HeaderProps) => {\n  const { snippets, active, setActive } = useCodeBlockContext()\n  return (\n    <div\n      className={clx(\n        \"border-b-ui-code-border bg-ui-code-bg-header flex items-center gap-2 border-b px-4 py-3\",\n        className\n      )}\n      {...props}\n    >\n      {!hideLabels &&\n        snippets.map((snippet) => (\n          <div\n            className={clx(\n              \"text-ui-code-text-subtle txt-compact-small-plus cursor-pointer rounded-full border border-transparent px-3 py-2 transition-all\",\n              {\n                \"text-ui-code-text-base border-ui-code-border bg-ui-code-bg-base cursor-default\":\n                  active.label === snippet.label,\n              }\n            )}\n            key={snippet.label}\n            onClick={() => setActive(snippet)}\n          >\n            {snippet.label}\n          </div>\n        ))}\n      {children}\n    </div>\n  )\n}\n\nconst Meta = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => {\n  return (\n    <div\n      className={clx(\"text-ui-code-text-subtle ml-auto\", className)}\n      {...props}\n    />\n  )\n}\n\nconst Header = Object.assign(HeaderComponent, { Meta })\n\nconst Body = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => {\n  const { active } = useCodeBlockContext()\n  return (\n    <div\n      className={clx(\"bg-ui-code-bg-base relative p-4\", className)}\n      {...props}\n    >\n      <Copy\n        content={active.code}\n        className=\"text-ui-code-icon absolute right-4 top-4\"\n      />\n      <div className=\"max-w-[90%]\">\n        <Highlight\n          theme={{\n            ...themes.palenight,\n            plain: {\n              color: \"rgba(249, 250, 251, 1)\",\n              backgroundColor: \"#111827\",\n            },\n            styles: [\n              {\n                types: [\"keyword\"],\n                style: {\n                  color: \"var(--fg-on-color)\",\n                },\n              },\n              {\n                types: [\"maybe-class-name\"],\n                style: {\n                  color: \"rgb(255, 203, 107)\",\n                },\n              },\n              ...themes.palenight.styles,\n            ],\n          }}\n          code={active.code}\n          language={active.language}\n        >\n          {({ style, tokens, getLineProps, getTokenProps }) => (\n            <pre\n              className=\"txt-compact-small whitespace-pre-wrap bg-transparent font-mono\"\n              style={{\n                ...style,\n                background: \"transparent\",\n              }}\n            >\n              {tokens.map((line, i) => (\n                <div key={i} {...getLineProps({ line })} className=\"flex\">\n                  {!active.hideLineNumbers && (\n                    <span className=\"text-ui-code-text-subtle\">{i + 1}</span>\n                  )}\n                  <div className=\"pl-4\">\n                    {line.map((token, key) => (\n                      <span key={key} {...getTokenProps({ token })} />\n                    ))}\n                  </div>\n                </div>\n              ))}\n            </pre>\n          )}\n        </Highlight>\n      </div>\n    </div>\n  )\n}\n\nconst CodeBlock = Object.assign(Root, { Body, Header, Meta })\n\nexport { CodeBlock }\n"]}

package/dist/esm/components/command-bar/command-bar.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+type CommandBarProps = React.PropsWithChildren<{
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    defaultOpen?: boolean;
+    disableAutoFocus?: boolean;
+}>;
+interface CommandProps extends Omit<React.ComponentPropsWithoutRef<"button">, "children" | "onClick"> {
+    action: () => void | Promise<void>;
+    label: string;
+    shortcut: string;
+}
+declare const CommandBar: {
+    ({ open, onOpenChange, defaultOpen, disableAutoFocus, children, }: CommandBarProps): React.JSX.Element;
+    displayName: string;
+} & {
+    Command: React.ForwardRefExoticComponent<CommandProps & React.RefAttributes<HTMLButtonElement>>;
+    Value: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Bar: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Seperator: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "children"> & React.RefAttributes<HTMLDivElement>>;
+};
+export { CommandBar };

package/dist/esm/components/command-bar/command-bar.js

@@ -0,0 +1,59 @@
+"use client";
+import * as Popover from "@radix-ui/react-popover";
+import * as Portal from "@radix-ui/react-portal";
+import * as React from "react";
+import { Kbd } from "../kbd";
+import { clx } from "../../utils/clx";
+const Root = ({ open = false, onOpenChange, defaultOpen = false, disableAutoFocus = true, children, }) => {
+    return (React.createElement(Popover.Root, { open: open, onOpenChange: onOpenChange, defaultOpen: defaultOpen },
+        React.createElement(Portal.Root, null,
+            React.createElement(Popover.Anchor, { className: clx("fixed bottom-8 left-1/2 h-px w-px -translate-x-1/2") })),
+        React.createElement(Popover.Portal, null,
+            React.createElement(Popover.Content, { side: "top", sideOffset: 0, onOpenAutoFocus: (e) => {
+                    if (disableAutoFocus) {
+                        e.preventDefault();
+                    }
+                }, className: clx("data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2") }, children))));
+};
+Root.displayName = "CommandBar";
+const Value = React.forwardRef(({ className, ...props }, ref) => {
+    return (React.createElement("div", { ref: ref, className: clx("txt-compact-small-plus text-ui-fg-subtle px-3 py-2.5", className), ...props }));
+});
+Value.displayName = "CommandBar.Value";
+const Bar = React.forwardRef(({ className, ...props }, ref) => {
+    return (React.createElement("div", { ref: ref, className: clx("relatove bg-ui-bg-base flex items-center overflow-hidden rounded-full px-1", "after:shadow-elevation-modal after:pointer-events-none after:absolute after:inset-0 after:rounded-full after:content-['']", className), ...props }));
+});
+Bar.displayName = "CommandBar.Bar";
+const Seperator = React.forwardRef(({ className, ...props }, ref) => {
+    return (React.createElement("div", { ref: ref, className: clx("bg-ui-border-base h-10 w-px", className), ...props }));
+});
+Seperator.displayName = "CommandBar.Seperator";
+const Command = React.forwardRef(({ className, type = "button", label, action, shortcut, disabled, ...props }, ref) => {
+    React.useEffect(() => {
+        const handleKeyDown = (event) => {
+            if (event.key === shortcut) {
+                event.preventDefault();
+                event.stopPropagation();
+                action();
+            }
+        };
+        if (!disabled) {
+            document.addEventListener("keydown", handleKeyDown);
+        }
+        return () => {
+            document.removeEventListener("keydown", handleKeyDown);
+        };
+    }, [action, shortcut, disabled]);
+    return (React.createElement("button", { ref: ref, className: clx("bg-ui-bg-base txt-compact-small-plus transition-fg text-ui-fg-base flex items-center gap-x-2 px-3 py-2.5 outline-none", "focus:bg-ui-bg-highlight focus:hover:bg-ui-bg-base-hover hover:bg-ui-bg-base-hover active:bg-ui-bg-base-pressed focus:active:bg-ui-bg-base-pressed disabled:!bg-ui-bg-disabled disabled:!text-ui-fg-disabled", "last-of-type:-mr-1 last-of-type:pr-4", className), type: type, onClick: action, ...props },
+        React.createElement("span", null, label),
+        React.createElement(Kbd, null, shortcut.toUpperCase())));
+});
+Command.displayName = "CommandBar.Command";
+const CommandBar = Object.assign(Root, {
+    Command,
+    Value,
+    Bar,
+    Seperator,
+});
+export { CommandBar };
+//# sourceMappingURL=command-bar.js.map

package/dist/esm/components/command-bar/command-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"command-bar.js","sourceRoot":"","sources":["../../../../src/components/command-bar/command-bar.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\n\nimport * as Popover from \"@radix-ui/react-popover\"\nimport * as Portal from \"@radix-ui/react-portal\"\nimport * as React from \"react\"\n\nimport { Kbd } from \"@/components/kbd\"\nimport { clx } from \"@/utils/clx\"\n\ntype CommandBarProps = React.PropsWithChildren<{\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n  defaultOpen?: boolean\n  disableAutoFocus?: boolean\n}>\n\nconst Root = ({\n  open = false,\n  onOpenChange,\n  defaultOpen = false,\n  disableAutoFocus = true,\n  children,\n}: CommandBarProps) => {\n  return (\n    <Popover.Root\n      open={open}\n      onOpenChange={onOpenChange}\n      defaultOpen={defaultOpen}\n    >\n      <Portal.Root>\n        <Popover.Anchor\n          className={clx(\"fixed bottom-8 left-1/2 h-px w-px -translate-x-1/2\")}\n        />\n      </Portal.Root>\n      <Popover.Portal>\n        <Popover.Content\n          side=\"top\"\n          sideOffset={0}\n          onOpenAutoFocus={(e) => {\n            if (disableAutoFocus) {\n              e.preventDefault()\n            }\n          }}\n          className={clx(\n            \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\"\n          )}\n        >\n          {children}\n        </Popover.Content>\n      </Popover.Portal>\n    </Popover.Root>\n  )\n}\nRoot.displayName = \"CommandBar\"\n\nconst Value = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentPropsWithoutRef<\"div\">\n>(({ className, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      className={clx(\n        \"txt-compact-small-plus text-ui-fg-subtle px-3 py-2.5\",\n        className\n      )}\n      {...props}\n    />\n  )\n})\nValue.displayName = \"CommandBar.Value\"\n\nconst Bar = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentPropsWithoutRef<\"div\">\n>(({ className, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      className={clx(\n        \"relatove bg-ui-bg-base flex items-center overflow-hidden rounded-full px-1\",\n        \"after:shadow-elevation-modal after:pointer-events-none after:absolute after:inset-0 after:rounded-full after:content-['']\",\n        className\n      )}\n      {...props}\n    />\n  )\n})\nBar.displayName = \"CommandBar.Bar\"\n\nconst Seperator = React.forwardRef<\n  HTMLDivElement,\n  Omit<React.ComponentPropsWithoutRef<\"div\">, \"children\">\n>(({ className, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      className={clx(\"bg-ui-border-base h-10 w-px\", className)}\n      {...props}\n    />\n  )\n})\nSeperator.displayName = \"CommandBar.Seperator\"\n\ninterface CommandProps\n  extends Omit<\n    React.ComponentPropsWithoutRef<\"button\">,\n    \"children\" | \"onClick\"\n  > {\n  action: () => void | Promise<void>\n  label: string\n  shortcut: string\n}\n\nconst Command = React.forwardRef<HTMLButtonElement, CommandProps>(\n  (\n    { className, type = \"button\", label, action, shortcut, disabled, ...props },\n    ref\n  ) => {\n    React.useEffect(() => {\n      const handleKeyDown = (event: KeyboardEvent) => {\n        if (event.key === shortcut) {\n          event.preventDefault()\n          event.stopPropagation()\n          action()\n        }\n      }\n\n      if (!disabled) {\n        document.addEventListener(\"keydown\", handleKeyDown)\n      }\n\n      return () => {\n        document.removeEventListener(\"keydown\", handleKeyDown)\n      }\n    }, [action, shortcut, disabled])\n\n    return (\n      <button\n        ref={ref}\n        className={clx(\n          \"bg-ui-bg-base txt-compact-small-plus transition-fg text-ui-fg-base flex items-center gap-x-2 px-3 py-2.5 outline-none\",\n          \"focus:bg-ui-bg-highlight focus:hover:bg-ui-bg-base-hover hover:bg-ui-bg-base-hover active:bg-ui-bg-base-pressed focus:active:bg-ui-bg-base-pressed disabled:!bg-ui-bg-disabled disabled:!text-ui-fg-disabled\",\n          \"last-of-type:-mr-1 last-of-type:pr-4\",\n          className\n        )}\n        type={type}\n        onClick={action}\n        {...props}\n      >\n        <span>{label}</span>\n        <Kbd>{shortcut.toUpperCase()}</Kbd>\n      </button>\n    )\n  }\n)\nCommand.displayName = \"CommandBar.Command\"\n\nconst CommandBar = Object.assign(Root, {\n  Command,\n  Value,\n  Bar,\n  Seperator,\n})\n\nexport { CommandBar }\n"]}

package/dist/esm/components/command-bar/index.d.ts

@@ -0,0 +1 @@
+export * from "./command-bar";

package/dist/esm/components/command-bar/index.js

@@ -0,0 +1,2 @@
+export * from "./command-bar";
+//# sourceMappingURL=index.js.map

package/dist/esm/components/command-bar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/command-bar/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAA","sourcesContent":["export * from \"./command-bar\"\n"]}

package/dist/esm/components/container/container.d.ts

@@ -1,3 +1,3 @@
 import * as React from "react";
-declare const Container: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const Container: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { Container };

package/dist/esm/components/container/container.js.map

@@ -1 +1 @@
-{"version":3,"file":"container.js","sourceRoot":"","sources":["../../../../src/components/container/container.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAA;AAEjC,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CAGhC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACjC,OAAO,CACL,6BACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,GAAG,CACZ,2EAA2E,EAC3E,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAA;AACH,CAAC,CAAC,CAAA;AACF,SAAS,CAAC,WAAW,GAAG,WAAW,CAAA;AAEnC,OAAO,EAAE,SAAS,EAAE,CAAA","sourcesContent":["import * as React from \"react\"\n\nimport { clx } from \"@/utils/clx\"\n\nconst Container = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      className={clx(\n        \"shadow-elevation-card-rest bg-ui-bg-base w-full rounded-lg px-8 pb-8 pt-6\",\n        className\n      )}\n      {...props}\n    />\n  )\n})\nContainer.displayName = \"Container\"\n\nexport { Container }\n"]}
+{"version":3,"file":"container.js","sourceRoot":"","sources":["../../../../src/components/container/container.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAA;AAEjC,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CAGhC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACjC,OAAO,CACL,6BACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,GAAG,CACZ,2EAA2E,EAC3E,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAA;AACH,CAAC,CAAC,CAAA;AACF,SAAS,CAAC,WAAW,GAAG,WAAW,CAAA;AAEnC,OAAO,EAAE,SAAS,EAAE,CAAA","sourcesContent":["import * as React from \"react\"\n\nimport { clx } from \"@/utils/clx\"\n\nconst Container = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentPropsWithoutRef<\"div\">\n>(({ className, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      className={clx(\n        \"shadow-elevation-card-rest bg-ui-bg-base w-full rounded-lg px-8 pb-8 pt-6\",\n        className\n      )}\n      {...props}\n    />\n  )\n})\nContainer.displayName = \"Container\"\n\nexport { Container }\n"]}

package/dist/esm/components/currency-input/currency-input.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+import Primitive from "react-currency-input-field";
+import { VariantProps } from "class-variance-authority";
+declare const currencyInputVariants: (props?: ({
+    size?: "base" | "small" | null | undefined;
+} & ({
+    class: import("clsx").ClassValue;
+    className?: undefined;
+} | {
+    class?: undefined;
+    className: import("clsx").ClassValue;
+} | {
+    class?: undefined;
+    className?: undefined;
+})) | undefined) => string;
+interface CurrencyInputProps extends Omit<React.ComponentPropsWithoutRef<typeof Primitive>, "prefix" | "suffix" | "size">, VariantProps<typeof currencyInputVariants> {
+    symbol: string;
+    code: string;
+}
+declare const CurrencyInput: React.ForwardRefExoticComponent<CurrencyInputProps & React.RefAttributes<HTMLInputElement>>;
+export { CurrencyInput };

package/dist/esm/components/currency-input/currency-input.js

@@ -0,0 +1,50 @@
+"use client";
+import * as React from "react";
+import Primitive from "react-currency-input-field";
+import { Text } from "../text";
+import { clx } from "../../utils/clx";
+import { cva } from "class-variance-authority";
+const currencyInputVariants = cva(clx("flex items-center gap-x-1", "bg-ui-bg-field hover:bg-ui-bg-field-hover border-ui-border-base shadow-buttons-neutral placeholder-ui-fg-muted text-ui-fg-base transition-fg relative w-full rounded-md border", "focus-within:border-ui-border-interactive focus-within:shadow-borders-active"), {
+    variants: {
+        size: {
+            base: "txt-compact-medium h-10 px-3",
+            small: "txt-compact-small h-8 px-2",
+        },
+    },
+    defaultVariants: {
+        size: "base",
+    },
+});
+const CurrencyInput = React.forwardRef(({ size = "base", symbol, code, disabled, onInvalid, className, ...props }, ref) => {
+    const innerRef = React.useRef(null);
+    React.useImperativeHandle(ref, () => innerRef.current);
+    const [valid, setValid] = React.useState(true);
+    const onInnerInvalid = React.useCallback((event) => {
+        setValid(event.currentTarget.validity.valid);
+        if (onInvalid) {
+            onInvalid(event);
+        }
+    }, [onInvalid]);
+    return (React.createElement("div", { onClick: () => {
+            if (innerRef.current) {
+                innerRef.current.focus();
+            }
+        }, className: clx("w-full cursor-text justify-between overflow-hidden", currencyInputVariants({ size }), {
+            "text-ui-fg-disabled !bg-ui-bg-disabled !border-ui-border-base placeholder-ui-fg-disabled cursor-not-allowed !shadow-none": disabled,
+            "border-ui-border-error focus-within:!shadow-borders-error invalid:focus:!shadow-borders-error": props["aria-invalid"] || !valid,
+        }, className) },
+        React.createElement("span", { className: clx("w-fit", {
+                "py-[9px]": size === "base",
+                "py-[5px]": size === "small",
+            }), role: "presentation" },
+            React.createElement(Text, { className: "text-ui-fg-muted pointer-events-none select-none uppercase" }, code)),
+        React.createElement(Primitive, { className: "h-full min-w-0 flex-1 appearance-none bg-transparent text-right outline-none", disabled: disabled, onInvalid: onInnerInvalid, ref: innerRef, ...props }),
+        React.createElement("span", { className: clx("w-fit min-w-[16px] text-right", {
+                "py-[9px]": size === "base",
+                "py-[5px]": size === "small",
+            }), role: "presentation" },
+            React.createElement(Text, { className: "text-ui-fg-muted pointer-events-none select-none" }, symbol))));
+});
+CurrencyInput.displayName = "CurrencyInput";
+export { CurrencyInput };
+//# sourceMappingURL=currency-input.js.map

package/dist/esm/components/currency-input/currency-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"currency-input.js","sourceRoot":"","sources":["../../../../src/components/currency-input/currency-input.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,SAAS,MAAM,4BAA4B,CAAA;AAElD,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAA;AACxC,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAA;AACjC,OAAO,EAAgB,GAAG,EAAE,MAAM,0BAA0B,CAAA;AAE5D,MAAM,qBAAqB,GAAG,GAAG,CAC/B,GAAG,CACD,2BAA2B,EAC3B,gLAAgL,EAChL,8EAA8E,CAC/E,EACD;IACE,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,IAAI,EAAE,8BAA8B;YACpC,KAAK,EAAE,4BAA4B;SACpC;KACF;IACD,eAAe,EAAE;QACf,IAAI,EAAE,MAAM;KACb;CACF,CACF,CAAA;AAYD,MAAM,aAAa,GAAG,KAAK,CAAC,UAAU,CACpC,CACE,EAAE,IAAI,GAAG,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EACzE,GAAG,EACH,EAAE;IACF,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAmB,IAAI,CAAC,CAAA;IAErD,KAAK,CAAC,mBAAmB,CACvB,GAAG,EACH,GAAG,EAAE,CAAC,QAAQ,CAAC,OAAO,CACvB,CAAA;IAED,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAA;IAE9C,MAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CACtC,CAAC,KAAwC,EAAE,EAAE;QAC3C,QAAQ,CAAC,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;QAE5C,IAAI,SAAS,EAAE;YACb,SAAS,CAAC,KAAK,CAAC,CAAA;SACjB;IACH,CAAC,EACD,CAAC,SAAS,CAAC,CACZ,CAAA;IAED,OAAO,CACL,6BACE,OAAO,EAAE,GAAG,EAAE;YACZ,IAAI,QAAQ,CAAC,OAAO,EAAE;gBACpB,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,CAAA;aACzB;QACH,CAAC,EACD,SAAS,EAAE,GAAG,CACZ,oDAAoD,EACpD,qBAAqB,CAAC,EAAE,IAAI,EAAE,CAAC,EAC/B;YACE,0HAA0H,EACxH,QAAQ;YACV,+FAA+F,EAC7F,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK;SAClC,EACD,SAAS,CACV;QAED,8BACE,SAAS,EAAE,GAAG,CAAC,OAAO,EAAE;gBACtB,UAAU,EAAE,IAAI,KAAK,MAAM;gBAC3B,UAAU,EAAE,IAAI,KAAK,OAAO;aAC7B,CAAC,EACF,IAAI,EAAC,cAAc;YAEnB,oBAAC,IAAI,IAAC,SAAS,EAAC,4DAA4D,IACzE,IAAI,CACA,CACF;QACP,oBAAC,SAAS,IACR,SAAS,EAAC,8EAA8E,EACxF,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,cAAc,EACzB,GAAG,EAAE,QAAQ,KACT,KAAK,GACT;QACF,8BACE,SAAS,EAAE,GAAG,CAAC,+BAA+B,EAAE;gBAC9C,UAAU,EAAE,IAAI,KAAK,MAAM;gBAC3B,UAAU,EAAE,IAAI,KAAK,OAAO;aAC7B,CAAC,EACF,IAAI,EAAC,cAAc;YAEnB,oBAAC,IAAI,IAAC,SAAS,EAAC,kDAAkD,IAC/D,MAAM,CACF,CACF,CACH,CACP,CAAA;AACH,CAAC,CACF,CAAA;AACD,aAAa,CAAC,WAAW,GAAG,eAAe,CAAA;AAE3C,OAAO,EAAE,aAAa,EAAE,CAAA","sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport Primitive from \"react-currency-input-field\"\n\nimport { Text } from \"@/components/text\"\nimport { clx } from \"@/utils/clx\"\nimport { VariantProps, cva } from \"class-variance-authority\"\n\nconst currencyInputVariants = cva(\n  clx(\n    \"flex items-center gap-x-1\",\n    \"bg-ui-bg-field hover:bg-ui-bg-field-hover border-ui-border-base shadow-buttons-neutral placeholder-ui-fg-muted text-ui-fg-base transition-fg relative w-full rounded-md border\",\n    \"focus-within:border-ui-border-interactive focus-within:shadow-borders-active\"\n  ),\n  {\n    variants: {\n      size: {\n        base: \"txt-compact-medium h-10 px-3\",\n        small: \"txt-compact-small h-8 px-2\",\n      },\n    },\n    defaultVariants: {\n      size: \"base\",\n    },\n  }\n)\n\ninterface CurrencyInputProps\n  extends Omit<\n      React.ComponentPropsWithoutRef<typeof Primitive>,\n      \"prefix\" | \"suffix\" | \"size\"\n    >,\n    VariantProps<typeof currencyInputVariants> {\n  symbol: string\n  code: string\n}\n\nconst CurrencyInput = React.forwardRef<HTMLInputElement, CurrencyInputProps>(\n  (\n    { size = \"base\", symbol, code, disabled, onInvalid, className, ...props },\n    ref\n  ) => {\n    const innerRef = React.useRef<HTMLInputElement>(null)\n\n    React.useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(\n      ref,\n      () => innerRef.current\n    )\n\n    const [valid, setValid] = React.useState(true)\n\n    const onInnerInvalid = React.useCallback(\n      (event: React.FormEvent<HTMLInputElement>) => {\n        setValid(event.currentTarget.validity.valid)\n\n        if (onInvalid) {\n          onInvalid(event)\n        }\n      },\n      [onInvalid]\n    )\n\n    return (\n      <div\n        onClick={() => {\n          if (innerRef.current) {\n            innerRef.current.focus()\n          }\n        }}\n        className={clx(\n          \"w-full cursor-text justify-between overflow-hidden\",\n          currencyInputVariants({ size }),\n          {\n            \"text-ui-fg-disabled !bg-ui-bg-disabled !border-ui-border-base placeholder-ui-fg-disabled cursor-not-allowed !shadow-none\":\n              disabled,\n            \"border-ui-border-error focus-within:!shadow-borders-error invalid:focus:!shadow-borders-error\":\n              props[\"aria-invalid\"] || !valid,\n          },\n          className\n        )}\n      >\n        <span\n          className={clx(\"w-fit\", {\n            \"py-[9px]\": size === \"base\",\n            \"py-[5px]\": size === \"small\",\n          })}\n          role=\"presentation\"\n        >\n          <Text className=\"text-ui-fg-muted pointer-events-none select-none uppercase\">\n            {code}\n          </Text>\n        </span>\n        <Primitive\n          className=\"h-full min-w-0 flex-1 appearance-none bg-transparent text-right outline-none\"\n          disabled={disabled}\n          onInvalid={onInnerInvalid}\n          ref={innerRef}\n          {...props}\n        />\n        <span\n          className={clx(\"w-fit min-w-[16px] text-right\", {\n            \"py-[9px]\": size === \"base\",\n            \"py-[5px]\": size === \"small\",\n          })}\n          role=\"presentation\"\n        >\n          <Text className=\"text-ui-fg-muted pointer-events-none select-none\">\n            {symbol}\n          </Text>\n        </span>\n      </div>\n    )\n  }\n)\nCurrencyInput.displayName = \"CurrencyInput\"\n\nexport { CurrencyInput }\n"]}

package/dist/esm/components/currency-input/index.d.ts

@@ -0,0 +1 @@
+export * from "./currency-input";

package/dist/esm/components/currency-input/index.js

@@ -0,0 +1,2 @@
+export * from "./currency-input";
+//# sourceMappingURL=index.js.map

package/dist/esm/components/currency-input/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/currency-input/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAA","sourcesContent":["export * from \"./currency-input\"\n"]}

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

@@ -1,5 +1,5 @@
 import * as React from "react";
-import type { DateRange } from "react-day-picker";
+import type { DateRange } from "../../types";
 interface Preset {
     label: string;
 }

package/dist/esm/components/date-picker/date-picker.js

@@ -5,7 +5,7 @@ import * as Primitives from "@radix-ui/react-popover";
 import { format } from "date-fns";
 import * as React from "react";
 import { Button } from "../button";
-import { Calendar } from "../calendar";
+import { Calendar as CalendarPrimitive } from "../calendar";
 import { TimeInput } from "../time-input";
 import { clx } from "../../utils/clx";
 import { isBrowserLocaleClockType24h } from "../../utils/is-browser-locale-hour-cycle-24h";
@@ -24,12 +24,13 @@ const displayVariants = cva(clx("text-ui-fg-base bg-ui-bg-field border-ui-border
 const Display = React.forwardRef(({ className, children, placeholder, size = "base", ...props }, ref) => {
     return (React.createElement(Primitives.Trigger, { asChild: true },
         React.createElement("button", { ref: ref, className: clx(displayVariants({ size }), className), ...props },
-            React.createElement(CalendarIcon, { className: "text-ui-fg-muted h-5 w-5" }),
-            React.createElement("span", { className: "w-full overflow-hidden text-ellipsis whitespace-nowrap text-left" }, children ? (children) : placeholder ? (React.createElement("span", { className: "text-ui-fg-muted" }, placeholder)) : null))));
+            React.createElement(CalendarIcon, { className: "text-ui-fg-muted" }),
+            React.createElement("span", { className: "flex-1 overflow-hidden text-ellipsis whitespace-nowrap text-left" }, children ? (children) : placeholder ? (React.createElement("span", { className: "text-ui-fg-muted" }, placeholder)) : null))));
 });
 Display.displayName = "DatePicker.Display";
 const Flyout = React.forwardRef(({ className, children, ...props }, ref) => {
-    return (React.createElement(Primitives.Content, { ref: ref, sideOffset: 8, align: "center", className: clx("txt-compact-small shadow-elevation-flyout bg-ui-bg-base z-30 rounded-lg", "animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95", "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className), ...props }, children));
+    return (React.createElement(Primitives.Portal, null,
+        React.createElement(Primitives.Content, { ref: ref, sideOffset: 8, align: "center", className: clx("txt-compact-small shadow-elevation-flyout bg-ui-bg-base w-fit rounded-lg", "animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95", "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className), ...props }, children)));
 });
 Flyout.displayName = "DatePicker.Flyout";
 const PresetContainer = ({ presets, onSelect, currentValue, }) => {
@@ -116,6 +117,13 @@ const SingleDatePicker = ({ defaultValue, value, size = "base", onChange, preset
         return date;
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [open]);
+    /**
+     * Update the date when the value changes.
+     */
+    React.useEffect(() => {
+        var _a;
+        setDate((_a = value !== null && value !== void 0 ? value : defaultValue) !== null && _a !== void 0 ? _a : undefined);
+    }, [value, defaultValue]);
     React.useEffect(() => {
         if (date) {
             setMonth(date);
@@ -160,7 +168,7 @@ const SingleDatePicker = ({ defaultValue, value, size = "base", onChange, preset
                         React.createElement("div", { className: "absolute inset-0 overflow-y-scroll p-3" },
                             React.createElement(PresetContainer, { currentValue: date, presets: presets, onSelect: handleDateChange })))),
                     React.createElement("div", null,
-                        React.createElement(Calendar, { mode: "single", month: month, onMonthChange: setMonth, selected: date, onSelect: handleDateChange, disabled: disabled, ...props }),
+                        React.createElement(CalendarPrimitive, { mode: "single", month: month, onMonthChange: setMonth, selected: date, onSelect: handleDateChange, disabled: disabled, ...props }),
                         showTimePicker && (React.createElement("div", { className: "border-ui-border-base border-t p-3" },
                             React.createElement(TimeInput, { "aria-label": "Time", onChange: handleTimeChange, isDisabled: !date, value: time, isRequired: props.required }))),
                         React.createElement("div", { className: "border-ui-border-base flex items-center gap-x-2 border-t p-3" },
@@ -187,6 +195,13 @@ const RangeDatePicker = ({ defaultValue, value, onChange, size = "base", showTim
         return range;
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [open]);
+    /**
+     * Update the range when the value changes.
+     */
+    React.useEffect(() => {
+        var _a;
+        setRange((_a = value !== null && value !== void 0 ? value : defaultValue) !== null && _a !== void 0 ? _a : undefined);
+    }, [value, defaultValue]);
     React.useEffect(() => {
         if (range) {
             setMonth(range.from);
@@ -244,31 +259,30 @@ const RangeDatePicker = ({ defaultValue, value, onChange, size = "base", showTim
     return (React.createElement(Primitives.Root, { open: open, onOpenChange: setOpen },
         React.createElement(Display, { placeholder: "Pick a date", disabled: disabled, className: className, "aria-required": props.required || props["aria-required"], "aria-invalid": props["aria-invalid"], "aria-label": props["aria-label"], "aria-labelledby": props["aria-labelledby"], size: size }, displayRange),
         React.createElement(Flyout, null,
-            React.createElement("div", { className: "flex" },
-                React.createElement("div", { className: "flex items-start" },
-                    presets && presets.length > 0 && (React.createElement("div", { className: "relative h-full w-[160px] border-r" },
-                        React.createElement("div", { className: "absolute inset-0 overflow-y-scroll p-3" },
-                            React.createElement(PresetContainer, { currentValue: range, presets: presets, onSelect: handleRangeChange })))),
-                    React.createElement("div", null,
-                        React.createElement(Calendar, { mode: "range", selected: range, onSelect: handleRangeChange, month: month, onMonthChange: setMonth, numberOfMonths: 2, disabled: disabled, classNames: {
-                                months: "flex flex-col sm:flex-row divide-y sm:divide-y-0 sm:divide-x divide-ui-border-base",
-                            }, ...props }),
-                        showTimePicker && (React.createElement("div", { className: "border-ui-border-base flex items-center justify-evenly gap-x-3 border-t p-3" },
-                            React.createElement("div", { className: "flex flex-1 items-center gap-x-2" },
-                                React.createElement("span", { className: "text-ui-fg-subtle" }, "Start:"),
-                                React.createElement(TimeInput, { value: time.start, onChange: (v) => handleTimeChange(v, "start"), "aria-label": "Start date time", isDisabled: !(range === null || range === void 0 ? void 0 : range.from), isRequired: props.required })),
-                            React.createElement(Minus, { className: "text-ui-fg-muted" }),
-                            React.createElement("div", { className: "flex flex-1 items-center gap-x-2" },
-                                React.createElement("span", { className: "text-ui-fg-subtle" }, "End:"),
-                                React.createElement(TimeInput, { value: time.end, onChange: (v) => handleTimeChange(v, "end"), "aria-label": "End date time", isDisabled: !(range === null || range === void 0 ? void 0 : range.to), isRequired: props.required })))),
-                        React.createElement("div", { className: "flex items-center justify-between border-t p-3" },
-                            React.createElement("p", { className: clx("text-ui-fg-subtle txt-compact-small-plus") },
-                                React.createElement("span", { className: "text-ui-fg-muted" }, "Range:"),
-                                " ",
-                                displayRange),
-                            React.createElement("div", { className: "flex items-center gap-x-2" },
-                                React.createElement(Button, { variant: "secondary", type: "button", onClick: handleCancel }, "Cancel"),
-                                React.createElement(Button, { variant: "primary", type: "button", onClick: () => setOpen(false) }, "Apply")))))))));
+            React.createElement("div", { className: "flex items-start" },
+                presets && presets.length > 0 && (React.createElement("div", { className: "relative h-full w-[160px] border-r" },
+                    React.createElement("div", { className: "absolute inset-0 overflow-y-scroll p-3" },
+                        React.createElement(PresetContainer, { currentValue: range, presets: presets, onSelect: handleRangeChange })))),
+                React.createElement("div", null,
+                    React.createElement(CalendarPrimitive, { mode: "range", selected: range, onSelect: handleRangeChange, month: month, onMonthChange: setMonth, numberOfMonths: 2, disabled: disabled, classNames: {
+                            months: "flex flex-row divide-x divide-ui-border-base",
+                        }, ...props }),
+                    showTimePicker && (React.createElement("div", { className: "border-ui-border-base flex items-center justify-evenly gap-x-3 border-t p-3" },
+                        React.createElement("div", { className: "flex flex-1 items-center gap-x-2" },
+                            React.createElement("span", { className: "text-ui-fg-subtle" }, "Start:"),
+                            React.createElement(TimeInput, { value: time.start, onChange: (v) => handleTimeChange(v, "start"), "aria-label": "Start date time", isDisabled: !(range === null || range === void 0 ? void 0 : range.from), isRequired: props.required })),
+                        React.createElement(Minus, { className: "text-ui-fg-muted" }),
+                        React.createElement("div", { className: "flex flex-1 items-center gap-x-2" },
+                            React.createElement("span", { className: "text-ui-fg-subtle" }, "End:"),
+                            React.createElement(TimeInput, { value: time.end, onChange: (v) => handleTimeChange(v, "end"), "aria-label": "End date time", isDisabled: !(range === null || range === void 0 ? void 0 : range.to), isRequired: props.required })))),
+                    React.createElement("div", { className: "flex items-center justify-between border-t p-3" },
+                        React.createElement("p", { className: clx("text-ui-fg-subtle txt-compact-small-plus") },
+                            React.createElement("span", { className: "text-ui-fg-muted" }, "Range:"),
+                            " ",
+                            displayRange),
+                        React.createElement("div", { className: "flex items-center gap-x-2" },
+                            React.createElement(Button, { variant: "secondary", type: "button", onClick: handleCancel }, "Cancel"),
+                            React.createElement(Button, { variant: "primary", type: "button", onClick: () => setOpen(false) }, "Apply"))))))));
 };
 const validatePresets = (presets, rules) => {
     const { toYear, fromYear, fromMonth, toMonth, fromDay, toDay } = rules;