@acmekit/ui 4.1.1

package/dist/esm/components/dropdown-menu/dropdown-menu.js

@@ -0,0 +1,128 @@
+"use client";
+import { CheckMini, ChevronRightMini, EllipseMiniSolid } from "@acmekit/icons";
+import { DropdownMenu as RadixDropdownMenu } from "radix-ui";
+import * as React from "react";
+import { clx } from "../../utils/clx";
+/**
+ * This component is based on the [Radix UI Dropdown Menu](https://www.radix-ui.com/primitives/docs/components/dropdown-menu) primitive.
+ */
+const Root = RadixDropdownMenu.Root;
+Root.displayName = "DropdownMenu";
+/**
+ * This component is based on the [Radix UI Dropdown Menu Trigger](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#trigger) primitive.
+ */
+const Trigger = RadixDropdownMenu.Trigger;
+Trigger.displayName = "DropdownMenu.Trigger";
+/**
+ * This component is based on the [Radix UI Dropdown Menu Group](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#group) primitive.
+ */
+const Group = RadixDropdownMenu.Group;
+Group.displayName = "DropdownMenu.Group";
+/**
+ * This component is based on the [Radix UI Dropdown Menu Sub](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#sub) primitive.
+ */
+const SubMenu = RadixDropdownMenu.Sub;
+SubMenu.displayName = "DropdownMenu.SubMenu";
+/**
+ * This component is based on the [Radix UI Dropdown Menu RadioGroup](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#radiogroup) primitive.
+ */
+const RadioGroup = RadixDropdownMenu.RadioGroup;
+RadioGroup.displayName = "DropdownMenu.RadioGroup";
+/**
+ * This component is based on the [Radix UI Dropdown Menu SubTrigger](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#subtrigger) primitive.
+ */
+const SubMenuTrigger = React.forwardRef(({ className, children, ...props }, ref) => (React.createElement(RadixDropdownMenu.SubTrigger, { ref: ref, className: clx("bg-ui-bg-component text-ui-fg-base txt-compact-small relative flex cursor-pointer select-none items-center rounded-md px-2 py-1.5 outline-none transition-colors", "focus-visible:bg-ui-bg-component-hover focus:bg-ui-bg-component-hover", "active:bg-ui-bg-component-hover", "data-[disabled]:text-ui-fg-disabled data-[disabled]:pointer-events-none", "data-[state=open]:!bg-ui-bg-component-hover", className), ...props },
+    children,
+    React.createElement(ChevronRightMini, { className: "text-ui-fg-muted ml-auto" }))));
+SubMenuTrigger.displayName = "DropdownMenu.SubMenuTrigger";
+/**
+ * This component is based on the [Radix UI Dropdown Menu SubContent](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#subcontent) primitive.
+ */
+const SubMenuContent = React.forwardRef(({ className, collisionPadding = 8, ...props }, ref) => (React.createElement(RadixDropdownMenu.Portal, null,
+    React.createElement(RadixDropdownMenu.SubContent, { ref: ref, collisionPadding: collisionPadding, className: clx("bg-ui-bg-component text-ui-fg-base shadow-elevation-flyout max-h-[var(--radix-popper-available-height)] min-w-[220px] overflow-hidden rounded-lg p-1", "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", className), ...props }))));
+SubMenuContent.displayName = "DropdownMenu.SubMenuContent";
+/**
+ * This component is based on the [Radix UI Dropdown Menu Content](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#content) primitive.
+ */
+const Content = React.forwardRef(({ className, 
+/**
+ * The space in pixels between the dropdown menu and its trigger element.
+ */
+sideOffset = 8, 
+/**
+ * The distance in pixels from the boundary edges where collision detection should occur.
+ */
+collisionPadding = 8, 
+/**
+ * The alignment of the dropdown menu relative to its trigger element.
+ *
+ * @defaultValue center
+ */
+align = "center", ...props }, ref) => (React.createElement(RadixDropdownMenu.Portal, null,
+    React.createElement(RadixDropdownMenu.Content, { ref: ref, sideOffset: sideOffset, align: align, collisionPadding: collisionPadding, className: clx("bg-ui-bg-component text-ui-fg-base shadow-elevation-flyout max-h-[var(--radix-popper-available-height)] min-w-[220px] overflow-hidden rounded-lg p-1", "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", className), ...props }))));
+Content.displayName = "DropdownMenu.Content";
+/**
+ * This component is based on the [Radix UI Dropdown Menu Item](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#item) primitive.
+ */
+const Item = React.forwardRef(({ className, ...props }, ref) => (React.createElement(RadixDropdownMenu.Item, { ref: ref, className: clx("bg-ui-bg-component text-ui-fg-base txt-compact-small relative flex cursor-pointer select-none items-center rounded-md px-2 py-1.5 outline-none transition-colors", "focus-visible:bg-ui-bg-component-hover focus:bg-ui-bg-component-hover", "active:bg-ui-bg-component-hover", "data-[disabled]:text-ui-fg-disabled data-[disabled]:pointer-events-none", className), ...props })));
+Item.displayName = "DropdownMenu.Item";
+/**
+ * This component is based on the [Radix UI Dropdown Menu CheckboxItem](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#checkboxitem) primitive.
+ */
+const CheckboxItem = React.forwardRef(({ className, children, checked, ...props }, ref) => (React.createElement(RadixDropdownMenu.CheckboxItem, { ref: ref, className: clx("bg-ui-bg-component text-ui-fg-base txt-compact-small relative flex cursor-pointer select-none items-center rounded-md py-1.5 pl-[31px] pr-2 outline-none transition-colors", "focus-visible:bg-ui-bg-component-hover focus:bg-ui-bg-component-hover", "active:bg-ui-bg-component-hover", "data-[disabled]:text-ui-fg-disabled data-[disabled]:pointer-events-none", "data-[state=checked]:txt-compact-small-plus", className), checked: checked, ...props },
+    React.createElement("span", { className: "absolute left-2 flex size-[15px] items-center justify-center" },
+        React.createElement(RadixDropdownMenu.ItemIndicator, null,
+            React.createElement(CheckMini, null))),
+    children)));
+CheckboxItem.displayName = "DropdownMenu.CheckboxItem";
+/**
+ * This component is based on the [Radix UI Dropdown Menu RadioItem](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#radioitem) primitive.
+ */
+const RadioItem = React.forwardRef(({ className, children, ...props }, ref) => (React.createElement(RadixDropdownMenu.RadioItem, { ref: ref, className: clx("bg-ui-bg-component txt-compact-small relative flex cursor-pointer select-none items-center rounded-md py-1.5 pl-[31px] pr-2 outline-none transition-colors", "focus-visible:bg-ui-bg-component-hover focus:bg-ui-bg-component-hover", "active:bg-ui-bg-component-hover", "data-[disabled]:text-ui-fg-disabled data-[disabled]:pointer-events-none", "data-[state=checked]:txt-compact-small-plus", className), ...props },
+    React.createElement("span", { className: "absolute left-2 flex size-[15px] items-center justify-center" },
+        React.createElement(RadixDropdownMenu.ItemIndicator, null,
+            React.createElement(EllipseMiniSolid, { className: "text-ui-fg-base" }))),
+    children)));
+RadioItem.displayName = "DropdownMenu.RadioItem";
+/**
+ * This component is based on the [Radix UI Dropdown Menu Label](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#label) primitive.
+ */
+const Label = React.forwardRef(({ className, ...props }, ref) => (React.createElement(RadixDropdownMenu.Label, { ref: ref, className: clx("text-ui-fg-subtle txt-compact-xsmall-plus", className), ...props })));
+Label.displayName = "DropdownMenu.Label";
+/**
+ * This component is based on the [Radix UI Dropdown Menu Separator](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#separator) primitive.
+ */
+const Separator = React.forwardRef(({ className, ...props }, ref) => (React.createElement(RadixDropdownMenu.Separator, { ref: ref, className: clx("bg-ui-border-component border-t-ui-border-menu-top border-b-ui-border-menu-bot -mx-1 my-1 h-0.5 border-b border-t", className), ...props })));
+Separator.displayName = "DropdownMenu.Separator";
+/**
+ * This component is based on the `span` element and supports all of its props
+ */
+const Shortcut = ({ className, ...props }) => {
+    return (React.createElement("span", { className: clx("text-ui-fg-subtle txt-compact-small ml-auto tracking-widest", className), ...props }));
+};
+Shortcut.displayName = "DropdownMenu.Shortcut";
+/**
+ * This component is based on the `span` element and supports all of its props
+ */
+const Hint = ({ className, ...props }) => {
+    return (React.createElement("span", { className: clx("text-ui-fg-subtle txt-compact-small ml-auto tracking-widest", className), ...props }));
+};
+Hint.displayName = "DropdownMenu.Hint";
+const DropdownMenu = Object.assign(Root, {
+    Trigger,
+    Group,
+    SubMenu,
+    SubMenuContent,
+    SubMenuTrigger,
+    Content,
+    Item,
+    CheckboxItem,
+    RadioGroup,
+    RadioItem,
+    Label,
+    Separator,
+    Shortcut,
+    Hint,
+});
+export { DropdownMenu };
+//# sourceMappingURL=dropdown-menu.js.map

