@medusajs/ui 1.0.0 → 2.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2023 Medusajs
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,52 @@
-# @medusajs/ui
+<p align="center">
+  <a href="https://www.medusajs.com">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/59018053/229103275-b5e482bb-4601-46e6-8142-244f531cebdb.svg">
+    <source media="(prefers-color-scheme: light)" srcset="https://user-images.githubusercontent.com/59018053/229103726-e5b529a3-9b3f-4970-8a1f-c6af37f087bf.svg">
+    <img alt="Medusa logo" src="https://user-images.githubusercontent.com/59018053/229103726-e5b529a3-9b3f-4970-8a1f-c6af37f087bf.svg">
+    </picture>
+  </a>
+</p>
+<h1 align="center">
+  Medusa UI
+</h1>
 
-[Storybook](https://64ac29b6b978c0bf353e1ef8-wdedgwwcko.chromatic.com/)
+<h4 align="center">
+  <a href="https://docs.medusajs.com/ui">Documentation</a> |
+  <a href="https://www.medusajs.com">Website</a>
+</h4>
+
+<p align="center">
+  Medusa's admin component library.
+</p>
+<p align="center">
+  <a href="https://github.com/medusajs/medusa/blob/develop/LICENSE">
+    <img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="Medusa is released under the MIT license." />
+  </a>
+  <a href="https://discord.gg/xpCwq3Kfn8">
+    <img src="https://img.shields.io/badge/chat-on%20discord-7289DA.svg" alt="Discord Chat" />
+  </a>
+  <a href="https://twitter.com/intent/follow?screen_name=medusajs">
+    <img src="https://img.shields.io/twitter/follow/medusajs.svg?label=Follow%20@medusajs" alt="Follow @medusajs" />
+  </a>
+</p>
+
+## Getting Started
+
+### Installation
+
+```sh
+yarn add @medusajs/medusa-ui
+```
+
+### Usage
+
+```jsx
+import { Button } from "@medusajs/ui"
+
+const App = () => <Button variant="primary">Hello World</Button>
+```
+
+## Documentation
+
+You can find the documentation for Medusa UI [on the documentation site](https://docs.medusajs.com/ui).

package/dist/cjs/components/badge/badge.d.ts

@@ -1,8 +1,6 @@
 import { VariantProps } from "class-variance-authority";
 import * as React from "react";
-declare const badgeVariants: (props?: ({
-    type?: "rounded" | "default" | "icon" | null | undefined;
-    size?: "base" | "large" | "small" | null | undefined;
+declare const badgeColorVariants: (props?: ({
     color?: "green" | "red" | "blue" | "orange" | "grey" | "purple" | null | undefined;
 } & ({
     class: import("clsx").ClassValue;
@@ -14,8 +12,21 @@ declare const badgeVariants: (props?: ({
     class?: undefined;
     className?: undefined;
 })) | undefined) => string;
-interface BadgeProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "color">, VariantProps<typeof badgeVariants> {
+declare const badgeSizeVariants: (props?: ({
+    size?: "base" | "large" | "small" | null | undefined;
+    rounded?: "base" | "full" | null | undefined;
+} & ({
+    class: import("clsx").ClassValue;
+    className?: undefined;
+} | {
+    class?: undefined;
+    className: import("clsx").ClassValue;
+} | {
+    class?: undefined;
+    className?: undefined;
+})) | undefined) => string;
+interface BadgeProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "color">, VariantProps<typeof badgeSizeVariants>, VariantProps<typeof badgeColorVariants> {
     asChild?: boolean;
 }
 declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
-export { Badge };
+export { Badge, badgeColorVariants };

package/dist/cjs/components/badge/badge.js

@@ -1,23 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Badge = void 0;
+exports.badgeColorVariants = exports.Badge = void 0;
 const tslib_1 = require("tslib");
 const react_slot_1 = require("@radix-ui/react-slot");
 const class_variance_authority_1 = require("class-variance-authority");
 const React = tslib_1.__importStar(require("react"));
 const clx_1 = require("../../utils/clx");
-const badgeVariants = (0, class_variance_authority_1.cva)("inline-flex items-center gap-x-0.5 border", {
+const badgeColorVariants = (0, class_variance_authority_1.cva)("", {
     variants: {
-        type: {
-            default: "rounded-md",
-            rounded: "rounded-full",
-            icon: "rounded-md",
-        },
-        size: {
-            small: "txt-compact-xsmall-plus px-1.5",
-            base: "txt-compact-small-plus px-2 py-0.5",
-            large: "txt-compact-medium-plus px-2.5 py-1",
-        },
         color: {
             green: "bg-ui-tag-green-bg text-ui-tag-green-text [&_svg]:text-ui-tag-green-icon border-ui-tag-green-border",
             red: "bg-ui-tag-red-bg text-ui-tag-red-text [&_svg]:text-ui-tag-red-icon border-ui-tag-red-border",
@@ -27,32 +17,31 @@ const badgeVariants = (0, class_variance_authority_1.cva)("inline-flex items-cen
             purple: "bg-ui-tag-purple-bg text-ui-tag-purple-text [&_svg]:text-ui-tag-purple-icon border-ui-tag-purple-border",
         },
     },
-    compoundVariants: [
-        {
-            type: "icon",
-            size: "large",
-            className: "p-1",
-        },
-        {
-            type: "icon",
-            size: "base",
-            className: "p-0.5",
+    defaultVariants: {
+        color: "grey",
+    },
+});
+exports.badgeColorVariants = badgeColorVariants;
+const badgeSizeVariants = (0, class_variance_authority_1.cva)("inline-flex items-center gap-x-0.5 border", {
+    variants: {
+        size: {
+            small: "txt-compact-xsmall-plus px-1.5",
+            base: "txt-compact-small-plus px-2 py-0.5",
+            large: "txt-compact-medium-plus px-2.5 py-1",
         },
-        {
-            type: "icon",
-            size: "small",
-            className: "p-0.5", // Icon does not get any smaller than `md`
+        rounded: {
+            base: "rounded-md",
+            full: "rounded-full",
         },
-    ],
+    },
     defaultVariants: {
         size: "base",
-        type: "default",
-        color: "grey",
+        rounded: "base",
     },
 });
-const Badge = React.forwardRef(({ className, size, type, color, asChild = false, ...props }, ref) => {
+const Badge = React.forwardRef(({ className, size = "base", rounded = "base", color = "grey", asChild = false, ...props }, ref) => {
     const Component = asChild ? react_slot_1.Slot : "span";
-    return (React.createElement(Component, { ref: ref, className: (0, clx_1.clx)(badgeVariants({ size, type, color }), className), ...props }));
+    return (React.createElement(Component, { ref: ref, className: (0, clx_1.clx)(badgeColorVariants({ color }), badgeSizeVariants({ size, rounded }), className), ...props }));
 });
 exports.Badge = Badge;
 Badge.displayName = "Badge";

package/dist/cjs/components/badge/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../../../src/components/badge/badge.tsx"],"names":[],"mappings":";;;;AAAA,qDAA2C;AAC3C,uEAA4D;AAC5D,qDAA8B;AAE9B,qCAAiC;AAEjC,MAAM,aAAa,GAAG,IAAA,8BAAG,EAAC,2CAA2C,EAAE;IACrE,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE,YAAY;YACrB,OAAO,EAAE,cAAc;YACvB,IAAI,EAAE,YAAY;SACnB;QACD,IAAI,EAAE;YACJ,KAAK,EAAE,gCAAgC;YACvC,IAAI,EAAE,oCAAoC;YAC1C,KAAK,EAAE,qCAAqC;SAC7C;QACD,KAAK,EAAE;YACL,KAAK,EACH,qGAAqG;YACvG,GAAG,EAAE,6FAA6F;YAClG,IAAI,EAAE,iGAAiG;YACvG,MAAM,EACJ,yGAAyG;YAC3G,IAAI,EAAE,6GAA6G;YACnH,MAAM,EACJ,yGAAyG;SAC5G;KACF;IACD,gBAAgB,EAAE;QAChB;YACE,IAAI,EAAE,MAAM;YACZ,IAAI,EAAE,OAAO;YACb,SAAS,EAAE,KAAK;SACjB;QACD;YACE,IAAI,EAAE,MAAM;YACZ,IAAI,EAAE,MAAM;YACZ,SAAS,EAAE,OAAO;SACnB;QACD;YACE,IAAI,EAAE,MAAM;YACZ,IAAI,EAAE,OAAO;YACb,SAAS,EAAE,OAAO,EAAE,0CAA0C;SAC/D;KACF;IACD,eAAe,EAAE;QACf,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,SAAS;QACf,KAAK,EAAE,MAAM;KACd;CACF,CAAC,CAAA;AAQF,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAC5B,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,GAAG,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACnE,MAAM,SAAS,GAAG,OAAO,CAAC,CAAC,CAAC,iBAAI,CAAC,CAAC,CAAC,MAAM,CAAA;IAEzC,OAAO,CACL,oBAAC,SAAS,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,SAAG,EAAC,aAAa,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,SAAS,CAAC,KAC3D,KAAK,GACT,CACH,CAAA;AACH,CAAC,CACF,CAAA;AAGQ,sBAAK;AAFd,KAAK,CAAC,WAAW,GAAG,OAAO,CAAA","sourcesContent":["import { Slot } from \"@radix-ui/react-slot\"\nimport { VariantProps, cva } from \"class-variance-authority\"\nimport * as React from \"react\"\n\nimport { clx } from \"@/utils/clx\"\n\nconst badgeVariants = cva(\"inline-flex items-center gap-x-0.5 border\", {\n  variants: {\n    type: {\n      default: \"rounded-md\",\n      rounded: \"rounded-full\",\n      icon: \"rounded-md\",\n    },\n    size: {\n      small: \"txt-compact-xsmall-plus px-1.5\",\n      base: \"txt-compact-small-plus px-2 py-0.5\",\n      large: \"txt-compact-medium-plus px-2.5 py-1\",\n    },\n    color: {\n      green:\n        \"bg-ui-tag-green-bg text-ui-tag-green-text [&_svg]:text-ui-tag-green-icon border-ui-tag-green-border\",\n      red: \"bg-ui-tag-red-bg text-ui-tag-red-text [&_svg]:text-ui-tag-red-icon border-ui-tag-red-border\",\n      blue: \"bg-ui-tag-blue-bg text-ui-tag-blue-text [&_svg]:text-ui-tag-blue-icon border-ui-tag-blue-border\",\n      orange:\n        \"bg-ui-tag-orange-bg text-ui-tag-orange-text [&_svg]:text-ui-tag-orange-icon border-ui-tag-orange-border\",\n      grey: \"bg-ui-tag-neutral-bg text-ui-tag-neutral-text [&_svg]:text-ui-tag-neutral-icon border-ui-tag-neutral-border\",\n      purple:\n        \"bg-ui-tag-purple-bg text-ui-tag-purple-text [&_svg]:text-ui-tag-purple-icon border-ui-tag-purple-border\",\n    },\n  },\n  compoundVariants: [\n    {\n      type: \"icon\",\n      size: \"large\",\n      className: \"p-1\",\n    },\n    {\n      type: \"icon\",\n      size: \"base\",\n      className: \"p-0.5\",\n    },\n    {\n      type: \"icon\",\n      size: \"small\",\n      className: \"p-0.5\", // Icon does not get any smaller than `md`\n    },\n  ],\n  defaultVariants: {\n    size: \"base\",\n    type: \"default\",\n    color: \"grey\",\n  },\n})\n\ninterface BadgeProps\n  extends Omit<React.HTMLAttributes<HTMLSpanElement>, \"color\">,\n    VariantProps<typeof badgeVariants> {\n  asChild?: boolean\n}\n\nconst Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(\n  ({ className, size, type, color, asChild = false, ...props }, ref) => {\n    const Component = asChild ? Slot : \"span\"\n\n    return (\n      <Component\n        ref={ref}\n        className={clx(badgeVariants({ size, type, color }), className)}\n        {...props}\n      />\n    )\n  }\n)\nBadge.displayName = \"Badge\"\n\nexport { Badge }\n"]}
+{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../../../src/components/badge/badge.tsx"],"names":[],"mappings":";;;;AAAA,qDAA2C;AAC3C,uEAA4D;AAC5D,qDAA8B;AAE9B,qCAAiC;AAEjC,MAAM,kBAAkB,GAAG,IAAA,8BAAG,EAAC,EAAE,EAAE;IACjC,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,KAAK,EACH,qGAAqG;YACvG,GAAG,EAAE,6FAA6F;YAClG,IAAI,EAAE,iGAAiG;YACvG,MAAM,EACJ,yGAAyG;YAC3G,IAAI,EAAE,6GAA6G;YACnH,MAAM,EACJ,yGAAyG;SAC5G;KACF;IACD,eAAe,EAAE;QACf,KAAK,EAAE,MAAM;KACd;CACF,CAAC,CAAA;AAwDc,gDAAkB;AAtDlC,MAAM,iBAAiB,GAAG,IAAA,8BAAG,EAAC,2CAA2C,EAAE;IACzE,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,KAAK,EAAE,gCAAgC;YACvC,IAAI,EAAE,oCAAoC;YAC1C,KAAK,EAAE,qCAAqC;SAC7C;QACD,OAAO,EAAE;YACP,IAAI,EAAE,YAAY;YAClB,IAAI,EAAE,cAAc;SACrB;KACF;IACD,eAAe,EAAE;QACf,IAAI,EAAE,MAAM;QACZ,OAAO,EAAE,MAAM;KAChB;CACF,CAAC,CAAA;AASF,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAC5B,CACE,EACE,SAAS,EACT,IAAI,GAAG,MAAM,EACb,OAAO,GAAG,MAAM,EAChB,KAAK,GAAG,MAAM,EACd,OAAO,GAAG,KAAK,EACf,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,SAAS,GAAG,OAAO,CAAC,CAAC,CAAC,iBAAI,CAAC,CAAC,CAAC,MAAM,CAAA;IAEzC,OAAO,CACL,oBAAC,SAAS,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,SAAG,EACZ,kBAAkB,CAAC,EAAE,KAAK,EAAE,CAAC,EAC7B,iBAAiB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,EACpC,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAA;AACH,CAAC,CACF,CAAA;AAGQ,sBAAK;AAFd,KAAK,CAAC,WAAW,GAAG,OAAO,CAAA","sourcesContent":["import { Slot } from \"@radix-ui/react-slot\"\nimport { VariantProps, cva } from \"class-variance-authority\"\nimport * as React from \"react\"\n\nimport { clx } from \"@/utils/clx\"\n\nconst badgeColorVariants = cva(\"\", {\n  variants: {\n    color: {\n      green:\n        \"bg-ui-tag-green-bg text-ui-tag-green-text [&_svg]:text-ui-tag-green-icon border-ui-tag-green-border\",\n      red: \"bg-ui-tag-red-bg text-ui-tag-red-text [&_svg]:text-ui-tag-red-icon border-ui-tag-red-border\",\n      blue: \"bg-ui-tag-blue-bg text-ui-tag-blue-text [&_svg]:text-ui-tag-blue-icon border-ui-tag-blue-border\",\n      orange:\n        \"bg-ui-tag-orange-bg text-ui-tag-orange-text [&_svg]:text-ui-tag-orange-icon border-ui-tag-orange-border\",\n      grey: \"bg-ui-tag-neutral-bg text-ui-tag-neutral-text [&_svg]:text-ui-tag-neutral-icon border-ui-tag-neutral-border\",\n      purple:\n        \"bg-ui-tag-purple-bg text-ui-tag-purple-text [&_svg]:text-ui-tag-purple-icon border-ui-tag-purple-border\",\n    },\n  },\n  defaultVariants: {\n    color: \"grey\",\n  },\n})\n\nconst badgeSizeVariants = cva(\"inline-flex items-center gap-x-0.5 border\", {\n  variants: {\n    size: {\n      small: \"txt-compact-xsmall-plus px-1.5\",\n      base: \"txt-compact-small-plus px-2 py-0.5\",\n      large: \"txt-compact-medium-plus px-2.5 py-1\",\n    },\n    rounded: {\n      base: \"rounded-md\",\n      full: \"rounded-full\",\n    },\n  },\n  defaultVariants: {\n    size: \"base\",\n    rounded: \"base\",\n  },\n})\n\ninterface BadgeProps\n  extends Omit<React.HTMLAttributes<HTMLSpanElement>, \"color\">,\n    VariantProps<typeof badgeSizeVariants>,\n    VariantProps<typeof badgeColorVariants> {\n  asChild?: boolean\n}\n\nconst Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(\n  (\n    {\n      className,\n      size = \"base\",\n      rounded = \"base\",\n      color = \"grey\",\n      asChild = false,\n      ...props\n    },\n    ref\n  ) => {\n    const Component = asChild ? Slot : \"span\"\n\n    return (\n      <Component\n        ref={ref}\n        className={clx(\n          badgeColorVariants({ color }),\n          badgeSizeVariants({ size, rounded }),\n          className\n        )}\n        {...props}\n      />\n    )\n  }\n)\nBadge.displayName = \"Badge\"\n\nexport { Badge, badgeColorVariants }\n"]}

package/dist/cjs/components/button/button.d.ts

@@ -2,8 +2,7 @@ import { type VariantProps } from "class-variance-authority";
 import * as React from "react";
 declare const buttonVariants: (props?: ({
     variant?: "primary" | "secondary" | "transparent" | "danger" | null | undefined;
-    size?: "base" | "large" | "small" | "xlarge" | null | undefined;
-    format?: "default" | "icon" | null | undefined;
+    size?: "base" | "large" | "xlarge" | null | undefined;
 } & ({
     class: import("clsx").ClassValue;
     className?: undefined;

package/dist/cjs/components/button/button.js

@@ -7,55 +7,27 @@ const class_variance_authority_1 = require("class-variance-authority");
 const React = tslib_1.__importStar(require("react"));
 const clx_1 = require("../../utils/clx");
 const icons_1 = require("@medusajs/icons");
-const buttonVariants = (0, class_variance_authority_1.cva)("disabled:bg-ui-bg-disabled disabled:border-ui-border-base disabled:text-ui-fg-disabled transition-fg relative inline-flex w-fit items-center justify-center overflow-hidden rounded-lg border outline-none after:absolute after:inset-0 after:content-[''] disabled:!shadow-none disabled:after:hidden", {
+const buttonVariants = (0, class_variance_authority_1.cva)((0, clx_1.clx)("transition-fg relative inline-flex w-fit items-center justify-center overflow-hidden rounded-md border outline-none", "disabled:bg-ui-bg-disabled disabled:border-ui-border-base disabled:text-ui-fg-disabled disabled:!shadow-none disabled:after:hidden", "after:absolute after:inset-0 after:content-['']"), {
     variants: {
         variant: {
             primary: (0, clx_1.clx)("shadow-buttons-colored text-ui-fg-on-inverted border-ui-border-loud bg-ui-button-inverted after:button-inverted-gradient", "hover:bg-ui-button-inverted-hover hover:after:button-inverted-hover-gradient", "active:bg-ui-button-inverted-pressed active:after:button-inverted-pressed-gradient", "focus:!shadow-buttons-colored-focus"),
             secondary: (0, clx_1.clx)("shadow-buttons-neutral text-ui-fg-base border-ui-border-base bg-ui-button-neutral after:button-neutral-gradient", "hover:bg-ui-button-neutral-hover hover:after:button-neutral-hover-gradient", "active:bg-ui-button-neutral-pressed active:after:button-neutral-pressed-gradient", "focus:shadow-buttons-neutral-focus"),
-            transparent: (0, clx_1.clx)("text-ui-fg-base border-ui-border-transparent bg-ui-button-transparent", "hover:bg-ui-button-transparent-hover", "active:bg-ui-button-transparent-pressed active:border-ui-border-base", "focus:shadow-borders-focus focus:bg-ui-bg-base focus:border-ui-border-base", "disabled:bg-transparent disabled:shadow-none"),
+            transparent: (0, clx_1.clx)("text-ui-fg-base border-ui-border-transparent bg-ui-button-transparent", "hover:bg-ui-button-transparent-hover", "active:bg-ui-button-transparent-pressed active:border-ui-border-base", "focus:shadow-borders-focus focus:bg-ui-bg-base focus:border-ui-border-base", "disabled:!border-none disabled:!bg-transparent disabled:!shadow-none"),
             danger: (0, clx_1.clx)("shadow-buttons-neutral text-ui-fg-on-color border-ui-border-danger bg-ui-button-danger after:button-danger-gradient", "hover:bg-ui-button-danger-hover hover:after:button-danger-hover-gradient", "active:bg-ui-button-danger-pressed active:after:button-danger-pressed-gradient", "focus:shadow-buttons-neutral-focus"),
         },
         size: {
-            small: "txt-compact-xsmall-plus gap-x-0.5 px-[7px] py-[1px]",
-            base: "txt-compact-small-plus gap-x-1.5 px-[11px] py-[5px]",
-            large: "txt-compact-medium-plus gap-x-2 px-[15px] py-[9px]",
-            xlarge: "txt-compact-large-plus gap-x-2 px-[19px] py-[13px]",
-        },
-        format: {
-            default: "",
-            icon: "",
+            base: "txt-compact-small-plus gap-x-1 px-2 py-[5px]",
+            large: "txt-compact-medium-plus gap-x-1 px-3 py-[9px]",
+            xlarge: "txt-compact-large-plus gap-x-1 px-4 py-[13px]",
         },
     },
     defaultVariants: {
-        variant: "primary",
         size: "base",
-        format: "default",
+        variant: "primary",
     },
-    compoundVariants: [
-        {
-            size: "small",
-            format: "icon",
-            className: "px-px py-px",
-        },
-        {
-            size: "base",
-            format: "icon",
-            className: "px-[5px] py-[5px]",
-        },
-        {
-            size: "large",
-            format: "icon",
-            className: "px-[9px] py-[9px]",
-        },
-        {
-            size: "xlarge",
-            format: "icon",
-            className: "px-[13px] py-[13px]",
-        },
-    ],
 });
 exports.buttonVariants = buttonVariants;
-const Button = React.forwardRef(({ size, variant, format, className, asChild = false, children, isLoading = false, disabled, ...props }, ref) => {
+const Button = React.forwardRef(({ variant = "primary", size = "base", className, asChild = false, children, isLoading = false, disabled, ...props }, ref) => {
     const Component = asChild ? react_slot_1.Slot : "button";
     /**
      * In the case of a button where asChild is true, and isLoading is true, we ensure that
@@ -65,13 +37,13 @@ const Button = React.forwardRef(({ size, variant, format, className, asChild = f
     const renderInner = () => {
         if (isLoading) {
             return (React.createElement("span", { className: "pointer-events-none" },
-                React.createElement("div", { className: (0, clx_1.clx)("bg-ui-bg-disabled absolute inset-0 z-50 flex items-center justify-center rounded-md") },
+                React.createElement("div", { className: (0, clx_1.clx)("bg-ui-bg-disabled absolute inset-0 flex items-center justify-center rounded-md") },
                     React.createElement(icons_1.Spinner, { className: "animate-spin" })),
                 children));
         }
         return children;
     };
-    return (React.createElement(Component, { ref: ref, ...props, className: (0, clx_1.clx)(buttonVariants({ variant, size, format }), className), disabled: disabled || isLoading }, renderInner()));
+    return (React.createElement(Component, { ref: ref, ...props, className: (0, clx_1.clx)(buttonVariants({ variant, size }), className), disabled: disabled || isLoading }, renderInner()));
 });
 exports.Button = Button;
 Button.displayName = "Button";

package/dist/cjs/components/button/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../../src/components/button/button.tsx"],"names":[],"mappings":";;;;AAAA,qDAA2C;AAC3C,uEAAiE;AACjE,qDAA8B;AAE9B,qCAAiC;AACjC,2CAAyC;AAEzC,MAAM,cAAc,GAAG,IAAA,8BAAG,EACxB,wSAAwS,EACxS;IACE,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,IAAA,SAAG,EACV,0HAA0H,EAC1H,8EAA8E,EAC9E,oFAAoF,EACpF,qCAAqC,CACtC;YACD,SAAS,EAAE,IAAA,SAAG,EACZ,iHAAiH,EACjH,4EAA4E,EAC5E,kFAAkF,EAClF,oCAAoC,CACrC;YACD,WAAW,EAAE,IAAA,SAAG,EACd,uEAAuE,EACvE,sCAAsC,EACtC,sEAAsE,EACtE,4EAA4E,EAC5E,8CAA8C,CAC/C;YACD,MAAM,EAAE,IAAA,SAAG,EACT,qHAAqH,EACrH,0EAA0E,EAC1E,gFAAgF,EAChF,oCAAoC,CACrC;SACF;QACD,IAAI,EAAE;YACJ,KAAK,EAAE,qDAAqD;YAC5D,IAAI,EAAE,qDAAqD;YAC3D,KAAK,EAAE,oDAAoD;YAC3D,MAAM,EAAE,oDAAoD;SAC7D;QACD,MAAM,EAAE;YACN,OAAO,EAAE,EAAE;YACX,IAAI,EAAE,EAAE;SACT;KACF;IACD,eAAe,EAAE;QACf,OAAO,EAAE,SAAS;QAClB,IAAI,EAAE,MAAM;QACZ,MAAM,EAAE,SAAS;KAClB;IACD,gBAAgB,EAAE;QAChB;YACE,IAAI,EAAE,OAAO;YACb,MAAM,EAAE,MAAM;YACd,SAAS,EAAE,aAAa;SACzB;QACD;YACE,IAAI,EAAE,MAAM;YACZ,MAAM,EAAE,MAAM;YACd,SAAS,EAAE,mBAAmB;SAC/B;QACD;YACE,IAAI,EAAE,OAAO;YACb,MAAM,EAAE,MAAM;YACd,SAAS,EAAE,mBAAmB;SAC/B;QACD;YACE,IAAI,EAAE,QAAQ;YACd,MAAM,EAAE,MAAM;YACd,SAAS,EAAE,qBAAqB;SACjC;KACF;CACF,CACF,CAAA;AAgEgB,wCAAc;AAvD/B,MAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CAC7B,CACE,EACE,IAAI,EACJ,OAAO,EACP,MAAM,EACN,SAAS,EACT,OAAO,GAAG,KAAK,EACf,QAAQ,EACR,SAAS,GAAG,KAAK,EACjB,QAAQ,EACR,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,SAAS,GAAG,OAAO,CAAC,CAAC,CAAC,iBAAI,CAAC,CAAC,CAAC,QAAQ,CAAA;IAE3C;;;;OAIG;IACH,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,IAAI,SAAS,EAAE;YACb,OAAO,CACL,8BAAM,SAAS,EAAC,qBAAqB;gBACnC,6BACE,SAAS,EAAE,IAAA,SAAG,EACZ,qFAAqF,CACtF;oBAED,oBAAC,eAAO,IAAC,SAAS,EAAC,cAAc,GAAG,CAChC;gBACL,QAAQ,CACJ,CACR,CAAA;SACF;QAED,OAAO,QAAQ,CAAA;IACjB,CAAC,CAAA;IAED,OAAO,CACL,oBAAC,SAAS,IACR,GAAG,EAAE,GAAG,KACJ,KAAK,EACT,SAAS,EAAE,IAAA,SAAG,EAAC,cAAc,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,EAAE,SAAS,CAAC,EACpE,QAAQ,EAAE,QAAQ,IAAI,SAAS,IAE9B,WAAW,EAAE,CACJ,CACb,CAAA;AACH,CAAC,CACF,CAAA;AAGQ,wBAAM;AAFf,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAA","sourcesContent":["import { Slot } from \"@radix-ui/react-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport * as React from \"react\"\n\nimport { clx } from \"@/utils/clx\"\nimport { Spinner } from \"@medusajs/icons\"\n\nconst buttonVariants = cva(\n  \"disabled:bg-ui-bg-disabled disabled:border-ui-border-base disabled:text-ui-fg-disabled transition-fg relative inline-flex w-fit items-center justify-center overflow-hidden rounded-lg border outline-none after:absolute after:inset-0 after:content-[''] disabled:!shadow-none disabled:after:hidden\",\n  {\n    variants: {\n      variant: {\n        primary: clx(\n          \"shadow-buttons-colored text-ui-fg-on-inverted border-ui-border-loud bg-ui-button-inverted after:button-inverted-gradient\",\n          \"hover:bg-ui-button-inverted-hover hover:after:button-inverted-hover-gradient\",\n          \"active:bg-ui-button-inverted-pressed active:after:button-inverted-pressed-gradient\",\n          \"focus:!shadow-buttons-colored-focus\"\n        ),\n        secondary: clx(\n          \"shadow-buttons-neutral text-ui-fg-base border-ui-border-base bg-ui-button-neutral after:button-neutral-gradient\",\n          \"hover:bg-ui-button-neutral-hover hover:after:button-neutral-hover-gradient\",\n          \"active:bg-ui-button-neutral-pressed active:after:button-neutral-pressed-gradient\",\n          \"focus:shadow-buttons-neutral-focus\"\n        ),\n        transparent: clx(\n          \"text-ui-fg-base border-ui-border-transparent bg-ui-button-transparent\",\n          \"hover:bg-ui-button-transparent-hover\",\n          \"active:bg-ui-button-transparent-pressed active:border-ui-border-base\",\n          \"focus:shadow-borders-focus focus:bg-ui-bg-base focus:border-ui-border-base\",\n          \"disabled:bg-transparent disabled:shadow-none\"\n        ),\n        danger: clx(\n          \"shadow-buttons-neutral text-ui-fg-on-color border-ui-border-danger bg-ui-button-danger after:button-danger-gradient\",\n          \"hover:bg-ui-button-danger-hover hover:after:button-danger-hover-gradient\",\n          \"active:bg-ui-button-danger-pressed active:after:button-danger-pressed-gradient\",\n          \"focus:shadow-buttons-neutral-focus\"\n        ),\n      },\n      size: {\n        small: \"txt-compact-xsmall-plus gap-x-0.5 px-[7px] py-[1px]\",\n        base: \"txt-compact-small-plus gap-x-1.5 px-[11px] py-[5px]\",\n        large: \"txt-compact-medium-plus gap-x-2 px-[15px] py-[9px]\",\n        xlarge: \"txt-compact-large-plus gap-x-2 px-[19px] py-[13px]\",\n      },\n      format: {\n        default: \"\",\n        icon: \"\",\n      },\n    },\n    defaultVariants: {\n      variant: \"primary\",\n      size: \"base\",\n      format: \"default\",\n    },\n    compoundVariants: [\n      {\n        size: \"small\",\n        format: \"icon\",\n        className: \"px-px py-px\",\n      },\n      {\n        size: \"base\",\n        format: \"icon\",\n        className: \"px-[5px] py-[5px]\",\n      },\n      {\n        size: \"large\",\n        format: \"icon\",\n        className: \"px-[9px] py-[9px]\",\n      },\n      {\n        size: \"xlarge\",\n        format: \"icon\",\n        className: \"px-[13px] py-[13px]\",\n      },\n    ],\n  }\n)\n\ninterface ButtonProps\n  extends React.ComponentPropsWithoutRef<\"button\">,\n    VariantProps<typeof buttonVariants> {\n  isLoading?: boolean\n  asChild?: boolean\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      size,\n      variant,\n      format,\n      className,\n      asChild = false,\n      children,\n      isLoading = false,\n      disabled,\n      ...props\n    },\n    ref\n  ) => {\n    const Component = asChild ? Slot : \"button\"\n\n    /**\n     * In the case of a button where asChild is true, and isLoading is true, we ensure that\n     * only on element is passed as a child to the Slot component. This is because the Slot\n     * component only accepts a single child.\n     */\n    const renderInner = () => {\n      if (isLoading) {\n        return (\n          <span className=\"pointer-events-none\">\n            <div\n              className={clx(\n                \"bg-ui-bg-disabled absolute inset-0 z-50 flex items-center justify-center rounded-md\"\n              )}\n            >\n              <Spinner className=\"animate-spin\" />\n            </div>\n            {children}\n          </span>\n        )\n      }\n\n      return children\n    }\n\n    return (\n      <Component\n        ref={ref}\n        {...props}\n        className={clx(buttonVariants({ variant, size, format }), className)}\n        disabled={disabled || isLoading}\n      >\n        {renderInner()}\n      </Component>\n    )\n  }\n)\nButton.displayName = \"Button\"\n\nexport { Button, buttonVariants }\n"]}
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../../src/components/button/button.tsx"],"names":[],"mappings":";;;;AAAA,qDAA2C;AAC3C,uEAAiE;AACjE,qDAA8B;AAE9B,qCAAiC;AACjC,2CAAyC;AAEzC,MAAM,cAAc,GAAG,IAAA,8BAAG,EACxB,IAAA,SAAG,EACD,qHAAqH,EACrH,oIAAoI,EACpI,iDAAiD,CAClD,EACD;IACE,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,IAAA,SAAG,EACV,0HAA0H,EAC1H,8EAA8E,EAC9E,oFAAoF,EACpF,qCAAqC,CACtC;YACD,SAAS,EAAE,IAAA,SAAG,EACZ,iHAAiH,EACjH,4EAA4E,EAC5E,kFAAkF,EAClF,oCAAoC,CACrC;YACD,WAAW,EAAE,IAAA,SAAG,EACd,uEAAuE,EACvE,sCAAsC,EACtC,sEAAsE,EACtE,4EAA4E,EAC5E,sEAAsE,CACvE;YACD,MAAM,EAAE,IAAA,SAAG,EACT,qHAAqH,EACrH,0EAA0E,EAC1E,gFAAgF,EAChF,oCAAoC,CACrC;SACF;QACD,IAAI,EAAE;YACJ,IAAI,EAAE,8CAA8C;YACpD,KAAK,EAAE,+CAA+C;YACtD,MAAM,EAAE,+CAA+C;SACxD;KACF;IACD,eAAe,EAAE;QACf,IAAI,EAAE,MAAM;QACZ,OAAO,EAAE,SAAS;KACnB;CACF,CACF,CAAA;AA+DgB,wCAAc;AAtD/B,MAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CAC7B,CACE,EACE,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,MAAM,EACb,SAAS,EACT,OAAO,GAAG,KAAK,EACf,QAAQ,EACR,SAAS,GAAG,KAAK,EACjB,QAAQ,EACR,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,SAAS,GAAG,OAAO,CAAC,CAAC,CAAC,iBAAI,CAAC,CAAC,CAAC,QAAQ,CAAA;IAE3C;;;;OAIG;IACH,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,IAAI,SAAS,EAAE;YACb,OAAO,CACL,8BAAM,SAAS,EAAC,qBAAqB;gBACnC,6BACE,SAAS,EAAE,IAAA,SAAG,EACZ,gFAAgF,CACjF;oBAED,oBAAC,eAAO,IAAC,SAAS,EAAC,cAAc,GAAG,CAChC;gBACL,QAAQ,CACJ,CACR,CAAA;SACF;QAED,OAAO,QAAQ,CAAA;IACjB,CAAC,CAAA;IAED,OAAO,CACL,oBAAC,SAAS,IACR,GAAG,EAAE,GAAG,KACJ,KAAK,EACT,SAAS,EAAE,IAAA,SAAG,EAAC,cAAc,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,SAAS,CAAC,EAC5D,QAAQ,EAAE,QAAQ,IAAI,SAAS,IAE9B,WAAW,EAAE,CACJ,CACb,CAAA;AACH,CAAC,CACF,CAAA;AAGQ,wBAAM;AAFf,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAA","sourcesContent":["import { Slot } from \"@radix-ui/react-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport * as React from \"react\"\n\nimport { clx } from \"@/utils/clx\"\nimport { Spinner } from \"@medusajs/icons\"\n\nconst buttonVariants = cva(\n  clx(\n    \"transition-fg relative inline-flex w-fit items-center justify-center overflow-hidden rounded-md border outline-none\",\n    \"disabled:bg-ui-bg-disabled disabled:border-ui-border-base disabled:text-ui-fg-disabled disabled:!shadow-none disabled:after:hidden\",\n    \"after:absolute after:inset-0 after:content-['']\"\n  ),\n  {\n    variants: {\n      variant: {\n        primary: clx(\n          \"shadow-buttons-colored text-ui-fg-on-inverted border-ui-border-loud bg-ui-button-inverted after:button-inverted-gradient\",\n          \"hover:bg-ui-button-inverted-hover hover:after:button-inverted-hover-gradient\",\n          \"active:bg-ui-button-inverted-pressed active:after:button-inverted-pressed-gradient\",\n          \"focus:!shadow-buttons-colored-focus\"\n        ),\n        secondary: clx(\n          \"shadow-buttons-neutral text-ui-fg-base border-ui-border-base bg-ui-button-neutral after:button-neutral-gradient\",\n          \"hover:bg-ui-button-neutral-hover hover:after:button-neutral-hover-gradient\",\n          \"active:bg-ui-button-neutral-pressed active:after:button-neutral-pressed-gradient\",\n          \"focus:shadow-buttons-neutral-focus\"\n        ),\n        transparent: clx(\n          \"text-ui-fg-base border-ui-border-transparent bg-ui-button-transparent\",\n          \"hover:bg-ui-button-transparent-hover\",\n          \"active:bg-ui-button-transparent-pressed active:border-ui-border-base\",\n          \"focus:shadow-borders-focus focus:bg-ui-bg-base focus:border-ui-border-base\",\n          \"disabled:!border-none disabled:!bg-transparent disabled:!shadow-none\"\n        ),\n        danger: clx(\n          \"shadow-buttons-neutral text-ui-fg-on-color border-ui-border-danger bg-ui-button-danger after:button-danger-gradient\",\n          \"hover:bg-ui-button-danger-hover hover:after:button-danger-hover-gradient\",\n          \"active:bg-ui-button-danger-pressed active:after:button-danger-pressed-gradient\",\n          \"focus:shadow-buttons-neutral-focus\"\n        ),\n      },\n      size: {\n        base: \"txt-compact-small-plus gap-x-1 px-2 py-[5px]\",\n        large: \"txt-compact-medium-plus gap-x-1 px-3 py-[9px]\",\n        xlarge: \"txt-compact-large-plus gap-x-1 px-4 py-[13px]\",\n      },\n    },\n    defaultVariants: {\n      size: \"base\",\n      variant: \"primary\",\n    },\n  }\n)\n\ninterface ButtonProps\n  extends React.ComponentPropsWithoutRef<\"button\">,\n    VariantProps<typeof buttonVariants> {\n  isLoading?: boolean\n  asChild?: boolean\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      variant = \"primary\",\n      size = \"base\",\n      className,\n      asChild = false,\n      children,\n      isLoading = false,\n      disabled,\n      ...props\n    },\n    ref\n  ) => {\n    const Component = asChild ? Slot : \"button\"\n\n    /**\n     * In the case of a button where asChild is true, and isLoading is true, we ensure that\n     * only on element is passed as a child to the Slot component. This is because the Slot\n     * component only accepts a single child.\n     */\n    const renderInner = () => {\n      if (isLoading) {\n        return (\n          <span className=\"pointer-events-none\">\n            <div\n              className={clx(\n                \"bg-ui-bg-disabled absolute inset-0 flex items-center justify-center rounded-md\"\n              )}\n            >\n              <Spinner className=\"animate-spin\" />\n            </div>\n            {children}\n          </span>\n        )\n      }\n\n      return children\n    }\n\n    return (\n      <Component\n        ref={ref}\n        {...props}\n        className={clx(buttonVariants({ variant, size }), className)}\n        disabled={disabled || isLoading}\n      >\n        {renderInner()}\n      </Component>\n    )\n  }\n)\nButton.displayName = \"Button\"\n\nexport { Button, buttonVariants }\n"]}

package/dist/cjs/components/calendar/calendar.js

@@ -6,8 +6,8 @@ const tslib_1 = require("tslib");
 const icons_1 = require("@medusajs/icons");
 const React = tslib_1.__importStar(require("react"));
 const react_day_picker_1 = require("react-day-picker");
-const button_1 = require("../button");
 const clx_1 = require("../../utils/clx");
+const icon_button_1 = require("../icon-button");
 const Calendar = ({ className, classNames, mode = "single", showOutsideDays = true, ...props }) => {
     return (React.createElement(react_day_picker_1.DayPicker, { mode: mode, showOutsideDays: showOutsideDays, className: (0, clx_1.clx)(className), classNames: {
             months: "flex flex-col sm:flex-row",
@@ -15,14 +15,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: (0, clx_1.clx)((0, button_1.buttonVariants)({ variant: "secondary", format: "icon" }), "h-8 w-8"),
+            nav_button: (0, clx_1.clx)((0, icon_button_1.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: (0, clx_1.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",
@@ -55,7 +55,7 @@ const Day = ({ date, displayMonth }) => {
         return (React.createElement("div", { ...divProps, className: (0, clx_1.clx)("flex items-center justify-center", divProps.className) }));
     }
     const { children: buttonChildren, className: buttonClassName, ...buttonPropsRest } = buttonProps;
-    return (React.createElement("button", { ref: ref, ...buttonPropsRest, className: (0, clx_1.clx)("relative", buttonClassName) },
+    return (React.createElement("button", { ref: ref, ...buttonPropsRest, type: "button", className: (0, clx_1.clx)("relative", buttonClassName) },
         buttonChildren,
         today && (React.createElement("span", { className: (0, clx_1.clx)("absolute right-[5px] top-[5px] h-1 w-1 rounded-full", {
                 "bg-ui-fg-interactive": !selected,

package/dist/cjs/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/cjs/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/cjs/components/code-block/code-block.js

@@ -3,41 +3,41 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CodeBlock = void 0;
 const tslib_1 = require("tslib");
+const prism_react_renderer_1 = require("prism-react-renderer");
+const React = tslib_1.__importStar(require("react"));
 const copy_1 = require("../copy");
 const clx_1 = require("../../utils/clx");
-const prism_react_renderer_1 = require("prism-react-renderer");
-const react_1 = tslib_1.__importStar(require("react"));
-const CodeBlockContext = (0, react_1.createContext)(null);
+const CodeBlockContext = React.createContext(null);
 const useCodeBlockContext = () => {
-    const context = (0, react_1.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] = (0, react_1.useState)(snippets[0]);
-    return (react_1.default.createElement(CodeBlockContext.Provider, { value: { snippets, active, setActive } },
-        react_1.default.createElement("div", { className: (0, clx_1.clx)("border-ui-code-border overflow-hidden rounded-lg border", className), ...props }, children)));
+    const [active, setActive] = React.useState(snippets[0]);
+    return (React.createElement(CodeBlockContext.Provider, { value: { snippets, active, setActive } },
+        React.createElement("div", { className: (0, clx_1.clx)("border-ui-code-border overflow-hidden rounded-lg border", className), ...props }, children)));
 };
 const HeaderComponent = ({ children, className, hideLabels = false, ...props }) => {
     const { snippets, active, setActive } = useCodeBlockContext();
-    return (react_1.default.createElement("div", { className: (0, clx_1.clx)("border-b-ui-code-border bg-ui-code-bg-header flex items-center gap-2 border-b px-4 py-3", className), ...props },
+    return (React.createElement("div", { className: (0, clx_1.clx)("border-b-ui-code-border bg-ui-code-bg-header flex items-center gap-2 border-b px-4 py-3", className), ...props },
         !hideLabels &&
-            snippets.map((snippet) => (react_1.default.createElement("div", { className: (0, clx_1.clx)("text-ui-code-text-subtle txt-compact-small-plus cursor-pointer rounded-full border border-transparent px-3 py-2 transition-all", {
+            snippets.map((snippet) => (React.createElement("div", { className: (0, clx_1.clx)("text-ui-code-text-subtle txt-compact-small-plus cursor-pointer rounded-full border border-transparent px-3 py-2 transition-all", {
                     "text-ui-code-text-base border-ui-code-border bg-ui-code-bg-base cursor-default": active.label === snippet.label,
                 }), key: snippet.label, onClick: () => setActive(snippet) }, snippet.label))),
         children));
 };
 const Meta = ({ className, ...props }) => {
-    return (react_1.default.createElement("div", { className: (0, clx_1.clx)("text-ui-code-text-subtle ml-auto", className), ...props }));
+    return (React.createElement("div", { className: (0, clx_1.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_1.default.createElement("div", { className: (0, clx_1.clx)("bg-ui-code-bg-base relative p-4", className), ...props },
-        react_1.default.createElement(copy_1.Copy, { content: active.code, className: "text-ui-code-icon absolute right-4 top-4" }),
-        react_1.default.createElement("div", { className: "max-w-[90%]" },
-            react_1.default.createElement(prism_react_renderer_1.Highlight, { theme: {
+    return (React.createElement("div", { className: (0, clx_1.clx)("bg-ui-code-bg-base relative p-4", className), ...props },
+        React.createElement(copy_1.Copy, { content: active.code, className: "text-ui-code-icon absolute right-4 top-4" }),
+        React.createElement("div", { className: "max-w-[90%]" },
+            React.createElement(prism_react_renderer_1.Highlight, { theme: {
                     ...prism_react_renderer_1.themes.palenight,
                     plain: {
                         color: "rgba(249, 250, 251, 1)",
@@ -58,12 +58,12 @@ const Body = ({ className, hideLineNumbers = false, ...props }) => {
                         },
                         ...prism_react_renderer_1.themes.palenight.styles,
                     ],
-                }, code: active.code, language: active.language }, ({ style, tokens, getLineProps, getTokenProps }) => (react_1.default.createElement("pre", { className: "txt-compact-small whitespace-pre-wrap bg-transparent font-mono", style: {
+                }, code: active.code, language: active.language }, ({ style, tokens, getLineProps, getTokenProps }) => (React.createElement("pre", { className: "txt-compact-small whitespace-pre-wrap bg-transparent font-mono", style: {
                     ...style,
                     background: "transparent",
-                } }, tokens.map((line, i) => (react_1.default.createElement("div", { key: i, ...getLineProps({ line }), className: "flex" },
-                !hideLineNumbers && (react_1.default.createElement("span", { className: "text-ui-code-text-subtle" }, i + 1)),
-                react_1.default.createElement("div", { className: "pl-4" }, line.map((token, key) => (react_1.default.createElement("span", { key: key, ...getTokenProps({ token }) })))))))))))));
+                } }, tokens.map((line, i) => (React.createElement("div", { key: i, ...getLineProps({ line }), className: "flex" },
+                !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 });
 exports.CodeBlock = CodeBlock;

package/dist/cjs/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/cjs/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 };