package/dist/esm/components/dropdown-menu/dropdown-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-menu.js","sourceRoot":"","sources":["../../../../src/components/dropdown-menu/dropdown-menu.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\n\nimport { CheckMini, ChevronRightMini, EllipseMiniSolid } from \"@acmekit/icons\"\nimport { DropdownMenu as RadixDropdownMenu } from \"radix-ui\"\nimport * as React from \"react\"\n\nimport { clx } from \"@/utils/clx\"\n\n/**\n * This component is based on the [Radix UI Dropdown Menu](https://www.radix-ui.com/primitives/docs/components/dropdown-menu) primitive.\n */\nconst Root = RadixDropdownMenu.Root\nRoot.displayName = \"DropdownMenu\"\n\n/**\n * This component is based on the [Radix UI Dropdown Menu Trigger](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#trigger) primitive.\n */\nconst Trigger = RadixDropdownMenu.Trigger\nTrigger.displayName = \"DropdownMenu.Trigger\"\n\n/**\n * This component is based on the [Radix UI Dropdown Menu Group](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#group) primitive.\n */\nconst Group = RadixDropdownMenu.Group\nGroup.displayName = \"DropdownMenu.Group\"\n\n/**\n * This component is based on the [Radix UI Dropdown Menu Sub](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#sub) primitive.\n */\nconst SubMenu = RadixDropdownMenu.Sub\nSubMenu.displayName = \"DropdownMenu.SubMenu\"\n\n/**\n * This component is based on the [Radix UI Dropdown Menu RadioGroup](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#radiogroup) primitive.\n */\nconst RadioGroup = RadixDropdownMenu.RadioGroup\nRadioGroup.displayName = \"DropdownMenu.RadioGroup\"\n\n/**\n * This component is based on the [Radix UI Dropdown Menu SubTrigger](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#subtrigger) primitive.\n */\nconst SubMenuTrigger = React.forwardRef<\n  React.ElementRef<typeof RadixDropdownMenu.SubTrigger>,\n  React.ComponentPropsWithoutRef<typeof RadixDropdownMenu.SubTrigger>\n>(({ className, children, ...props }, ref) => (\n  <RadixDropdownMenu.SubTrigger\n    ref={ref}\n    className={clx(\n      \"bg-ui-bg-component text-ui-fg-base txt-compact-small relative flex cursor-pointer select-none items-center rounded-md px-2 py-1.5 outline-none transition-colors\",\n      \"focus-visible:bg-ui-bg-component-hover focus:bg-ui-bg-component-hover\",\n      \"active:bg-ui-bg-component-hover\",\n      \"data-[disabled]:text-ui-fg-disabled data-[disabled]:pointer-events-none\",\n      \"data-[state=open]:!bg-ui-bg-component-hover\",\n      className\n    )}\n    {...props}\n  >\n    {children}\n    <ChevronRightMini className=\"text-ui-fg-muted ml-auto\" />\n  </RadixDropdownMenu.SubTrigger>\n))\nSubMenuTrigger.displayName = \"DropdownMenu.SubMenuTrigger\"\n\n/**\n * This component is based on the [Radix UI Dropdown Menu SubContent](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#subcontent) primitive.\n */\nconst SubMenuContent = React.forwardRef<\n  React.ElementRef<typeof RadixDropdownMenu.SubContent>,\n  React.ComponentPropsWithoutRef<typeof RadixDropdownMenu.SubContent>\n>(({ className, collisionPadding = 8, ...props }, ref) => (\n  <RadixDropdownMenu.Portal>\n    <RadixDropdownMenu.SubContent\n      ref={ref}\n      collisionPadding={collisionPadding}\n      className={clx(\n        \"bg-ui-bg-component text-ui-fg-base shadow-elevation-flyout max-h-[var(--radix-popper-available-height)] min-w-[220px] overflow-hidden rounded-lg p-1\",\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        className\n      )}\n      {...props}\n    />\n  </RadixDropdownMenu.Portal>\n))\nSubMenuContent.displayName = \"DropdownMenu.SubMenuContent\"\n\n/**\n * This component is based on the [Radix UI Dropdown Menu Content](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#content) primitive.\n */\nconst Content = React.forwardRef<\n  React.ElementRef<typeof RadixDropdownMenu.Content>,\n  React.ComponentPropsWithoutRef<typeof RadixDropdownMenu.Content>\n>(\n  (\n    {\n      className,\n      /**\n       * The space in pixels between the dropdown menu and its trigger element.\n       */\n      sideOffset = 8,\n      /**\n       * The distance in pixels from the boundary edges where collision detection should occur.\n       */\n      collisionPadding = 8,\n      /**\n       * The alignment of the dropdown menu relative to its trigger element.\n       * \n       * @defaultValue center\n       */\n      align = \"center\",\n      ...props\n    },\n    ref\n  ) => (\n    <RadixDropdownMenu.Portal>\n      <RadixDropdownMenu.Content\n        ref={ref}\n        sideOffset={sideOffset}\n        align={align}\n        collisionPadding={collisionPadding}\n        className={clx(\n          \"bg-ui-bg-component text-ui-fg-base shadow-elevation-flyout max-h-[var(--radix-popper-available-height)] min-w-[220px] overflow-hidden rounded-lg p-1\",\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          className\n        )}\n        {...props}\n      />\n    </RadixDropdownMenu.Portal>\n  )\n)\nContent.displayName = \"DropdownMenu.Content\"\n\n/**\n * This component is based on the [Radix UI Dropdown Menu Item](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#item) primitive.\n */\nconst Item = React.forwardRef<\n  React.ElementRef<typeof RadixDropdownMenu.Item>,\n  React.ComponentPropsWithoutRef<typeof RadixDropdownMenu.Item>\n>(({ className, ...props }, ref) => (\n  <RadixDropdownMenu.Item\n    ref={ref}\n    className={clx(\n      \"bg-ui-bg-component text-ui-fg-base txt-compact-small relative flex cursor-pointer select-none items-center rounded-md px-2 py-1.5 outline-none transition-colors\",\n      \"focus-visible:bg-ui-bg-component-hover focus:bg-ui-bg-component-hover\",\n      \"active:bg-ui-bg-component-hover\",\n      \"data-[disabled]:text-ui-fg-disabled data-[disabled]:pointer-events-none\",\n      className\n    )}\n    {...props}\n  />\n))\nItem.displayName = \"DropdownMenu.Item\"\n\n/**\n * This component is based on the [Radix UI Dropdown Menu CheckboxItem](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#checkboxitem) primitive.\n */\nconst CheckboxItem = React.forwardRef<\n  React.ElementRef<typeof RadixDropdownMenu.CheckboxItem>,\n  React.ComponentPropsWithoutRef<typeof RadixDropdownMenu.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => (\n  <RadixDropdownMenu.CheckboxItem\n    ref={ref}\n    className={clx(\n      \"bg-ui-bg-component text-ui-fg-base txt-compact-small relative flex cursor-pointer select-none items-center rounded-md py-1.5 pl-[31px] pr-2 outline-none transition-colors\",\n      \"focus-visible:bg-ui-bg-component-hover focus:bg-ui-bg-component-hover\",\n      \"active:bg-ui-bg-component-hover\",\n      \"data-[disabled]:text-ui-fg-disabled data-[disabled]:pointer-events-none\",\n      \"data-[state=checked]:txt-compact-small-plus\",\n      className\n    )}\n    checked={checked}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex size-[15px] items-center justify-center\">\n      <RadixDropdownMenu.ItemIndicator>\n        <CheckMini />\n      </RadixDropdownMenu.ItemIndicator>\n    </span>\n    {children}\n  </RadixDropdownMenu.CheckboxItem>\n))\nCheckboxItem.displayName = \"DropdownMenu.CheckboxItem\"\n\n/**\n * This component is based on the [Radix UI Dropdown Menu RadioItem](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#radioitem) primitive.\n */\nconst RadioItem = React.forwardRef<\n  React.ElementRef<typeof RadixDropdownMenu.RadioItem>,\n  React.ComponentPropsWithoutRef<typeof RadixDropdownMenu.RadioItem>\n>(({ className, children, ...props }, ref) => (\n  <RadixDropdownMenu.RadioItem\n    ref={ref}\n    className={clx(\n      \"bg-ui-bg-component txt-compact-small relative flex cursor-pointer select-none items-center rounded-md py-1.5 pl-[31px] pr-2 outline-none transition-colors\",\n      \"focus-visible:bg-ui-bg-component-hover focus:bg-ui-bg-component-hover\",\n      \"active:bg-ui-bg-component-hover\",\n      \"data-[disabled]:text-ui-fg-disabled data-[disabled]:pointer-events-none\",\n      \"data-[state=checked]:txt-compact-small-plus\",\n      className\n    )}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex size-[15px] items-center justify-center\">\n      <RadixDropdownMenu.ItemIndicator>\n        <EllipseMiniSolid className=\"text-ui-fg-base\" />\n      </RadixDropdownMenu.ItemIndicator>\n    </span>\n    {children}\n  </RadixDropdownMenu.RadioItem>\n))\nRadioItem.displayName = \"DropdownMenu.RadioItem\"\n\n/**\n * This component is based on the [Radix UI Dropdown Menu Label](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#label) primitive.\n */\nconst Label = React.forwardRef<\n  React.ElementRef<typeof RadixDropdownMenu.Label>,\n  React.ComponentPropsWithoutRef<typeof RadixDropdownMenu.Label>\n>(({ className, ...props }, ref) => (\n  <RadixDropdownMenu.Label\n    ref={ref}\n    className={clx(\"text-ui-fg-subtle txt-compact-xsmall-plus\", className)}\n    {...props}\n  />\n))\nLabel.displayName = \"DropdownMenu.Label\"\n\n/**\n * This component is based on the [Radix UI Dropdown Menu Separator](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#separator) primitive.\n */\nconst Separator = React.forwardRef<\n  React.ElementRef<typeof RadixDropdownMenu.Separator>,\n  React.ComponentPropsWithoutRef<typeof RadixDropdownMenu.Separator>\n>(({ className, ...props }, ref) => (\n  <RadixDropdownMenu.Separator\n    ref={ref}\n    className={clx(\n      \"bg-ui-border-component border-t-ui-border-menu-top border-b-ui-border-menu-bot -mx-1 my-1 h-0.5 border-b border-t\",\n      className\n    )}\n    {...props}\n  />\n))\nSeparator.displayName = \"DropdownMenu.Separator\"\n\n/**\n * This component is based on the `span` element and supports all of its props\n */\nconst Shortcut = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span\n      className={clx(\n        \"text-ui-fg-subtle txt-compact-small ml-auto tracking-widest\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\nShortcut.displayName = \"DropdownMenu.Shortcut\"\n\n/**\n * This component is based on the `span` element and supports all of its props\n */\nconst Hint = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span\n      className={clx(\n        \"text-ui-fg-subtle txt-compact-small ml-auto tracking-widest\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\nHint.displayName = \"DropdownMenu.Hint\"\n\nconst DropdownMenu = Object.assign(Root, {\n  Trigger,\n  Group,\n  SubMenu,\n  SubMenuContent,\n  SubMenuTrigger,\n  Content,\n  Item,\n  CheckboxItem,\n  RadioGroup,\n  RadioItem,\n  Label,\n  Separator,\n  Shortcut,\n  Hint,\n})\n\nexport { DropdownMenu }\n"]}

package/dist/esm/components/dropdown-menu/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./dropdown-menu";
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/dropdown-menu/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/dropdown-menu/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAA"}

package/dist/esm/components/dropdown-menu/index.js

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

package/dist/esm/components/dropdown-menu/index.js.map

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

package/dist/esm/components/focus-modal/focus-modal.d.ts

@@ -0,0 +1,46 @@
+import { Dialog as RadixDialog } from "radix-ui";
+import * as React from "react";
+/**
+ * @prop defaultOpen - Whether the modal is opened by default.
+ * @prop open - Whether the modal is opened.
+ * @prop onOpenChange - A function to handle when the modal is opened or closed.
+ */
+interface FocusModalRootProps extends React.ComponentPropsWithoutRef<typeof RadixDialog.Root> {
+}
+interface FocusModalTriggerProps extends React.ComponentPropsWithoutRef<typeof RadixDialog.Trigger> {
+}
+interface FocusModalPortalProps extends RadixDialog.DialogPortalProps {
+}
+/**
+ * The `FocusModal.Content` component uses this component to wrap the modal content.
+ * It accepts props from the [Radix UI Dialog Portal](https://www.radix-ui.com/primitives/docs/components/dialog#portal) component.
+ */
+declare const FocusModalPortal: {
+    (props: FocusModalPortalProps): React.JSX.Element;
+    displayName: string;
+};
+/**
+ * This component is used to create the overlay for the modal.
+ * It accepts props from the [Radix UI Dialog Overlay](https://www.radix-ui.com/primitives/docs/components/dialog#overlay) component.
+ */
+declare const FocusModalOverlay: React.ForwardRefExoticComponent<Omit<RadixDialog.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+interface FocusModalTitleProps extends React.ComponentPropsWithoutRef<typeof RadixDialog.Title> {
+}
+declare const FocusModal: {
+    (props: FocusModalRootProps): React.JSX.Element;
+    displayName: string;
+} & {
+    Trigger: React.ForwardRefExoticComponent<FocusModalTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+    Title: React.ForwardRefExoticComponent<FocusModalTitleProps & React.RefAttributes<HTMLHeadingElement>>;
+    Description: React.ForwardRefExoticComponent<RadixDialog.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
+    Content: React.ForwardRefExoticComponent<Omit<RadixDialog.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+        overlayProps?: React.ComponentPropsWithoutRef<typeof FocusModalOverlay>;
+        portalProps?: React.ComponentPropsWithoutRef<typeof FocusModalPortal>;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Header: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Body: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Close: React.ForwardRefExoticComponent<RadixDialog.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+    Footer: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+};
+export { FocusModal };
+//# sourceMappingURL=focus-modal.d.ts.map

package/dist/esm/components/focus-modal/focus-modal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus-modal.d.ts","sourceRoot":"","sources":["../../../../src/components/focus-modal/focus-modal.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,UAAU,CAAA;AAChD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B;;;;GAIG;AACH,UAAU,mBACR,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,WAAW,CAAC,IAAI,CAAC;CAAG;AAUpE,UAAU,sBAAuB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,WAAW,CAAC,OAAO,CAAC;CAAG;AAqBtG,UAAU,qBAAsB,SAAQ,WAAW,CAAC,iBAAiB;CAAG;AAExE;;;GAGG;AACH,QAAA,MAAM,gBAAgB;YAAW,qBAAqB;;CAIrD,CAAA;AAGD;;;GAGG;AACH,QAAA,MAAM,iBAAiB,0JAerB,CAAA;AAqFF,UAAU,oBAAqB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,WAAW,CAAC,KAAK,CAAC;CAAG;AAmClG,QAAA,MAAM,UAAU;YAlLe,mBAAmB;;;;;;;uBAoE/B,KAAK,CAAC,wBAAwB,CAAC,OAAO,iBAAiB,CAAC;sBACzD,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC;;;;;;CAsHvE,CAAA;AAEF,OAAO,EAAE,UAAU,EAAE,CAAA"}

package/dist/esm/components/focus-modal/focus-modal.js

@@ -0,0 +1,110 @@
+"use client";
+import { XMark } from "@acmekit/icons";
+import { Dialog as RadixDialog } from "radix-ui";
+import * as React from "react";
+import { IconButton } from "../icon-button";
+import { Kbd } from "../kbd";
+import { clx } from "../../utils/clx";
+/**
+ * This component is based on the [Radix UI Dialog](https://www.radix-ui.com/primitives/docs/components/dialog) primitives.
+ */
+const FocusModalRoot = (props) => {
+    return React.createElement(RadixDialog.Root, { ...props });
+};
+FocusModalRoot.displayName = "FocusModal";
+/**
+ * This component is used to create the trigger button that opens the modal.
+ * It accepts props from the [Radix UI Dialog Trigger](https://www.radix-ui.com/primitives/docs/components/dialog#trigger) component.
+ */
+const FocusModalTrigger = React.forwardRef((props, ref) => {
+    return React.createElement(RadixDialog.Trigger, { ref: ref, ...props });
+});
+FocusModalTrigger.displayName = "FocusModal.Trigger";
+/**
+ * This component is used to create the close button for the modal.
+ * It accepts props from the [Radix UI Dialog Close](https://www.radix-ui.com/primitives/docs/components/dialog#close) component.
+ */
+const FocusModalClose = RadixDialog.Close;
+FocusModalClose.displayName = "FocusModal.Close";
+/**
+ * The `FocusModal.Content` component uses this component to wrap the modal content.
+ * It accepts props from the [Radix UI Dialog Portal](https://www.radix-ui.com/primitives/docs/components/dialog#portal) component.
+ */
+const FocusModalPortal = (props) => {
+    return (React.createElement(RadixDialog.DialogPortal, { ...props }));
+};
+FocusModalPortal.displayName = "FocusModal.Portal";
+/**
+ * This component is used to create the overlay for the modal.
+ * It accepts props from the [Radix UI Dialog Overlay](https://www.radix-ui.com/primitives/docs/components/dialog#overlay) component.
+ */
+const FocusModalOverlay = React.forwardRef(({ className, ...props }, ref) => {
+    return (React.createElement(RadixDialog.Overlay, { ref: ref, className: clx("bg-ui-bg-overlay fixed inset-0", "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className), ...props }));
+});
+FocusModalOverlay.displayName = "FocusModal.Overlay";
+/**
+ * This component wraps the content of the modal.
+ * It accepts props from the [Radix UI Dialog Content](https://www.radix-ui.com/primitives/docs/components/dialog#content) component.
+ */
+const FocusModalContent = React.forwardRef(({ className, overlayProps, portalProps, ...props }, ref) => {
+    return (React.createElement(FocusModalPortal, { ...portalProps },
+        React.createElement(FocusModalOverlay, { ...overlayProps }),
+        React.createElement(RadixDialog.Content, { ref: ref, className: clx("bg-ui-bg-base shadow-elevation-modal fixed inset-2 flex flex-col overflow-hidden rounded-lg border outline-none", "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=open]:slide-in-from-bottom-0 data-[state=closed]:slide-in-from-bottom-2  duration-200", className), ...props })));
+});
+FocusModalContent.displayName = "FocusModal.Content";
+/**
+ * This component is used to wrap the header content of the modal.
+ * This component is based on the `div` element and supports all of its props
+ */
+const FocusModalHeader = React.forwardRef(({ children, className, ...props }, ref) => {
+    return (React.createElement("div", { ref: ref, className: clx("border-ui-border-base flex items-center justify-between gap-x-4 border-b px-4 py-2", className), ...props },
+        React.createElement("div", { className: "flex items-center gap-x-2" },
+            React.createElement(RadixDialog.Close, { asChild: true },
+                React.createElement(IconButton, { size: "small", type: "button", variant: "transparent" },
+                    React.createElement(XMark, null))),
+            React.createElement(Kbd, null, "esc")),
+        children));
+});
+FocusModalHeader.displayName = "FocusModal.Header";
+/**
+ * This component is used to wrap the footer content of the modal.
+ * This component is based on the `div` element and supports all of its props
+ */
+const FocusModalFooter = React.forwardRef(({ children, className, ...props }, ref) => {
+    return (React.createElement("div", { ref: ref, className: clx("border-ui-border-base flex items-center justify-end gap-x-2 border-t p-4", className), ...props }, children));
+});
+FocusModalFooter.displayName = "FocusModal.Footer";
+/**
+ * This component adds an accessible title to the modal.
+ * It accepts props from the [Radix UI Dialog Title](https://www.radix-ui.com/primitives/docs/components/dialog#title) component.
+ */
+const FocusModalTitle = React.forwardRef(({ className, ...props }, ref) => {
+    return (React.createElement(RadixDialog.Title, { ref: ref, ...props }));
+});
+FocusModalTitle.displayName = "FocusModal.Title";
+/**
+ * This component adds accessible description to the modal.
+ * It accepts props from the [Radix UI Dialog Description](https://www.radix-ui.com/primitives/docs/components/dialog#description) component.
+ */
+const FocusModalDescription = RadixDialog.Description;
+FocusModalDescription.displayName = "FocusModal.Description";
+/**
+ * This component is used to wrap the body content of the modal.
+ * This component is based on the `div` element and supports all of its props
+ */
+const FocusModalBody = React.forwardRef(({ className, ...props }, ref) => {
+    return React.createElement("div", { ref: ref, className: clx("flex-1", className), ...props });
+});
+FocusModalBody.displayName = "FocusModal.Body";
+const FocusModal = Object.assign(FocusModalRoot, {
+    Trigger: FocusModalTrigger,
+    Title: FocusModalTitle,
+    Description: FocusModalDescription,
+    Content: FocusModalContent,
+    Header: FocusModalHeader,
+    Body: FocusModalBody,
+    Close: FocusModalClose,
+    Footer: FocusModalFooter,
+});
+export { FocusModal };
+//# sourceMappingURL=focus-modal.js.map

package/dist/esm/components/focus-modal/focus-modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus-modal.js","sourceRoot":"","sources":["../../../../src/components/focus-modal/focus-modal.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\n\nimport { XMark } from \"@acmekit/icons\"\nimport { Dialog as RadixDialog } from \"radix-ui\"\nimport * as React from \"react\"\n\nimport { IconButton } from \"@/components/icon-button\"\nimport { Kbd } from \"@/components/kbd\"\nimport { clx } from \"@/utils/clx\"\n\n/**\n * @prop defaultOpen - Whether the modal is opened by default.\n * @prop open - Whether the modal is opened.\n * @prop onOpenChange - A function to handle when the modal is opened or closed.\n */\ninterface FocusModalRootProps\n  extends React.ComponentPropsWithoutRef<typeof RadixDialog.Root> {}\n\n/**\n * This component is based on the [Radix UI Dialog](https://www.radix-ui.com/primitives/docs/components/dialog) primitives.\n */\nconst FocusModalRoot = (props: FocusModalRootProps) => {\n  return <RadixDialog.Root {...props} />\n}\nFocusModalRoot.displayName = \"FocusModal\"\n\ninterface FocusModalTriggerProps extends React.ComponentPropsWithoutRef<typeof RadixDialog.Trigger> {}\n\n/**\n * This component is used to create the trigger button that opens the modal.\n * It accepts props from the [Radix UI Dialog Trigger](https://www.radix-ui.com/primitives/docs/components/dialog#trigger) component.\n */\nconst FocusModalTrigger = React.forwardRef<\n  React.ElementRef<typeof RadixDialog.Trigger>,\n  FocusModalTriggerProps\n>((props: FocusModalTriggerProps, ref) => {\n  return <RadixDialog.Trigger ref={ref} {...props} />\n})\nFocusModalTrigger.displayName = \"FocusModal.Trigger\"\n\n/**\n * This component is used to create the close button for the modal.\n * It accepts props from the [Radix UI Dialog Close](https://www.radix-ui.com/primitives/docs/components/dialog#close) component.\n */\nconst FocusModalClose = RadixDialog.Close\nFocusModalClose.displayName = \"FocusModal.Close\"\n\ninterface FocusModalPortalProps extends RadixDialog.DialogPortalProps {}\n\n/**\n * The `FocusModal.Content` component uses this component to wrap the modal content.\n * It accepts props from the [Radix UI Dialog Portal](https://www.radix-ui.com/primitives/docs/components/dialog#portal) component.\n */\nconst FocusModalPortal = (props: FocusModalPortalProps) => {\n  return (\n    <RadixDialog.DialogPortal {...props} />\n  )\n}\nFocusModalPortal.displayName = \"FocusModal.Portal\"\n\n/**\n * This component is used to create the overlay for the modal.\n * It accepts props from the [Radix UI Dialog Overlay](https://www.radix-ui.com/primitives/docs/components/dialog#overlay) component.\n */\nconst FocusModalOverlay = React.forwardRef<\n  React.ElementRef<typeof RadixDialog.Overlay>,\n  React.ComponentPropsWithoutRef<typeof RadixDialog.Overlay>\n>(({ className, ...props }, ref) => {\n  return (\n    <RadixDialog.Overlay\n      ref={ref}\n      className={clx(\n        \"bg-ui-bg-overlay fixed inset-0\",\n        \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n})\nFocusModalOverlay.displayName = \"FocusModal.Overlay\"\n\n/**\n * This component wraps the content of the modal.\n * It accepts props from the [Radix UI Dialog Content](https://www.radix-ui.com/primitives/docs/components/dialog#content) component.\n */\nconst FocusModalContent = React.forwardRef<\n  React.ElementRef<typeof RadixDialog.Content>,\n  React.ComponentPropsWithoutRef<typeof RadixDialog.Content> & {\n    overlayProps?: React.ComponentPropsWithoutRef<typeof FocusModalOverlay>\n    portalProps?: React.ComponentPropsWithoutRef<typeof FocusModalPortal>\n  }\n>(({ className, overlayProps, portalProps, ...props }, ref) => {\n  return (\n    <FocusModalPortal {...portalProps}>\n      <FocusModalOverlay {...overlayProps} />\n      <RadixDialog.Content\n        ref={ref}\n        className={clx(\n          \"bg-ui-bg-base shadow-elevation-modal fixed inset-2 flex flex-col overflow-hidden rounded-lg border outline-none\",\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=open]:slide-in-from-bottom-0 data-[state=closed]:slide-in-from-bottom-2  duration-200\",\n          className\n        )}\n        {...props}\n      />\n    </FocusModalPortal>\n  )\n})\nFocusModalContent.displayName = \"FocusModal.Content\"\n\n/**\n * This component is used to wrap the header content of the modal.\n * This component is based on the `div` element and supports all of its props\n */\nconst FocusModalHeader = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentPropsWithoutRef<\"div\">\n>(({ children, className, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      className={clx(\n        \"border-ui-border-base flex items-center justify-between gap-x-4 border-b px-4 py-2\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"flex items-center gap-x-2\">\n        <RadixDialog.Close asChild>\n          <IconButton size=\"small\" type=\"button\" variant=\"transparent\">\n            <XMark />\n          </IconButton>\n        </RadixDialog.Close>\n        <Kbd>esc</Kbd>\n      </div>\n      {children}\n    </div>\n  )\n})\nFocusModalHeader.displayName = \"FocusModal.Header\"\n\n/**\n * This component is used to wrap the footer content of the modal.\n * This component is based on the `div` element and supports all of its props\n */\nconst FocusModalFooter = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentPropsWithoutRef<\"div\">\n>(({ children, className, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      className={clx(\n        \"border-ui-border-base flex items-center justify-end gap-x-2 border-t p-4\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n})\nFocusModalFooter.displayName = \"FocusModal.Footer\"\n\ninterface FocusModalTitleProps extends React.ComponentPropsWithoutRef<typeof RadixDialog.Title> {}\n\n/**\n * This component adds an accessible title to the modal.\n * It accepts props from the [Radix UI Dialog Title](https://www.radix-ui.com/primitives/docs/components/dialog#title) component.\n */\nconst FocusModalTitle = React.forwardRef<\n  HTMLHeadingElement,\n  FocusModalTitleProps\n>(({ className, ...props }: FocusModalTitleProps, ref) => {\n  return (\n    <RadixDialog.Title ref={ref} {...props} />\n  )\n})\nFocusModalTitle.displayName = \"FocusModal.Title\"\n\n/**\n * This component adds accessible description to the modal.\n * It accepts props from the [Radix UI Dialog Description](https://www.radix-ui.com/primitives/docs/components/dialog#description) component.\n */\nconst FocusModalDescription = RadixDialog.Description\nFocusModalDescription.displayName = \"FocusModal.Description\"\n\n/**\n * This component is used to wrap the body content of the modal.\n * This component is based on the `div` element and supports all of its props\n */\nconst FocusModalBody = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentPropsWithoutRef<\"div\">\n>(({ className, ...props }, ref) => {\n  return <div ref={ref} className={clx(\"flex-1\", className)} {...props} />\n})\nFocusModalBody.displayName = \"FocusModal.Body\"\n\nconst FocusModal = Object.assign(FocusModalRoot, {\n  Trigger: FocusModalTrigger,\n  Title: FocusModalTitle,\n  Description: FocusModalDescription,\n  Content: FocusModalContent,\n  Header: FocusModalHeader,\n  Body: FocusModalBody,\n  Close: FocusModalClose,\n  Footer: FocusModalFooter,\n})\n\nexport { FocusModal }\n"]}

package/dist/esm/components/focus-modal/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./focus-modal";
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/focus-modal/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/focus-modal/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAA"}

package/dist/esm/components/focus-modal/index.js

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

package/dist/esm/components/focus-modal/index.js.map

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

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

@@ -0,0 +1,68 @@
+import { type VariantProps } from "cva";
+import * as React from "react";
+declare const headingVariants: (props?: ({
+    level?: "h1" | "h2" | "h3" | undefined;
+} & ({
+    class?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | /*elided*/ any | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined;
+    className?: never;
+} | {
+    class?: never;
+    className?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | /*elided*/ any | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined;
+})) | undefined) => string;
+interface HeadingProps extends VariantProps<typeof headingVariants>, React.HTMLAttributes<HTMLHeadingElement> {
+}
+/**
+ * This component is based on the heading element (`h1`, `h2`, etc...) depeneding on the specified level
+ * and supports all of its props
+ */
+declare const Heading: ({ level, className, ...props }: HeadingProps) => React.JSX.Element;
+export { Heading, headingVariants };
+//# sourceMappingURL=heading.d.ts.map

package/dist/esm/components/heading/heading.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"heading.d.ts","sourceRoot":"","sources":["../../../../src/components/heading/heading.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,KAAK,CAAA;AAC5C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,QAAA,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BAYnB,CAAA;AAEF,UAAU,YAAa,SAAQ,YAAY,CAAC,OAAO,eAAe,CAAC,EACjE,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC;CAAG;AAE7C;;;GAGG;AACH,QAAA,MAAM,OAAO,GAAI,gCAOd,YAAY,sBASd,CAAA;AAED,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,CAAA"}

package/dist/esm/components/heading/heading.js

@@ -0,0 +1,30 @@
+import { cva } from "cva";
+import * as React from "react";
+import { clx } from "../../utils/clx";
+const headingVariants = cva({
+    base: "font-sans font-medium",
+    variants: {
+        level: {
+            h1: "h1-core",
+            h2: "h2-core",
+            h3: "h3-core",
+        },
+    },
+    defaultVariants: {
+        level: "h1",
+    },
+});
+/**
+ * This component is based on the heading element (`h1`, `h2`, etc...) depeneding on the specified level
+ * and supports all of its props
+ */
+const Heading = ({ 
+/**
+ * The heading level which specifies which heading element is used.
+ */
+level = "h1", className, ...props }) => {
+    const Component = level || "h1";
+    return (React.createElement(Component, { className: clx(headingVariants({ level }), className), ...props }));
+};
+export { Heading, headingVariants };
+//# sourceMappingURL=heading.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"heading.js","sourceRoot":"","sources":["../../../../src/components/heading/heading.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAqB,MAAM,KAAK,CAAA;AAC5C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAA;AAEjC,MAAM,eAAe,GAAG,GAAG,CAAC;IAC1B,IAAI,EAAE,uBAAuB;IAC7B,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,EAAE,EAAE,SAAS;YACb,EAAE,EAAE,SAAS;YACb,EAAE,EAAE,SAAS;SACd;KACF;IACD,eAAe,EAAE;QACf,KAAK,EAAE,IAAI;KACZ;CACF,CAAC,CAAA;AAKF;;;GAGG;AACH,MAAM,OAAO,GAAG,CAAC;AACf;;GAEG;AACH,KAAK,GAAG,IAAI,EACZ,SAAS,EACT,GAAG,KAAK,EACK,EAAE,EAAE;IACjB,MAAM,SAAS,GAAG,KAAK,IAAI,IAAI,CAAA;IAE/B,OAAO,CACL,oBAAC,SAAS,IACR,SAAS,EAAE,GAAG,CAAC,eAAe,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,SAAS,CAAC,KACjD,KAAK,GACT,CACH,CAAA;AACH,CAAC,CAAA;AAED,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,CAAA","sourcesContent":["import { cva, type VariantProps } from \"cva\"\nimport * as React from \"react\"\n\nimport { clx } from \"@/utils/clx\"\n\nconst headingVariants = cva({\n  base: \"font-sans font-medium\",\n  variants: {\n    level: {\n      h1: \"h1-core\",\n      h2: \"h2-core\",\n      h3: \"h3-core\",\n    },\n  },\n  defaultVariants: {\n    level: \"h1\",\n  },\n})\n\ninterface HeadingProps extends VariantProps<typeof headingVariants>,\n  React.HTMLAttributes<HTMLHeadingElement> {}\n\n/**\n * This component is based on the heading element (`h1`, `h2`, etc...) depeneding on the specified level\n * and supports all of its props\n */\nconst Heading = ({ \n  /**\n   * The heading level which specifies which heading element is used.\n   */\n  level = \"h1\", \n  className, \n  ...props\n}: HeadingProps) => {\n  const Component = level || \"h1\"\n\n  return (\n    <Component\n      className={clx(headingVariants({ level }), className)}\n      {...props}\n    />\n  )\n}\n\nexport { Heading, headingVariants }\n"]}

package/dist/esm/components/heading/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./heading";
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/heading/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/heading/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA"}

package/dist/esm/components/heading/index.js

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

package/dist/esm/components/heading/index.js.map

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

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

@@ -0,0 +1,64 @@
+import { VariantProps } from "cva";
+import * as React from "react";
+declare const hintVariants: (props?: ({
+    variant?: "error" | "info" | undefined;
+} & ({
+    class?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | /*elided*/ any | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined;
+    className?: never;
+} | {
+    class?: never;
+    className?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | /*elided*/ any | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined;
+})) | undefined) => string;
+interface HintProps extends VariantProps<typeof hintVariants>, React.ComponentPropsWithoutRef<"span"> {
+}
+declare const Hint: React.ForwardRefExoticComponent<HintProps & React.RefAttributes<HTMLSpanElement>>;
+export { Hint };
+//# sourceMappingURL=hint.d.ts.map

package/dist/esm/components/hint/hint.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hint.d.ts","sourceRoot":"","sources":["../../../../src/components/hint/hint.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAO,MAAM,KAAK,CAAA;AACvC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BAWhB,CAAA;AAEF,UAAU,SACR,SAAQ,YAAY,CAAC,OAAO,YAAY,CAAC,EACvC,KAAK,CAAC,wBAAwB,CAAC,MAAM,CAAC;CAAG;AAE7C,QAAA,MAAM,IAAI,mFAwBT,CAAA;AAGD,OAAO,EAAE,IAAI,EAAE,CAAA"}

package/dist/esm/components/hint/hint.js

@@ -0,0 +1,29 @@
+import { ExclamationCircleSolid } from "@acmekit/icons";
+import { cva } from "cva";
+import * as React from "react";
+import { clx } from "../../utils/clx";
+const hintVariants = cva({
+    base: "txt-small",
+    variants: {
+        variant: {
+            info: "text-ui-fg-subtle",
+            error: "text-ui-fg-error grid grid-cols-[20px_1fr] gap-1 items-start",
+        },
+    },
+    defaultVariants: {
+        variant: "info",
+    },
+});
+const Hint = React.forwardRef(({ className, 
+/**
+ * The hint's style.
+ */
+variant = "info", children, ...props }, ref) => {
+    return (React.createElement("span", { ref: ref, className: clx(hintVariants({ variant }), className), ...props },
+        variant === "error" && React.createElement("div", { className: "size-5 flex items-center justify-center" },
+            React.createElement(ExclamationCircleSolid, null)),
+        children));
+});
+Hint.displayName = "Hint";
+export { Hint };
+//# sourceMappingURL=hint.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hint.js","sourceRoot":"","sources":["../../../../src/components/hint/hint.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,gBAAgB,CAAA;AACvD,OAAO,EAAgB,GAAG,EAAE,MAAM,KAAK,CAAA;AACvC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAA;AAEjC,MAAM,YAAY,GAAG,GAAG,CAAC;IACvB,IAAI,EAAE,WAAW;IACjB,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,IAAI,EAAE,mBAAmB;YACzB,KAAK,EAAE,8DAA8D;SACtE;KACF;IACD,eAAe,EAAE;QACf,OAAO,EAAE,MAAM;KAChB;CACF,CAAC,CAAA;AAMF,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAC3B,CACE,EACE,SAAS;AACT;;GAEG;AACH,OAAO,GAAG,MAAM,EAChB,QAAQ,EACR,GAAG,KAAK,EACE,EACZ,GAAG,EACH,EAAE;IACF,OAAO,CACL,8BACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,GAAG,CAAC,YAAY,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,CAAC,KAChD,KAAK;QAER,OAAO,KAAK,OAAO,IAAI,6BAAK,SAAS,EAAC,yCAAyC;YAAC,oBAAC,sBAAsB,OAAG,CAAM;QAChH,QAAQ,CACJ,CACR,CAAA;AACH,CAAC,CACF,CAAA;AACD,IAAI,CAAC,WAAW,GAAG,MAAM,CAAA;AAEzB,OAAO,EAAE,IAAI,EAAE,CAAA","sourcesContent":["import { ExclamationCircleSolid } from \"@acmekit/icons\"\nimport { VariantProps, cva } from \"cva\"\nimport * as React from \"react\"\n\nimport { clx } from \"@/utils/clx\"\n\nconst hintVariants = cva({\n  base: \"txt-small\",\n  variants: {\n    variant: {\n      info: \"text-ui-fg-subtle\",\n      error: \"text-ui-fg-error grid grid-cols-[20px_1fr] gap-1 items-start\",\n    },\n  },\n  defaultVariants: {\n    variant: \"info\",\n  },\n})\n\ninterface HintProps\n  extends VariantProps<typeof hintVariants>,\n    React.ComponentPropsWithoutRef<\"span\"> {}\n\nconst Hint = React.forwardRef<HTMLSpanElement, HintProps>(\n  (\n    {\n      className,\n      /**\n       * The hint's style.\n       */\n      variant = \"info\",\n      children,\n      ...props\n    }: HintProps,\n    ref\n  ) => {\n    return (\n      <span\n        ref={ref}\n        className={clx(hintVariants({ variant }), className)}\n        {...props}\n      >\n        {variant === \"error\" && <div className=\"size-5 flex items-center justify-center\"><ExclamationCircleSolid /></div>}\n        {children}\n      </span>\n    )\n  }\n)\nHint.displayName = \"Hint\"\n\nexport { Hint }\n"]}