@epilot/volt-ui 0.1.0

package/README.md

@@ -0,0 +1,252 @@
+# @epilot/volt-ui
+
+A clean, lightweight, and tree-shakeable design system library for React applications. Built with Tailwind CSS v4, Radix UI primitives, and TypeScript.
+
+📖 [View Storybook Documentation](https://v2--67c6bdb2c8953d85ee8fc349.chromatic.com/)
+
+## Features
+
+- 🌳 **Tree-shakeable**: Import only the components you need
+- 🎨 **Tailwind CSS v4**: No config needed, works with any framework
+- 🚀 **Zero runtime injection**: CSS is extracted at build time
+- 📦 **Modular**: Individual component imports for optimal bundle size
+- 🎯 **TypeScript**: Full type safety and IntelliSense support
+- 🌙 **Theme support**: Light and dark mode ready
+
+## Installation
+
+```bash
+npm install @epilot/volt-ui
+# or
+yarn add @epilot/volt-ui
+```
+
+## Quick Start
+
+### For React Applications
+
+```tsx
+import { Button } from "@epilot/volt-ui";
+
+function App() {
+  return <Button>Hello World</Button>;
+}
+```
+
+### For Tree Shaking (Recommended)
+
+```tsx
+// Import only what you need
+import { Button } from "@epilot/volt-ui/components/Button";
+```
+
+### CSS Artifacts and Which One To Use  
+
+```css
+/* Tailwind 4 self-compile: Use with your own TW v4 pipeline */
+@import "@epilot/volt-ui/volt-ui.theme.css";
+```
+
+```css
+/* Tailwind 4 precompiled: includes all component and theme utility classes */
+@import "@epilot/volt-ui/volt-ui.css";
+```
+
+```css
+/* Scoped build: volt-ui styles only apply within [data-cui] container */
+@import "@epilot/volt-ui/volt-ui.scoped.css";
+```
+
+```css
+/* Non-Tailwind or Tailwind 3 apps precompiled: includes all component and theme utility classes */
+@import "@epilot/volt-ui/volt-ui.flat.css";
+```
+
+```css
+/* Reset variants (opt-in) */
+@import "@epilot/volt-ui/reset.css";        /* Global reset (affects page) */
+@import "@epilot/volt-ui/reset.flat.css";   /* Flattened reset for non-TW/TW3 */
+@import "@epilot/volt-ui/reset.scoped.css"; /* Scoped reset under [data-cui] */
+```
+
+#### Scoped usage
+
+```tsx
+import "@epilot/volt-ui/volt-ui.scoped.css";
+
+export function ScopedArea() {
+  return (
+    <div data-cui>
+      {/* Your volt-ui components here are isolated from the host page */}
+    </div>
+  );
+}
+```
+
+#### Reset is now opt-in
+
+The main styles no longer include a global reset. Choose one of the reset variants:
+
+```ts
+// Global (affects entire page)
+import "@epilot/volt-ui/reset.css";
+
+// Flat (for non-Tailwind/Tailwind 3 pipelines)
+import "@epilot/volt-ui/reset.flat.css";
+
+// Scoped (only inside [data-cui])
+import "@epilot/volt-ui/reset.scoped.css";
+```
+
+
+### Scoped CSS for Micro Frontends (MFE)
+
+When embedding this library inside an MFE, you should scope the styles to your MFE root to prevent leaking styles outside of your container.
+
+Recommended approaches:
+
+1) Shadow DOM (recommended)
+- Mount your MFE in a Shadow Root and attach the stylesheet there. This encapsulates styles to your component only.
+
+2) Build-time prefixing
+- Use a CSS build step (e.g., PostCSS prefixing) in your host app to prefix all rules from `@epilot/volt-ui/volt-ui.flat.css` with your MFE root selector (for example `#epilot360-YourMFE`). This ensures all styles only apply inside that container.
+
+Note: Some preprocessors allow nesting an import under a selector. If your toolchain supports it, you can conceptually scope like this (example selector `#epilot360-YourMFE`):
+
+```css
+/* app-level stylesheet (consumer app) */
+#epilot360-entity {
+  /* Import the precompiled CSS so it only applies within your container */
+  @import "@epilot/volt-ui/volt-ui.flat.css";
+}
+```
+
+If your preprocessor does not support nested imports, prefer Shadow DOM or build-time prefixing.
+
+#### Shadow DOM injection in React (JS-scoped import)
+
+You can scope styles at runtime by rendering your MFE inside a Shadow Root and injecting the stylesheet there.
+
+```tsx
+// Example: mount your MFE into a Shadow Root with scoped styles
+import React from "react";
+import ReactDOM from "react-dom/client";
+// Vite/Webpack (asset url) style import. If unsupported, see the fallback below.
+import voltUiCssUrl from "@epilot/volt-ui/volt-ui.flat.css?url";
+import { Button } from "@epilot/volt-ui";
+
+const App = () => (
+  <div className="p-2 space-y-2">
+    <Button variant="primary">Hello from Shadow DOM</Button>
+  </div>
+);
+
+export const mountMFEWithShadowDOM = (hostElement: HTMLElement) => {
+  const shadowRoot = hostElement.attachShadow({ mode: "open" });
+
+  const link = document.createElement("link");
+  link.rel = "stylesheet";
+  link.href = voltUiCssUrl; // ensures styles are scoped to this Shadow Root
+  shadowRoot.appendChild(link);
+
+  const mountPoint = document.createElement("div");
+  shadowRoot.appendChild(mountPoint);
+
+  const root = ReactDOM.createRoot(mountPoint);
+  root.render(<App />);
+
+  return () => root.unmount();
+};
+```
+
+Fallback if your bundler does not support `?url` imports: pass a resolvable CSS URL yourself or fetch CSS text at runtime and inject it as a `<style>`:
+
+```ts
+// Given a cssUrl string (e.g., served by your host app), inject into the Shadow Root
+function injectScopedStyles(shadowRoot: ShadowRoot, cssUrl: string) {
+  const link = document.createElement("link");
+  link.rel = "stylesheet";
+  link.href = cssUrl;
+  shadowRoot.appendChild(link);
+}
+
+// Or, fetch and inline as a <style> (avoids extra request redirects but is synchronous after fetch)
+async function injectScopedInlineStyles(shadowRoot: ShadowRoot, cssUrl: string) {
+  const cssText = await fetch(cssUrl).then((r) => r.text());
+  const style = document.createElement("style");
+  style.textContent = cssText;
+  shadowRoot.appendChild(style);
+}
+```
+
+## Package Structure
+
+```
+@epilot/volt-ui/
+├── index.js                    # Main entry point
+├── styles/
+│   ├── volt-ui.css             # Tailwind 4 precompiled component styles
+│   ├── volt-ui.scoped.css      # Scoped CSS (requires wrapping with [data-cui])
+│   ├── volt-ui.flat.css        # Flattened CSS for Tailwind 3 / no Tailwind
+│   ├── volt-ui.theme.css       # Tailwind 4 input for consumer build
+│   ├── colors.css              # tokens
+│   ├── colors-utilities.css    # utilities
+│   ├── colors-style-utilities.css
+│   ├── colors-semantic-utilities.css
+│   ├── typography.css
+│   ├── spacing.css
+│   └── outline.css
+├── assets/fonts/               # Packaged fonts used by styles
+└── components/
+    ├── Button/
+    │   ├── Button.js           # Individual components
+    │   └── IconButton.js
+    ├── Checkbox/
+    │   ├── Checkbox.js
+    │   └── CheckboxField.js
+    └── ... (all other components)
+```
+
+## Migration from Previous Versions
+
+### Breaking Changes
+
+- **CSS Import Required**: You must now import the CSS file explicitly:
+
+  ```tsx
+  import "@epilot/volt-ui/volt-ui.css";
+  ```
+
+- **No Runtime CSS Injection**: CSS is no longer injected at runtime
+- **Tree Shaking**: Use individual component imports for optimal bundle size
+- **Reset is opt-in**: If you previously relied on a global reset, add:
+
+  ```ts
+  import "@epilot/volt-ui/reset.css";
+  ```
+
+### Migration Guide
+
+**Before:**
+
+```tsx
+import { Button } from "@epilot/volt-ui";
+// CSS was automatically injected
+```
+
+**After:**
+
+```tsx
+import { Button } from "@epilot/volt-ui";
+import "@epilot/volt-ui/volt-ui.css"; // Required!
+```
+
+## Development
+
+This package is built with:
+
+- **Rollup** with `preserveModules` for optimal tree shaking
+- **TypeScript** for type safety
+- **Tailwind CSS v4** for styling
+- **Radix UI** for accessible primitives
+- **Zero runtime dependencies** for minimal bundle impact

package/dist/components/Accordion/Accordion.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+export type AccordionProps = {
+    open: boolean;
+    children: ReactNode;
+    className?: string;
+};
+export declare const Accordion: import("react").ForwardRefExoticComponent<AccordionProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Accordion/Accordion.js

@@ -0,0 +1,2 @@
+import{jsx as e}from"react/jsx-runtime";import r from"classnames";import{forwardRef as n,useRef as t,useState as i,useEffect as o}from"react";const s=n(({open:n,children:s,className:c},a)=>{const l=t(null),[d,m]=i(0);return o(()=>{const e=l.current;if(!e)return;const r=()=>{m(n?e.scrollHeight:0)};r();const t=new ResizeObserver(()=>{n&&r()});return t.observe(e),()=>{t.disconnect()}},[n]),e("div",{className:r("w-full",c),"data-open":n,ref:a,children:e("div",{"aria-hidden":!n,className:r("overflow-hidden transition-[height] duration-200 ease-in-out"),ref:l,style:{height:`${d}px`},children:s})})});s.displayName="Accordion";export{s as Accordion};
+//# sourceMappingURL=Accordion.js.map

package/dist/components/Accordion/Accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.js","sources":["../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import cx from 'classnames'\nimport type { ReactNode } from 'react'\nimport { forwardRef, useEffect, useRef, useState } from 'react'\n\nexport type AccordionProps = {\n  open: boolean\n  children: ReactNode\n  className?: string\n}\n\nexport const Accordion = forwardRef<HTMLDivElement, AccordionProps>(\n  ({ open, children, className }, ref) => {\n    const contentRef = useRef<HTMLDivElement | null>(null)\n    const [heightPx, setHeightPx] = useState<number>(0)\n\n    // Measure content height when open changes or content resizes\n    useEffect(() => {\n      const node = contentRef.current\n\n\n      if (!node) return\n\n      const updateHeight = () => {\n        setHeightPx(open ? node.scrollHeight : 0)\n      }\n\n      updateHeight()\n\n      const ro = new ResizeObserver(() => {\n        if (open) updateHeight()\n      })\n\n      ro.observe(node)\n\n      return () => {\n        ro.disconnect()\n      }\n    }, [open])\n\n    return (\n      <div className={cx('w-full', className)} data-open={open} ref={ref}>\n        <div\n          aria-hidden={!open}\n          className={cx(\n            'overflow-hidden transition-[height] duration-200 ease-in-out'\n          )}\n          ref={contentRef}\n          style={{ height: `${heightPx}px` }}\n        >\n          {children}\n        </div>\n      </div>\n    )\n  }\n)\n\nAccordion.displayName = 'Accordion'\n"],"names":["Accordion","forwardRef","open","children","className","ref","contentRef","useRef","heightPx","setHeightPx","useState","useEffect","node","current","updateHeight","scrollHeight","ro","ResizeObserver","observe","disconnect","_jsx","cx","style","height","displayName"],"mappings":"8IAUO,MAAMA,EAAYC,EACvB,EAAGC,OAAMC,WAAUC,aAAaC,KAC9B,MAAMC,EAAaC,EAA8B,OAC1CC,EAAUC,GAAeC,EAAiB,GA0BjD,OAvBAC,EAAU,KACR,MAAMC,EAAON,EAAWO,QAGxB,IAAKD,EAAM,OAEX,MAAME,EAAe,KACnBL,EAAYP,EAAOU,EAAKG,aAAe,IAGzCD,IAEA,MAAME,EAAK,IAAIC,eAAe,KACxBf,GAAMY,MAKZ,OAFAE,EAAGE,QAAQN,GAEJ,KACLI,EAAGG,eAEJ,CAACjB,IAGFkB,SAAKhB,UAAWiB,EAAG,SAAUjB,eAAuBF,EAAMG,IAAKA,WAC7De,EAAA,MAAA,CAAA,eACgBlB,EACdE,UAAWiB,EACT,gEAEFhB,IAAKC,EACLgB,MAAO,CAAEC,OAAQ,GAAGf,gBAEnBL,QAOXH,EAAUwB,YAAc"}

package/dist/components/Badge/Badge.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+export type BadgeColor = 'mauve' | 'red' | 'pink' | 'purple' | 'indigo' | 'blue' | 'cyan' | 'teal' | 'green' | 'bronze' | 'sky' | 'mint' | 'lime' | 'yellow' | 'orange' | 'accent' | 'gray' | 'success' | 'error' | 'warning' | 'info';
+export type BadgeVariant = 'solid' | 'soft' | 'surface' | 'high-contrast';
+export type BadgeSize = 'sm' | 'md' | 'lg';
+export interface BadgeProps {
+    children: ReactNode;
+    color?: BadgeColor;
+    variant?: BadgeVariant;
+    size?: BadgeSize;
+    className?: string;
+}
+export declare const Badge: import("react").ForwardRefExoticComponent<BadgeProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/components/Badge/Badge.js

@@ -0,0 +1,2 @@
+import{jsx as e}from"react/jsx-runtime";import{cx as t}from"class-variance-authority";import{forwardRef as r}from"react";const m=r(({children:r,color:m="gray",variant:s="soft",size:a="md",className:i,...o},n)=>e("span",{className:t("inline-flex items-center justify-center gap-1 font-medium",{"rounded-sm px-1 text-sm":"sm"===a,"rounded-sm px-2 text-base":"md"===a,"rounded-md px-2 text-lg":"lg"===a},`style-${m}-${s}`,i),ref:n,...o,children:r}));m.displayName="Badge";export{m as Badge};
+//# sourceMappingURL=Badge.js.map

package/dist/components/Badge/Badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.js","sources":["../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import { cx } from 'class-variance-authority'\nimport { forwardRef } from 'react'\nimport type { ReactNode } from 'react'\n\nexport type BadgeColor =\n  | 'mauve'\n  | 'red'\n  | 'pink'\n  | 'purple'\n  | 'indigo'\n  | 'blue'\n  | 'cyan'\n  | 'teal'\n  | 'green'\n  | 'bronze'\n  | 'sky'\n  | 'mint'\n  | 'lime'\n  | 'yellow'\n  | 'orange'\n  | 'accent'\n  | 'gray'\n  | 'success'\n  | 'error'\n  | 'warning'\n  | 'info'\n\nexport type BadgeVariant = 'solid' | 'soft' | 'surface' | 'high-contrast'\n\nexport type BadgeSize = 'sm' | 'md' | 'lg'\n\nexport interface BadgeProps {\n  children: ReactNode\n  color?: BadgeColor\n  variant?: BadgeVariant\n  size?: BadgeSize\n  className?: string\n}\n\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>(\n  (\n    {\n      children,\n      color = 'gray',\n      variant = 'soft',\n      size = 'md',\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <span\n        className={cx(\n          // Base badge styles with size variants\n          'inline-flex items-center justify-center gap-1 font-medium',\n          {\n            'rounded-sm px-1 text-sm': size === 'sm', // ~16px height\n            'rounded-sm px-2 text-base': size === 'md', // ~20px height\n            'rounded-md px-2 text-lg': size === 'lg' // ~24px height\n          },\n          // Color style utility\n          `style-${color}-${variant}`,\n          className\n        )}\n        ref={ref}\n        {...props}\n      >\n        {children}\n      </span>\n    )\n  }\n)\n\nBadge.displayName = 'Badge'\n"],"names":["Badge","forwardRef","children","color","variant","size","className","props","ref","_jsx","cx","displayName"],"mappings":"yHAuCO,MAAMA,EAAQC,EACnB,EAEIC,WACAC,QAAQ,OACRC,UAAU,OACVC,OAAO,KACPC,eACGC,GAELC,IAGEC,EAAA,OAAA,CACEH,UAAWI,EAET,4DACA,CACE,0BAAoC,OAATL,EAC3B,4BAAsC,OAATA,EAC7B,0BAAoC,OAATA,GAG7B,SAASF,KAASC,IAClBE,GAEFE,IAAKA,KACDD,WAEHL,KAMTF,EAAMW,YAAc"}

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+export type RadixPropsVariant = "classic" | "solid" | "soft" | "surface" | "outline" | "ghost";
+export type NewVariant = "primary" | "secondary" | "tertiary";
+export declare const VARIANT_MAP: Record<RadixPropsVariant | NewVariant, NewVariant>;
+export declare const getSizeClass: (size: ButtonSize | ButtonSizeLegacy | string | number) => ButtonSize;
+export declare const getBaseButtonClasses: () => string[];
+export declare const getVariantClasses: (variant: NewVariant, warning: boolean) => string[];
+export declare const getSizeClasses: (size: ButtonSize) => string[];
+export declare const getIconButtonSizeClasses: (size: ButtonSize) => string[];
+export type ButtonSize = "sm" | "base" | "lg";
+export type ButtonSizeLegacy = 1 | 2 | 3 | "1" | "2" | "3";
+export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    variant?: RadixPropsVariant | NewVariant;
+    size?: ButtonSize | ButtonSizeLegacy;
+    warning?: boolean;
+    children: React.ReactNode;
+};
+export declare const Button: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    variant?: RadixPropsVariant | NewVariant;
+    size?: ButtonSize | ButtonSizeLegacy;
+    warning?: boolean;
+    children: React.ReactNode;
+} & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/Button/Button.js

@@ -0,0 +1,2 @@
+import{jsx as e}from"react/jsx-runtime";import r from"classnames";import t from"react";const a={classic:"primary",solid:"primary",soft:"tertiary",surface:"tertiary",outline:"tertiary",ghost:"tertiary",primary:"primary",secondary:"secondary",tertiary:"tertiary"},s=e=>{switch(String(e)){case"1":case"sm":return"sm";case"2":case"base":default:return"base";case"3":case"lg":return"lg"}},n=()=>["inline-flex","items-center","justify-center","border","rounded","cursor-pointer","transition-all","duration-100","ease-in-out","relative","font-bold","text-base","focus-visible:outline-accent","disabled:cursor-not-allowed","disabled:pointer-events-none","active:translate-y-0.5"],o=(e,r)=>{if(r)switch(e){case"primary":return["bg-error-solid","text-error-contrast","border-transparent","hover:bg-error-solid-hover","focus-visible:outline-error","disabled:bg-error-a3","disabled:text-error-a8"];case"secondary":return["bg-error-surface","text-error-default","border-error-ui","hover:bg-error-surface-hover","hover:border-error-ui-hover","focus-visible:outline-error","disabled:bg-error-surface","disabled:text-error-a8","disabled:border-transparent"];case"tertiary":return["bg-transparent","text-red-light","border-transparent","hover:bg-red-soft","focus-visible:outline-error","disabled:bg-transparent","disabled:text-error-disabled"]}switch(e){case"primary":return["bg-accent-solid","text-accent-contrast","border-transparent","hover:bg-accent-solid-hover","disabled:bg-gray-a3","disabled:text-gray-a8"];case"secondary":return["bg-accent-surface","text-accent-default","border-accent-ui","hover:style-accent-surface-hover","disabled:bg-gray-surface","disabled:text-gray-disabled","disabled:border-transparent"];case"tertiary":return["bg-transparent","text-accent-light","border-transparent","hover:bg-accent-soft","hover:text-accent-default","disabled:bg-transparent","disabled:text-gray-disabled"]}},i=e=>{switch(e){case"sm":return["px-2","min-h-6","rounded-sm","text-sm"];case"base":return["px-3","min-h-8","rounded","text-base"];case"lg":return["px-4","min-h-10","rounded-md","text-base"]}},d=e=>{switch(e){case"sm":return["w-6","h-6","p-0","rounded-sm","text-sm"];case"base":return["w-8","h-8","p-0","rounded"];case"lg":return["w-10","h-10","p-0","rounded-md"]}},c=t.forwardRef(({variant:t="primary",size:n="base",warning:d=!1,className:c,children:l,...b},u)=>{const m=s(n),f=r("inline-flex","items-center","justify-center","border","rounded","cursor-pointer","transition-all","duration-100","ease-in-out","relative","font-bold","text-base","focus-visible:outline-accent","disabled:cursor-not-allowed","disabled:pointer-events-none","active:translate-y-0.5",...o(a[t],d),...i(m),c);return e("button",{className:f,ref:u,...b,children:l})});c.displayName="Button";export{c as Button,a as VARIANT_MAP,n as getBaseButtonClasses,d as getIconButtonSizeClasses,s as getSizeClass,i as getSizeClasses,o as getVariantClasses};
+//# sourceMappingURL=Button.js.map

package/dist/components/Button/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport React from \"react\";\n\nexport type RadixPropsVariant =\n  | \"classic\"\n  | \"solid\"\n  | \"soft\"\n  | \"surface\"\n  | \"outline\"\n  | \"ghost\";\nexport type NewVariant = \"primary\" | \"secondary\" | \"tertiary\";\n\n// Temporary mapping to ensure backwards compatibility with Radix variants\nexport const VARIANT_MAP: Record<RadixPropsVariant | NewVariant, NewVariant> = {\n  classic: \"primary\",\n  solid: \"primary\",\n  soft: \"tertiary\",\n  surface: \"tertiary\",\n  outline: \"tertiary\",\n  ghost: \"tertiary\",\n  primary: \"primary\",\n  secondary: \"secondary\",\n  tertiary: \"tertiary\",\n};\n\n// Size mapping function to support both legacy numeric values and new semantic values\nexport const getSizeClass = (\n  size: ButtonSize | ButtonSizeLegacy | string | number\n): ButtonSize => {\n  const sizeStr = String(size);\n\n  switch (sizeStr) {\n    case \"1\":\n    case \"sm\":\n      return \"sm\";\n    case \"2\":\n    case \"base\":\n      return \"base\";\n    case \"3\":\n    case \"lg\":\n      return \"lg\";\n    default:\n      return \"base\"; // Default fallback\n  }\n};\n\n// Generate base button classes using Tailwind\nexport const getBaseButtonClasses = () => {\n  return [\n    \"inline-flex\",\n    \"items-center\",\n    \"justify-center\",\n    \"border\",\n    \"rounded\",\n    \"cursor-pointer\",\n    \"transition-all\",\n    \"duration-100\",\n    \"ease-in-out\",\n    \"relative\",\n    \"font-bold\",\n    \"text-base\",\n    \"focus-visible:outline-accent\",\n    \"disabled:cursor-not-allowed\",\n    \"disabled:pointer-events-none\",\n    \"active:translate-y-0.5\",\n  ];\n};\n\n// Generate variant-specific classes\nexport const getVariantClasses = (variant: NewVariant, warning: boolean) => {\n  if (warning) {\n    switch (variant) {\n      case \"primary\":\n        return [\n          \"bg-error-solid\",\n          \"text-error-contrast\",\n          \"border-transparent\",\n          \"hover:bg-error-solid-hover\",\n          \"focus-visible:outline-error\",\n          \"disabled:bg-error-a3\",\n          \"disabled:text-error-a8\",\n        ];\n      case \"secondary\":\n        return [\n          \"bg-error-surface\",\n          \"text-error-default\",\n          \"border-error-ui\",\n          \"hover:bg-error-surface-hover\",\n          \"hover:border-error-ui-hover\",\n          \"focus-visible:outline-error\",\n          \"disabled:bg-error-surface\",\n          \"disabled:text-error-a8\",\n          \"disabled:border-transparent\",\n        ];\n      case \"tertiary\":\n        return [\n          \"bg-transparent\",\n          \"text-red-light\",\n          \"border-transparent\",\n          \"hover:bg-red-soft\",\n          \"focus-visible:outline-error\",\n          \"disabled:bg-transparent\",\n          \"disabled:text-error-disabled\",\n        ];\n    }\n  }\n\n  switch (variant) {\n    case \"primary\":\n      return [\n        \"bg-accent-solid\",\n        \"text-accent-contrast\",\n        \"border-transparent\",\n        \"hover:bg-accent-solid-hover\",\n        \"disabled:bg-gray-a3\",\n        \"disabled:text-gray-a8\",\n      ];\n    case \"secondary\":\n      return [\n        \"bg-accent-surface\",\n        \"text-accent-default\",\n        \"border-accent-ui\",\n        \"hover:style-accent-surface-hover\",\n        \"disabled:bg-gray-surface\",\n        \"disabled:text-gray-disabled\",\n        \"disabled:border-transparent\",\n      ];\n    case \"tertiary\":\n      return [\n        \"bg-transparent\",\n        \"text-accent-light\",\n        \"border-transparent\",\n        \"hover:bg-accent-soft\",\n        \"hover:text-accent-default\",\n        \"disabled:bg-transparent\",\n        \"disabled:text-gray-disabled\",\n      ];\n  }\n};\n\n// Generate size-specific classes\nexport const getSizeClasses = (size: ButtonSize) => {\n  switch (size) {\n    case \"sm\":\n      return [\"px-2\", \"min-h-6\", \"rounded-sm\", \"text-sm\"];\n    case \"base\":\n      return [\"px-3\", \"min-h-8\", \"rounded\", \"text-base\"];\n    case \"lg\":\n      return [\"px-4\", \"min-h-10\", \"rounded-md\", \"text-base\"];\n  }\n};\n\n// Generate size-specific classes for IconButton (square aspect ratio)\nexport const getIconButtonSizeClasses = (size: ButtonSize) => {\n  switch (size) {\n    case \"sm\":\n      return [\"w-6\", \"h-6\", \"p-0\", \"rounded-sm\", \"text-sm\"];\n    case \"base\":\n      return [\"w-8\", \"h-8\", \"p-0\", \"rounded\"];\n    case \"lg\":\n      return [\"w-10\", \"h-10\", \"p-0\", \"rounded-md\"];\n  }\n};\n\nexport type ButtonSize = \"sm\" | \"base\" | \"lg\";\nexport type ButtonSizeLegacy = 1 | 2 | 3 | \"1\" | \"2\" | \"3\";\n\nexport type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {\n  variant?: RadixPropsVariant | NewVariant;\n  size?: ButtonSize | ButtonSizeLegacy;\n  warning?: boolean;\n  children: React.ReactNode;\n};\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      variant = \"primary\",\n      size = \"base\",\n      warning = false,\n      className,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const sizeClass = getSizeClass(size);\n    const mappedVariant = VARIANT_MAP[variant];\n\n    const buttonClasses = cx(\n      ...getBaseButtonClasses(),\n      ...getVariantClasses(mappedVariant, warning),\n      ...getSizeClasses(sizeClass),\n      className\n    );\n\n    return (\n      <button className={buttonClasses} ref={ref} {...props}>\n        {children}\n      </button>\n    );\n  }\n);\n\nButton.displayName = \"Button\";\n"],"names":["VARIANT_MAP","classic","solid","soft","surface","outline","ghost","primary","secondary","tertiary","getSizeClass","size","String","getBaseButtonClasses","getVariantClasses","variant","warning","getSizeClasses","getIconButtonSizeClasses","Button","React","forwardRef","className","children","props","ref","sizeClass","buttonClasses","cx","_jsx","displayName"],"mappings":"uFAaO,MAAMA,EAAkE,CAC7EC,QAAS,UACTC,MAAO,UACPC,KAAM,WACNC,QAAS,WACTC,QAAS,WACTC,MAAO,WACPC,QAAS,UACTC,UAAW,YACXC,SAAU,YAICC,EACXC,IAIA,OAFgBC,OAAOD,IAGrB,IAAK,IACL,IAAK,KACH,MAAO,KACT,IAAK,IACL,IAAK,OAKL,QACE,MAAO,OAJT,IAAK,IACL,IAAK,KACH,MAAO,OAOAE,EAAuB,IAC3B,CACL,cACA,eACA,iBACA,SACA,UACA,iBACA,iBACA,eACA,cACA,WACA,YACA,YACA,+BACA,8BACA,+BACA,0BAKSC,EAAoB,CAACC,EAAqBC,KACrD,GAAIA,EACF,OAAQD,GACN,IAAK,UACH,MAAO,CACL,iBACA,sBACA,qBACA,6BACA,8BACA,uBACA,0BAEJ,IAAK,YACH,MAAO,CACL,mBACA,qBACA,kBACA,+BACA,8BACA,8BACA,4BACA,yBACA,+BAEJ,IAAK,WACH,MAAO,CACL,iBACA,iBACA,qBACA,oBACA,8BACA,0BACA,gCAKR,OAAQA,GACN,IAAK,UACH,MAAO,CACL,kBACA,uBACA,qBACA,8BACA,sBACA,yBAEJ,IAAK,YACH,MAAO,CACL,oBACA,sBACA,mBACA,mCACA,2BACA,8BACA,+BAEJ,IAAK,WACH,MAAO,CACL,iBACA,oBACA,qBACA,uBACA,4BACA,0BACA,iCAMKE,EAAkBN,IAC7B,OAAQA,GACN,IAAK,KACH,MAAO,CAAC,OAAQ,UAAW,aAAc,WAC3C,IAAK,OACH,MAAO,CAAC,OAAQ,UAAW,UAAW,aACxC,IAAK,KACH,MAAO,CAAC,OAAQ,WAAY,aAAc,eAKnCO,EAA4BP,IACvC,OAAQA,GACN,IAAK,KACH,MAAO,CAAC,MAAO,MAAO,MAAO,aAAc,WAC7C,IAAK,OACH,MAAO,CAAC,MAAO,MAAO,MAAO,WAC/B,IAAK,KACH,MAAO,CAAC,OAAQ,OAAQ,MAAO,gBAcxBQ,EAASC,EAAMC,WAC1B,EAEIN,UAAU,UACVJ,OAAO,OACPK,WAAU,EACVM,YACAC,cACGC,GAELC,KAEA,MAAMC,EAAYhB,EAAaC,GAGzBgB,EAAgBC,EA5ItB,cACA,eACA,iBACA,SACA,UACA,iBACA,iBACA,eACA,cACA,WACA,YACA,YACA,+BACA,8BACA,+BACA,4BA+HKd,EAJiBd,EAAYe,GAIIC,MACjCC,EAAeS,GAClBJ,GAGF,OACEO,EAAA,SAAA,CAAQP,UAAWK,EAAeF,IAAKA,KAASD,EAAKD,SAClDA,MAMTJ,EAAOW,YAAc"}

package/dist/components/Button/IconButton.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare const IconButton: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    variant?: import("./Button").RadixPropsVariant | import("./Button").NewVariant;
+    size?: import("./Button").ButtonSize | import("./Button").ButtonSizeLegacy;
+    warning?: boolean;
+    children: React.ReactNode;
+} & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/Button/IconButton.js

@@ -0,0 +1,2 @@
+import{jsx as r}from"react/jsx-runtime";import t from"classnames";import a from"react";import{getBaseButtonClasses as e,getVariantClasses as o,getIconButtonSizeClasses as s,VARIANT_MAP as m,getSizeClass as n}from"./Button.js";const i=a.forwardRef(({variant:a="primary",size:i="base",warning:c=!1,className:p,children:f,...l},u)=>{const d=n(i),N=m[a],b=t(...e(),...o(N,c),...s(d),"aspect-square",p);return r("button",{className:b,ref:u,...l,children:f})});i.displayName="IconButton";export{i as IconButton};
+//# sourceMappingURL=IconButton.js.map

package/dist/components/Button/IconButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.js","sources":["../../../src/components/Button/IconButton.tsx"],"sourcesContent":["import cx from 'classnames'\nimport React from 'react'\n\nimport type { ButtonProps } from './Button'\nimport {\n  VARIANT_MAP,\n  getSizeClass,\n  getBaseButtonClasses,\n  getVariantClasses,\n  getIconButtonSizeClasses\n} from './Button'\n\nexport const IconButton = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      variant = 'primary',\n      size = 'base',\n      warning = false,\n      className,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const sizeClass = getSizeClass(size)\n    const mappedVariant = VARIANT_MAP[variant]\n\n    const buttonClasses = cx(\n      ...getBaseButtonClasses(),\n      ...getVariantClasses(mappedVariant, warning),\n      ...getIconButtonSizeClasses(sizeClass),\n      'aspect-square', // Ensure square aspect ratio\n      className\n    )\n\n    return (\n      <button className={buttonClasses} ref={ref} {...props}>\n        {children}\n      </button>\n    )\n  }\n)\n\nIconButton.displayName = 'IconButton'\n"],"names":["IconButton","React","forwardRef","variant","size","warning","className","children","props","ref","sizeClass","getSizeClass","mappedVariant","VARIANT_MAP","buttonClasses","cx","getBaseButtonClasses","getVariantClasses","getIconButtonSizeClasses","_jsx","displayName"],"mappings":"kOAYO,MAAMA,EAAaC,EAAMC,WAC9B,EAEIC,UAAU,UACVC,OAAO,OACPC,WAAU,EACVC,YACAC,cACGC,GAELC,KAEA,MAAMC,EAAYC,EAAaP,GACzBQ,EAAgBC,EAAYV,GAE5BW,EAAgBC,KACjBC,OACAC,EAAkBL,EAAeP,MACjCa,EAAyBR,GAC5B,gBACAJ,GAGF,OACEa,EAAA,SAAA,CAAQb,UAAWQ,EAAeL,IAAKA,KAASD,EAAKD,SAClDA,MAMTP,EAAWoB,YAAc"}

package/dist/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,8 @@
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import type { ComponentPropsWithoutRef } from "react";
+export type CheckboxTone = "accent" | "error";
+export interface CheckboxProps extends Omit<ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, "children"> {
+    tone?: CheckboxTone;
+    indicatorClassName?: string;
+}
+export declare const Checkbox: import("react").ForwardRefExoticComponent<CheckboxProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/Checkbox/Checkbox.js

@@ -0,0 +1,2 @@
+import{jsx as e}from"react/jsx-runtime";import*as t from"@radix-ui/react-checkbox";import{cx as a,cva as r}from"class-variance-authority";import{forwardRef as d,useState as n}from"react";const o=r(["relative flex h-4 w-4 shrink-0 items-center justify-center","rounded-sm border bg-gray-surface shadow-sm","transition-colors duration-150","disabled:cursor-not-allowed disabled:border-gray-default disabled:bg-gray-soft disabled:text-gray-disabled","data-[state=checked]:border-transparent data-[state=indeterminate]:border-transparent"].join(" "),{variants:{tone:{accent:["border-accent-ui hover:border-accent-ui-hover","focus-visible:outline-accent","data-[state=checked]:bg-accent-solid","data-[state=indeterminate]:bg-accent-solid","data-[state=checked]:disabled:bg-accent-a8","data-[state=indeterminate]:disabled:bg-accent-a8"].join(" "),error:["border-error-ui hover:border-error-ui-hover","focus-visible:outline-error","data-[state=checked]:bg-error-solid","data-[state=indeterminate]:bg-error-solid"].join(" ")}},defaultVariants:{tone:"accent"}}),c=r("pointer-events-none flex h-full w-full items-center justify-center",{variants:{tone:{accent:"text-accent-contrast",error:"text-error-contrast"},disabled:{true:"text-gray-disabled data-[state=checked]:text-accent-contrast data-[state=indeterminate]:text-accent-contrast",false:null}},defaultVariants:{tone:"accent",disabled:!1}}),i=()=>e("svg",{"aria-hidden":"true",className:"h-4 w-4",fill:"currentColor",focusable:"false",viewBox:"0 0 16 16",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M6.649 10.105 12.299 4.455a.727.727 0 0 1 1.283.475.73.73 0 0 1-.216.525l-6.117 6.134a.727.727 0 0 1-1.033 0L3.316 8.672a.73.73 0 0 1-.184-.476.73.73 0 0 1 .492-.473.73.73 0 0 1 .492.163l2.533 2.219Z"})}),s=()=>e("svg",{"aria-hidden":"true",className:"h-4 w-4",fill:"currentColor",focusable:"false",viewBox:"0 0 16 16",xmlns:"http://www.w3.org/2000/svg",children:e("rect",{height:"1",rx:"0.5",width:"8",x:"4",y:"7.5"})}),l=d(({tone:r="accent",className:d,disabled:l,indicatorClassName:h,checked:b,defaultChecked:u,onCheckedChange:m,...f},g)=>{const[v,x]=n(b??u??!1),w=b??v,k=void 0!==b?{checked:b}:void 0!==u?{defaultChecked:u}:{},p=Boolean(l);return e(t.Root,{...f,...k,className:a(o({tone:r}),d),disabled:l,onCheckedChange:e=>{void 0===b&&x(e),m?.(e)},ref:g,children:e(t.Indicator,{className:a(c({tone:r,disabled:p}),h),children:"indeterminate"===w?e(s,{}):w?e(i,{}):null})})});l.displayName="Checkbox";export{l as Checkbox};
+//# sourceMappingURL=Checkbox.js.map

package/dist/components/Checkbox/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as CheckboxPrimitive from \"@radix-ui/react-checkbox\";\nimport type { CheckedState } from \"@radix-ui/react-checkbox\";\nimport { cva, cx } from \"class-variance-authority\";\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport { forwardRef, useState } from \"react\";\n\nexport type CheckboxTone = \"accent\" | \"error\";\n\nconst checkboxRootStyles = cva(\n  [\n    \"relative flex h-4 w-4 shrink-0 items-center justify-center\",\n    \"rounded-sm border bg-gray-surface shadow-sm\",\n    \"transition-colors duration-150\",\n    \"disabled:cursor-not-allowed disabled:border-gray-default disabled:bg-gray-soft disabled:text-gray-disabled\",\n    \"data-[state=checked]:border-transparent data-[state=indeterminate]:border-transparent\",\n  ].join(\" \"),\n  {\n    variants: {\n      tone: {\n        accent: [\n          \"border-accent-ui hover:border-accent-ui-hover\",\n          \"focus-visible:outline-accent\",\n          \"data-[state=checked]:bg-accent-solid\",\n          \"data-[state=indeterminate]:bg-accent-solid\",\n          \"data-[state=checked]:disabled:bg-accent-a8\",\n          \"data-[state=indeterminate]:disabled:bg-accent-a8\",\n        ].join(\" \"),\n        error: [\n          \"border-error-ui hover:border-error-ui-hover\",\n          \"focus-visible:outline-error\",\n          \"data-[state=checked]:bg-error-solid\",\n          \"data-[state=indeterminate]:bg-error-solid\",\n        ].join(\" \"),\n      },\n    },\n    defaultVariants: {\n      tone: \"accent\",\n    },\n  }\n);\n\nconst indicatorStyles = cva(\n  \"pointer-events-none flex h-full w-full items-center justify-center\",\n  {\n    variants: {\n      tone: {\n        accent: \"text-accent-contrast\",\n        error: \"text-error-contrast\",\n      },\n      disabled: {\n        true: \"text-gray-disabled data-[state=checked]:text-accent-contrast data-[state=indeterminate]:text-accent-contrast\",\n        false: null,\n      },\n    },\n    defaultVariants: {\n      tone: \"accent\",\n      disabled: false,\n    },\n  }\n);\n\nconst CheckIcon = () => (\n  <svg\n    aria-hidden=\"true\"\n    className=\"h-4 w-4\"\n    fill=\"currentColor\"\n    focusable=\"false\"\n    viewBox=\"0 0 16 16\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path d=\"M6.649 10.105 12.299 4.455a.727.727 0 0 1 1.283.475.73.73 0 0 1-.216.525l-6.117 6.134a.727.727 0 0 1-1.033 0L3.316 8.672a.73.73 0 0 1-.184-.476.73.73 0 0 1 .492-.473.73.73 0 0 1 .492.163l2.533 2.219Z\" />\n  </svg>\n);\n\nconst IndeterminateIcon = () => (\n  <svg\n    aria-hidden=\"true\"\n    className=\"h-4 w-4\"\n    fill=\"currentColor\"\n    focusable=\"false\"\n    viewBox=\"0 0 16 16\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <rect height=\"1\" rx=\"0.5\" width=\"8\" x=\"4\" y=\"7.5\" />\n  </svg>\n);\n\nexport interface CheckboxProps\n  extends Omit<\n    ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>,\n    \"children\"\n  > {\n  tone?: CheckboxTone;\n  indicatorClassName?: string;\n}\n\nexport const Checkbox = forwardRef<HTMLButtonElement, CheckboxProps>(\n  (\n    {\n      tone = \"accent\",\n      className,\n      disabled,\n      indicatorClassName,\n      checked,\n      defaultChecked,\n      onCheckedChange,\n      ...props\n    },\n    ref\n  ) => {\n    const [internalState, setInternalState] = useState<CheckedState>(\n      checked ?? defaultChecked ?? false\n    );\n    const currentState = checked ?? internalState;\n\n    const handleCheckedChange = (nextState: CheckedState) => {\n      if (checked === undefined) {\n        setInternalState(nextState);\n      }\n      onCheckedChange?.(nextState);\n    };\n\n    const stateProps =\n      checked !== undefined\n        ? { checked }\n        : defaultChecked !== undefined\n          ? { defaultChecked }\n          : {};\n\n    const isDisabled = Boolean(disabled);\n\n    return (\n      <CheckboxPrimitive.Root\n        {...props}\n        {...stateProps}\n        className={cx(checkboxRootStyles({ tone }), className)}\n        disabled={disabled}\n        onCheckedChange={handleCheckedChange}\n        ref={ref}\n      >\n        <CheckboxPrimitive.Indicator\n          className={cx(\n            indicatorStyles({ tone, disabled: isDisabled }),\n            indicatorClassName\n          )}\n        >\n          {currentState === \"indeterminate\" ? (\n            <IndeterminateIcon />\n          ) : currentState ? (\n            <CheckIcon />\n          ) : null}\n        </CheckboxPrimitive.Indicator>\n      </CheckboxPrimitive.Root>\n    );\n  }\n);\n\nCheckbox.displayName = \"Checkbox\";\n"],"names":["checkboxRootStyles","cva","join","variants","tone","accent","error","defaultVariants","indicatorStyles","disabled","true","false","CheckIcon","_jsx","className","fill","focusable","viewBox","xmlns","children","d","IndeterminateIcon","height","rx","width","x","y","Checkbox","forwardRef","indicatorClassName","checked","defaultChecked","onCheckedChange","props","ref","internalState","setInternalState","useState","currentState","stateProps","undefined","isDisabled","Boolean","CheckboxPrimitive","Root","cx","nextState","Indicator","displayName"],"mappings":"2LAQA,MAAMA,EAAqBC,EACzB,CACE,6DACA,8CACA,iCACA,6GACA,yFACAC,KAAK,KACP,CACEC,SAAU,CACRC,KAAM,CACJC,OAAQ,CACN,gDACA,+BACA,uCACA,6CACA,6CACA,oDACAH,KAAK,KACPI,MAAO,CACL,8CACA,8BACA,sCACA,6CACAJ,KAAK,OAGXK,gBAAiB,CACfH,KAAM,YAKNI,EAAkBP,EACtB,qEACA,CACEE,SAAU,CACRC,KAAM,CACJC,OAAQ,uBACRC,MAAO,uBAETG,SAAU,CACRC,KAAM,+GACNC,MAAO,OAGXJ,gBAAiB,CACfH,KAAM,SACNK,UAAU,KAKVG,EAAY,IAChBC,EAAA,MAAA,CAAA,cACc,OACZC,UAAU,UACVC,KAAK,eACLC,UAAU,QACVC,QAAQ,YACRC,MAAM,6BAA4BC,SAElCN,EAAA,OAAA,CAAMO,EAAE,8MAINC,EAAoB,IACxBR,EAAA,MAAA,CAAA,cACc,OACZC,UAAU,UACVC,KAAK,eACLC,UAAU,QACVC,QAAQ,YACRC,MAAM,6BAA4BC,SAElCN,EAAA,OAAA,CAAMS,OAAO,IAAIC,GAAG,MAAMC,MAAM,IAAIC,EAAE,IAAIC,EAAE,UAanCC,EAAWC,EACtB,EAEIxB,OAAO,SACPU,YACAL,WACAoB,qBACAC,UACAC,iBACAC,qBACGC,GAELC,KAEA,MAAOC,EAAeC,GAAoBC,EACxCP,GAAWC,IAAkB,GAEzBO,EAAeR,GAAWK,EAS1BI,OACQC,IAAZV,EACI,CAAEA,gBACiBU,IAAnBT,EACE,CAAEA,kBACF,CAAA,EAEFU,EAAaC,QAAQjC,GAE3B,OACEI,EAAC8B,EAAkBC,KAAI,IACjBX,KACAM,EACJzB,UAAW+B,EAAG7C,EAAmB,CAAEI,SAASU,GAC5CL,SAAUA,EACVuB,gBAtByBc,SACXN,IAAZV,GACFM,EAAiBU,GAEnBd,IAAkBc,IAmBhBZ,IAAKA,WAELrB,EAAC8B,EAAkBI,UAAS,CAC1BjC,UAAW+B,EACTrC,EAAgB,CAAEJ,OAAMK,SAAUgC,IAClCZ,YAGgB,kBAAjBS,EACCzB,EAACQ,EAAiB,CAAA,GAChBiB,EACFzB,EAACD,EAAS,CAAA,GACR,WAOde,EAASqB,YAAc"}

package/dist/components/Checkbox/CheckboxField.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+import type { ValidationVariant } from '../Validation/Validation';
+import { type CheckboxProps } from './Checkbox';
+export interface CheckboxFieldProps extends CheckboxProps {
+    label?: ReactNode;
+    description?: ReactNode;
+    helperText?: ReactNode;
+    helperTextTone?: ValidationVariant;
+    wrapperClassName?: string;
+    labelClassName?: string;
+    descriptionClassName?: string;
+    helperTextClassName?: string;
+}
+export declare const CheckboxField: import("react").ForwardRefExoticComponent<CheckboxFieldProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/Checkbox/CheckboxField.js

@@ -0,0 +1,2 @@
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import{cx as l}from"class-variance-authority";import{forwardRef as t,useId as r}from"react";import{Checkbox as d}from"./Checkbox.js";const s=(e,a,t)=>l("text-base","accent"===e?"text-accent-default":"text-error-default",a&&"text-gray-disabled",t),i=(e,a)=>l("text-sm text-gray-default",e&&"text-gray-disabled",a),o=(e,a,t)=>l("text-sm","accent"===e?"text-gray-default":"text-error-light",a&&"text-gray-disabled",t),c=t(({id:t,label:c,description:n,helperText:m,helperTextTone:x="default",tone:p="accent",wrapperClassName:b,labelClassName:f,descriptionClassName:h,helperTextClassName:u,className:N,indicatorClassName:g,...v},y)=>{const C=r(),T=t??C,j=c?`${T}-label`:void 0,w=n?`${T}-description`:void 0,B=m?`${T}-helper`:void 0,{"aria-invalid":$,...k}=v,F=[w,B].filter(e=>Boolean(e)).join(" "),q=F.length>0?F:void 0,z=Boolean(k.disabled),A="error"===x&&Boolean(m);return e("div",{className:l("flex flex-col gap-2",b),"data-disabled":z,children:a("label",{className:l("flex select-none items-start gap-2","text-left",z&&"cursor-not-allowed"),"data-disabled":z,htmlFor:T,children:[e(d,{...k,"aria-describedby":q,"aria-invalid":$??(!!A||void 0),"aria-labelledby":j,className:N,id:T,indicatorClassName:g,ref:y,tone:p}),a("span",{className:"flex min-w-0 flex-col gap-1","data-disabled":z,children:[c?e("span",{className:s(p,z,f),"data-disabled":z,id:j,children:c}):null,n?e("span",{className:i(z,h),"data-disabled":z,id:w,children:n}):null,m?e("span",{className:l(o(p,z,u),"error"===x&&"text-error-default","success"===x&&"text-green-default"),"data-disabled":z,id:B,children:m}):null]})]})})});c.displayName="CheckboxField";export{c as CheckboxField};
+//# sourceMappingURL=CheckboxField.js.map

package/dist/components/Checkbox/CheckboxField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxField.js","sources":["../../../src/components/Checkbox/CheckboxField.tsx"],"sourcesContent":["import { cx } from 'class-variance-authority'\nimport type { ReactNode } from 'react'\nimport { forwardRef, useId } from 'react'\n\nimport type { ValidationVariant } from '../Validation/Validation'\n\nimport { Checkbox, type CheckboxProps, type CheckboxTone } from './Checkbox'\n\nconst labelStyles = (\n  tone: CheckboxTone,\n  disabled?: boolean,\n  className?: string\n) =>\n  cx(\n    'text-base',\n    tone === 'accent' ? 'text-accent-default' : 'text-error-default',\n    disabled && 'text-gray-disabled',\n    className\n  )\n\nconst descriptionStyles = (disabled?: boolean, className?: string) =>\n  cx('text-sm text-gray-default', disabled && 'text-gray-disabled', className)\n\nconst helperTextStyles = (\n  tone: CheckboxTone,\n  disabled?: boolean,\n  className?: string\n) =>\n  cx(\n    'text-sm',\n    tone === 'accent' ? 'text-gray-default' : 'text-error-light',\n    disabled && 'text-gray-disabled',\n    className\n  )\n\nexport interface CheckboxFieldProps extends CheckboxProps {\n  label?: ReactNode\n  description?: ReactNode\n  helperText?: ReactNode\n  helperTextTone?: ValidationVariant\n  wrapperClassName?: string\n  labelClassName?: string\n  descriptionClassName?: string\n  helperTextClassName?: string\n}\n\nexport const CheckboxField = forwardRef<HTMLButtonElement, CheckboxFieldProps>(\n  (\n    {\n      id,\n      label,\n      description,\n      helperText,\n      helperTextTone = 'default',\n      tone = 'accent',\n      wrapperClassName,\n      labelClassName,\n      descriptionClassName,\n      helperTextClassName,\n      className,\n      indicatorClassName,\n      ...restProps\n    },\n    ref\n  ) => {\n    const generatedId = useId()\n    const checkboxId = id ?? generatedId\n    const labelId = label ? `${checkboxId}-label` : undefined\n    const descriptionId = description ? `${checkboxId}-description` : undefined\n    const helperId = helperText ? `${checkboxId}-helper` : undefined\n\n    const { ['aria-invalid']: ariaInvalidProp, ...checkboxProps } = restProps\n\n    const describedBy = [descriptionId, helperId]\n      .filter((value): value is string => Boolean(value))\n      .join(' ')\n    const ariaDescribedBy = describedBy.length > 0 ? describedBy : undefined\n\n    const isDisabled = Boolean(checkboxProps.disabled)\n    const hasErrorState = helperTextTone === 'error' && Boolean(helperText)\n\n    return (\n      <div\n        className={cx('flex flex-col gap-2', wrapperClassName)}\n        data-disabled={isDisabled}\n      >\n        <label\n          className={cx(\n            'flex select-none items-start gap-2',\n            'text-left',\n            isDisabled && 'cursor-not-allowed'\n          )}\n          data-disabled={isDisabled}\n          htmlFor={checkboxId}\n        >\n          <Checkbox\n            {...checkboxProps}\n            aria-describedby={ariaDescribedBy}\n            aria-invalid={ariaInvalidProp ?? (hasErrorState ? true : undefined)}\n            aria-labelledby={labelId}\n            className={className}\n            id={checkboxId}\n            indicatorClassName={indicatorClassName}\n            ref={ref}\n            tone={tone}\n          />\n          <span\n            className=\"flex min-w-0 flex-col gap-1\"\n            data-disabled={isDisabled}\n          >\n            {label ? (\n              <span\n                className={labelStyles(tone, isDisabled, labelClassName)}\n                data-disabled={isDisabled}\n                id={labelId}\n              >\n                {label}\n              </span>\n            ) : null}\n            {description ? (\n              <span\n                className={descriptionStyles(isDisabled, descriptionClassName)}\n                data-disabled={isDisabled}\n                id={descriptionId}\n              >\n                {description}\n              </span>\n            ) : null}\n            {helperText ? (\n              <span\n                className={cx(\n                  helperTextStyles(tone, isDisabled, helperTextClassName),\n                  helperTextTone === 'error' && 'text-error-default',\n                  helperTextTone === 'success' && 'text-green-default'\n                )}\n                data-disabled={isDisabled}\n                id={helperId}\n              >\n                {helperText}\n              </span>\n            ) : null}\n          </span>\n        </label>\n      </div>\n    )\n  }\n)\n\nCheckboxField.displayName = 'CheckboxField'\n"],"names":["labelStyles","tone","disabled","className","cx","descriptionStyles","helperTextStyles","CheckboxField","forwardRef","id","label","description","helperText","helperTextTone","wrapperClassName","labelClassName","descriptionClassName","helperTextClassName","indicatorClassName","restProps","ref","generatedId","useId","checkboxId","labelId","undefined","descriptionId","helperId","ariaInvalidProp","checkboxProps","describedBy","filter","value","Boolean","join","ariaDescribedBy","length","isDisabled","hasErrorState","_jsx","children","_jsxs","htmlFor","Checkbox","displayName"],"mappings":"uLAQA,MAAMA,EAAc,CAClBC,EACAC,EACAC,IAEAC,EACE,YACS,WAATH,EAAoB,sBAAwB,qBAC5CC,GAAY,qBACZC,GAGEE,EAAoB,CAACH,EAAoBC,IAC7CC,EAAG,4BAA6BF,GAAY,qBAAsBC,GAE9DG,EAAmB,CACvBL,EACAC,EACAC,IAEAC,EACE,UACS,WAATH,EAAoB,oBAAsB,mBAC1CC,GAAY,qBACZC,GAcSI,EAAgBC,EAC3B,EAEIC,KACAC,QACAC,cACAC,aACAC,iBAAiB,UACjBZ,OAAO,SACPa,mBACAC,iBACAC,uBACAC,sBACAd,YACAe,wBACGC,GAELC,KAEA,MAAMC,EAAcC,IACdC,EAAad,GAAMY,EACnBG,EAAUd,EAAQ,GAAGa,eAAqBE,EAC1CC,EAAgBf,EAAc,GAAGY,qBAA2BE,EAC5DE,EAAWf,EAAa,GAAGW,gBAAsBE,GAE/C,eAAkBG,KAAoBC,GAAkBV,EAE1DW,EAAc,CAACJ,EAAeC,GACjCI,OAAQC,GAA2BC,QAAQD,IAC3CE,KAAK,KACFC,EAAkBL,EAAYM,OAAS,EAAIN,OAAcL,EAEzDY,EAAaJ,QAAQJ,EAAc3B,UACnCoC,EAAmC,UAAnBzB,GAA8BoB,QAAQrB,GAE5D,OACE2B,SACEpC,UAAWC,EAAG,sBAAuBU,mBACtBuB,EAAUG,SAEzBC,WACEtC,UAAWC,EACT,qCACA,YACAiC,GAAc,sBACf,gBACcA,EACfK,QAASnB,EAAUiB,SAAA,CAEnBD,EAACI,EAAQ,IACHd,qBACcM,EAAe,eACnBP,MAAoBU,QAAuBb,qBACxCD,EACjBrB,UAAWA,EACXM,GAAIc,EACJL,mBAAoBA,EACpBE,IAAKA,EACLnB,KAAMA,IAERwC,UACEtC,UAAU,8BAA6B,gBACxBkC,YAEd3B,EACC6B,UACEpC,UAAWH,EAAYC,EAAMoC,EAAYtB,GAAe,gBACzCsB,EACf5B,GAAIe,EAAOgB,SAEV9B,IAED,KACHC,EACC4B,UACEpC,UAAWE,EAAkBgC,EAAYrB,mBAC1BqB,EACf5B,GAAIiB,WAEHf,IAED,KACHC,EACC2B,EAAA,OAAA,CACEpC,UAAWC,EACTE,EAAiBL,EAAMoC,EAAYpB,GAChB,UAAnBJ,GAA8B,qBACX,YAAnBA,GAAgC,sBACjC,gBACcwB,EACf5B,GAAIkB,EAAQa,SAEX5B,IAED,eAQhBL,EAAcqC,YAAc"}

package/dist/components/Dialog/Dialog.d.ts

@@ -0,0 +1,17 @@
+import * as RadixDialog from "@radix-ui/react-dialog";
+import type { FC } from "react";
+export declare const Dialog: {
+    Root: FC<RadixDialog.DialogProps>;
+    Trigger: import("react").ForwardRefExoticComponent<Omit<RadixDialog.DialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & {
+        asChild?: boolean;
+    } & import("react").RefAttributes<HTMLButtonElement>>;
+    Overlay: import("react").ForwardRefExoticComponent<Omit<RadixDialog.DialogOverlayProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Content: import("react").ForwardRefExoticComponent<Omit<RadixDialog.DialogContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
+        withOverlay?: boolean;
+    } & import("react").RefAttributes<HTMLDivElement>>;
+    Title: import("react").ForwardRefExoticComponent<Omit<RadixDialog.DialogTitleProps & import("react").RefAttributes<HTMLHeadingElement>, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
+    Description: import("react").ForwardRefExoticComponent<Omit<RadixDialog.DialogDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
+    Close: import("react").ForwardRefExoticComponent<Omit<RadixDialog.DialogCloseProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & {
+        asChild?: boolean;
+    } & import("react").RefAttributes<HTMLButtonElement>>;
+};

package/dist/components/Dialog/Dialog.js

@@ -0,0 +1,2 @@
+import{jsx as a,jsxs as e}from"react/jsx-runtime";import*as t from"@radix-ui/react-dialog";import s from"classnames";import{forwardRef as o}from"react";const l=o(({className:e,...o},l)=>a(t.Overlay,{className:s("fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",e),ref:l,...o}));l.displayName=t.Overlay.displayName;const i=e=>a(t.Root,{...e});i.displayName="Dialog.Root";const n=o(({className:e,asChild:o,...l},i)=>a(t.Trigger,{asChild:o,className:s("",e),ref:i,...l}));n.displayName="Dialog.Trigger";const r=o(({className:o,children:i,withOverlay:n=!0,...r},d)=>e(t.Portal,{children:[n&&a(l,{}),a(t.Content,{className:s("fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-group-2 bg-gray-level-1 rounded-2xl p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",o),ref:d,...r,children:i})]}));r.displayName="Dialog.Content";const d=o(({className:e,...o},l)=>a(t.Title,{className:s(e),ref:l,...o}));d.displayName="Dialog.Title";const c=o(({className:e,...o},l)=>a(t.Description,{className:s(e),ref:l,...o}));c.displayName="Dialog.Description";const m=o(({className:o,children:l,asChild:i,...n},r)=>i?a(t.Close,{asChild:i,className:s("",o),ref:r,...n,children:l}):e(t.Close,{asChild:i,className:s("absolute right-4 size-6 flex items-center justify-center top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-accent disabled:pointer-events-none data-[state=open]:text-gray-light",o),ref:r,...n,children:[l||e("svg",{className:"h-4 w-4",fill:"none",height:"24",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"2",viewBox:"0 0 24 24",width:"24",xmlns:"http://www.w3.org/2000/svg",children:[a("path",{d:"M18 6L6 18"}),a("path",{d:"M6 6l12 12"})]}),a("span",{className:"sr-only",children:"Close"})]}));m.displayName="Dialog.Close";const p={Root:i,Trigger:n,Overlay:l,Content:r,Title:d,Description:c,Close:m};export{p as Dialog};
+//# sourceMappingURL=Dialog.js.map

package/dist/components/Dialog/Dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.js","sources":["../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import * as RadixDialog from \"@radix-ui/react-dialog\";\nimport cx from \"classnames\";\nimport type { ComponentPropsWithoutRef, FC } from \"react\";\nimport { forwardRef } from \"react\";\n\ntype DialogRootProps = ComponentPropsWithoutRef<typeof RadixDialog.Root>;\n\nconst DialogOverlay = forwardRef<\n  HTMLDivElement,\n  ComponentPropsWithoutRef<typeof RadixDialog.Overlay>\n>(({ className, ...props }, ref) => {\n  return (\n    <RadixDialog.Overlay\n      className={cx(\n        \"fixed inset-0 z-50 bg-black/80 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      ref={ref}\n      {...props}\n    />\n  );\n});\n\nDialogOverlay.displayName = RadixDialog.Overlay.displayName;\n\nconst DialogRoot: FC<DialogRootProps> = (props) => {\n  return <RadixDialog.Root {...props} />;\n};\n\nDialogRoot.displayName = \"Dialog.Root\";\n\nconst DialogTrigger = forwardRef<\n  HTMLButtonElement,\n  ComponentPropsWithoutRef<typeof RadixDialog.Trigger> & {\n    asChild?: boolean;\n  }\n>(({ className, asChild, ...props }, ref) => {\n  return (\n    <RadixDialog.Trigger\n      asChild={asChild}\n      className={cx(\"\", className)}\n      ref={ref}\n      {...props}\n    />\n  );\n});\n\nDialogTrigger.displayName = \"Dialog.Trigger\";\n\nconst DialogContent = forwardRef<\n  HTMLDivElement,\n  ComponentPropsWithoutRef<typeof RadixDialog.Content> & {\n    withOverlay?: boolean;\n  }\n>(({ className, children, withOverlay = true, ...props }, ref) => {\n  return (\n    <RadixDialog.Portal>\n      {withOverlay && <DialogOverlay />}\n      <RadixDialog.Content\n        className={cx(\n          \"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-group-2 bg-gray-level-1 rounded-2xl p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]\",\n          className\n        )}\n        ref={ref}\n        {...props}\n      >\n        {children}\n      </RadixDialog.Content>\n    </RadixDialog.Portal>\n  );\n});\n\nDialogContent.displayName = \"Dialog.Content\";\n\nconst DialogTitle = forwardRef<\n  HTMLHeadingElement,\n  ComponentPropsWithoutRef<typeof RadixDialog.Title>\n>(({ className, ...props }, ref) => {\n  return <RadixDialog.Title className={cx(className)} ref={ref} {...props} />;\n});\n\nDialogTitle.displayName = \"Dialog.Title\";\n\nconst DialogDescription = forwardRef<\n  HTMLParagraphElement,\n  ComponentPropsWithoutRef<typeof RadixDialog.Description>\n>(({ className, ...props }, ref) => {\n  return (\n    <RadixDialog.Description className={cx(className)} ref={ref} {...props} />\n  );\n});\n\nDialogDescription.displayName = \"Dialog.Description\";\n\nconst DialogClose = forwardRef<\n  HTMLButtonElement,\n  ComponentPropsWithoutRef<typeof RadixDialog.Close> & {\n    asChild?: boolean;\n  }\n>(({ className, children, asChild, ...props }, ref) => {\n  if (asChild) {\n    return (\n      <RadixDialog.Close\n        asChild={asChild}\n        className={cx(\"\", className)}\n        ref={ref}\n        {...props}\n      >\n        {children}\n      </RadixDialog.Close>\n    );\n  }\n\n  return (\n    <RadixDialog.Close\n      asChild={asChild}\n      className={cx(\n        \"absolute right-4 size-6 flex items-center justify-center top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-accent disabled:pointer-events-none data-[state=open]:text-gray-light\",\n        className\n      )}\n      ref={ref}\n      {...props}\n    >\n      {children || (\n        <svg\n          className=\"h-4 w-4\"\n          fill=\"none\"\n          height=\"24\"\n          stroke=\"currentColor\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"2\"\n          viewBox=\"0 0 24 24\"\n          width=\"24\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path d=\"M18 6L6 18\" />\n          <path d=\"M6 6l12 12\" />\n        </svg>\n      )}\n      <span className=\"sr-only\">Close</span>\n    </RadixDialog.Close>\n  );\n});\n\nDialogClose.displayName = \"Dialog.Close\";\n\nexport const Dialog = {\n  Root: DialogRoot,\n  Trigger: DialogTrigger,\n  Overlay: DialogOverlay,\n  Content: DialogContent,\n  Title: DialogTitle,\n  Description: DialogDescription,\n  Close: DialogClose,\n};\n"],"names":["DialogOverlay","forwardRef","className","props","ref","_jsx","RadixDialog","Overlay","cx","displayName","DialogRoot","Root","DialogTrigger","asChild","Trigger","DialogContent","children","withOverlay","_jsxs","Portal","Content","DialogTitle","Title","DialogDescription","Description","DialogClose","Close","fill","height","stroke","strokeLinecap","strokeLinejoin","strokeWidth","viewBox","width","xmlns","d","Dialog"],"mappings":"wJAOA,MAAMA,EAAgBC,EAGpB,EAAGC,eAAcC,GAASC,IAExBC,EAACC,EAAYC,QAAO,CAClBL,UAAWM,EACT,yJACAN,GAEFE,IAAKA,KACDD,KAKVH,EAAcS,YAAcH,EAAYC,QAAQE,YAEhD,MAAMC,EAAmCP,GAChCE,EAACC,EAAYK,KAAI,IAAKR,IAG/BO,EAAWD,YAAc,cAEzB,MAAMG,EAAgBX,EAKpB,EAAGC,YAAWW,aAAYV,GAASC,IAEjCC,EAACC,EAAYQ,QAAO,CAClBD,QAASA,EACTX,UAAWM,EAAG,GAAIN,GAClBE,IAAKA,KACDD,KAKVS,EAAcH,YAAc,iBAE5B,MAAMM,EAAgBd,EAKpB,EAAGC,YAAWc,WAAUC,eAAc,KAASd,GAASC,IAEtDc,EAACZ,EAAYa,kBACVF,GAAeZ,EAACL,MACjBK,EAACC,EAAYc,QAAO,CAClBlB,UAAWM,EACT,6fACAN,GAEFE,IAAKA,KACDD,EAAKa,SAERA,QAMTD,EAAcN,YAAc,iBAE5B,MAAMY,EAAcpB,EAGlB,EAAGC,eAAcC,GAASC,IACnBC,EAACC,EAAYgB,MAAK,CAACpB,UAAWM,EAAGN,GAAYE,IAAKA,KAASD,KAGpEkB,EAAYZ,YAAc,eAE1B,MAAMc,EAAoBtB,EAGxB,EAAGC,eAAcC,GAASC,IAExBC,EAACC,EAAYkB,YAAW,CAACtB,UAAWM,EAAGN,GAAYE,IAAKA,KAASD,KAIrEoB,EAAkBd,YAAc,qBAEhC,MAAMgB,EAAcxB,EAKlB,EAAGC,YAAWc,WAAUH,aAAYV,GAASC,IACzCS,EAEAR,EAACC,EAAYoB,MAAK,CAChBb,QAASA,EACTX,UAAWM,EAAG,GAAIN,GAClBE,IAAKA,KACDD,EAAKa,SAERA,IAMLE,EAACZ,EAAYoB,MAAK,CAChBb,QAASA,EACTX,UAAWM,EACT,gNACAN,GAEFE,IAAKA,KACDD,YAEHa,GACCE,EAAA,MAAA,CACEhB,UAAU,UACVyB,KAAK,OACLC,OAAO,KACPC,OAAO,eACPC,cAAc,QACdC,eAAe,QACfC,YAAY,IACZC,QAAQ,YACRC,MAAM,KACNC,MAAM,uCAEN9B,EAAA,OAAA,CAAM+B,EAAE,eACR/B,EAAA,OAAA,CAAM+B,EAAE,kBAGZ/B,UAAMH,UAAU,UAASc,SAAA,cAK/BS,EAAYhB,YAAc,eAEnB,MAAM4B,EAAS,CACpB1B,KAAMD,EACNI,QAASF,EACTL,QAASP,EACToB,QAASL,EACTO,MAAOD,EACPG,YAAaD,EACbG,MAAOD"}

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

@@ -0,0 +1,23 @@
+import * as RadixDropdown from "@radix-ui/react-dropdown-menu";
+import type { FC } from "react";
+export declare const DropdownMenu: {
+    Root: FC<RadixDropdown.DropdownMenuProps>;
+    Trigger: import("react").ForwardRefExoticComponent<Omit<RadixDropdown.DropdownMenuTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & {
+        asChild?: boolean;
+    } & import("react").RefAttributes<HTMLButtonElement>>;
+    Content: import("react").ForwardRefExoticComponent<Omit<RadixDropdown.DropdownMenuContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Item: import("react").ForwardRefExoticComponent<Omit<RadixDropdown.DropdownMenuItemProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    CheckboxItem: import("react").ForwardRefExoticComponent<Omit<RadixDropdown.DropdownMenuCheckboxItemProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
+        checked?: boolean;
+    } & import("react").RefAttributes<HTMLDivElement>>;
+    RadioGroup: FC<Omit<RadixDropdown.DropdownMenuRadioGroupProps & import("react").RefAttributes<HTMLDivElement>, "ref">>;
+    RadioItem: import("react").ForwardRefExoticComponent<Omit<RadixDropdown.DropdownMenuRadioItemProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Separator: import("react").ForwardRefExoticComponent<Omit<RadixDropdown.DropdownMenuSeparatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Label: import("react").ForwardRefExoticComponent<Omit<RadixDropdown.DropdownMenuLabelProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Shortcut: FC<import("react").HTMLAttributes<HTMLSpanElement>>;
+    Sub: FC<RadixDropdown.DropdownMenuSubProps>;
+    SubTrigger: import("react").ForwardRefExoticComponent<Omit<RadixDropdown.DropdownMenuSubTriggerProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
+        asChild?: boolean;
+    } & import("react").RefAttributes<HTMLDivElement>>;
+    SubContent: import("react").ForwardRefExoticComponent<Omit<RadixDropdown.DropdownMenuSubContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+};

package/dist/components/DropdownMenu/DropdownMenu.js

@@ -0,0 +1,2 @@
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as t from"@radix-ui/react-dropdown-menu";import s from"classnames";import{forwardRef as o}from"react";const r=s("relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-3 py-2 text-sm text-gray-default outline-none transition-colors","data-[disabled]:pointer-events-none data-[disabled]:opacity-50","data-[highlighted]:bg-accent-soft data-[highlighted]:text-accent-default"),n=s("z-50 min-w-48 rounded-md border border-gray-default bg-gray-level-1 p-1 text-gray-default shadow-xl 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=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"),d=e("svg",{"aria-hidden":"true",className:"h-4 w-4",fill:"currentColor",focusable:"false",viewBox:"0 0 16 16",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M6.65 10.15 12.3 4.5a.64.64 0 0 1 .93 0c.14.13.2.3.2.48s-.06.34-.2.47l-6.11 6.13a.64.64 0 0 1-.93 0L3.31 8.72a.62.62 0 0 1-.2-.48c.01-.18.08-.34.21-.47.14-.14.3-.2.48-.2s.34.06.47.2l2.37 2.38Z"})}),l="ml-auto pl-6 text-gray-light",i=a=>e(t.Root,{...a});i.displayName="DropdownMenu.Root";const c=o(({className:a,asChild:o,...r},n)=>e(t.Trigger,{asChild:o,className:s(a),ref:n,...r}));c.displayName="DropdownMenu.Trigger";const m=o(({className:a,sideOffset:o=4,align:r="start",...d},l)=>e(t.Portal,{children:e(t.Content,{align:r,className:s(n,a),ref:l,sideOffset:o,...d})}));m.displayName="DropdownMenu.Content";const p=o(({className:a,...o},n)=>e(t.Item,{className:s(r,a),ref:n,...o}));p.displayName="DropdownMenu.Item";const u=o(({className:o,children:n,checked:l,...i},c)=>a(t.CheckboxItem,{checked:l,className:s(r,o),ref:c,...i,children:[e(t.ItemIndicator,{className:"inline-flex items-center justify-center",children:d}),n]}));u.displayName="DropdownMenu.CheckboxItem";const f=a=>e(t.RadioGroup,{...a});f.displayName="DropdownMenu.RadioGroup";const h=o(({className:o,children:n,...d},l)=>a(t.RadioItem,{className:s(r,o),ref:l,...d,children:[e(t.ItemIndicator,{className:"absolute left-2 inline-flex items-center justify-center",children:e("span",{className:"h-1.5 w-1.5 rounded-circle bg-current"})}),n]}));h.displayName="DropdownMenu.RadioItem";const g=o(({className:a,...o},r)=>e(t.Separator,{className:s("-mx-1 my-1 h-px bg-gray-a6",a),ref:r,...o}));g.displayName="DropdownMenu.Separator";const N=o(({className:a,...o},r)=>e(t.Label,{className:s("px-3 py-2 text-xs font-semibold uppercase text-gray-light",a),ref:r,...o}));N.displayName="DropdownMenu.Label";const w=({className:a,...t})=>e("span",{className:s(l,a),...t});w.displayName="DropdownMenu.Shortcut";const b=a=>e(t.Sub,{...a});b.displayName="DropdownMenu.Sub";const x=o(({className:o,asChild:n,children:d,...i},c)=>a(t.SubTrigger,{asChild:n,className:s(r,"pr-2",o),ref:c,...i,children:[d,e("svg",{"aria-hidden":"true",className:s("h-4 w-4",l),fill:"currentColor",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"m9.29 6.71 1.42-1.42L17.42 12l-6.71 6.71-1.42-1.42L14.58 12 9.29 6.71z"})})]}));x.displayName="DropdownMenu.SubTrigger";const y=o(({className:a,sideOffset:o=6,...r},d)=>e(t.SubContent,{className:s(n,a),ref:d,sideOffset:o,...r}));y.displayName="DropdownMenu.SubContent";const C={Root:i,Trigger:c,Content:m,Item:p,CheckboxItem:u,RadioGroup:f,RadioItem:h,Separator:g,Label:N,Shortcut:w,Sub:b,SubTrigger:x,SubContent:y};export{C as DropdownMenu};
+//# sourceMappingURL=DropdownMenu.js.map

package/dist/components/DropdownMenu/DropdownMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownMenu.js","sources":["../../../src/components/DropdownMenu/DropdownMenu.tsx"],"sourcesContent":["import * as RadixDropdown from \"@radix-ui/react-dropdown-menu\";\nimport cx from \"classnames\";\nimport type { ComponentPropsWithoutRef, FC } from \"react\";\nimport { forwardRef } from \"react\";\n\ntype DropdownMenuRootProps = ComponentPropsWithoutRef<typeof RadixDropdown.Root>;\ntype DropdownMenuTriggerProps = ComponentPropsWithoutRef<\n    typeof RadixDropdown.Trigger\n> & {\n    asChild?: boolean;\n};\ntype DropdownMenuContentProps = ComponentPropsWithoutRef<\n    typeof RadixDropdown.Content\n>;\ntype DropdownMenuItemProps = ComponentPropsWithoutRef<\n    typeof RadixDropdown.Item\n>;\ntype DropdownMenuCheckboxItemProps = ComponentPropsWithoutRef<\n    typeof RadixDropdown.CheckboxItem\n> & {\n    checked?: boolean;\n};\ntype DropdownMenuRadioGroupProps = ComponentPropsWithoutRef<\n    typeof RadixDropdown.RadioGroup\n>;\ntype DropdownMenuRadioItemProps = ComponentPropsWithoutRef<\n    typeof RadixDropdown.RadioItem\n>;\ntype DropdownMenuSeparatorProps = ComponentPropsWithoutRef<\n    typeof RadixDropdown.Separator\n>;\ntype DropdownMenuLabelProps = ComponentPropsWithoutRef<\n    typeof RadixDropdown.Label\n>;\ntype DropdownMenuSubProps = ComponentPropsWithoutRef<\n    typeof RadixDropdown.Sub\n>;\ntype DropdownMenuSubTriggerProps = ComponentPropsWithoutRef<\n    typeof RadixDropdown.SubTrigger\n> & { asChild?: boolean };\ntype DropdownMenuSubContentProps = ComponentPropsWithoutRef<\n    typeof RadixDropdown.SubContent\n>;\n\nconst itemBaseClasses = cx(\n    \"relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-3 py-2 text-sm text-gray-default outline-none transition-colors\",\n    \"data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n    \"data-[highlighted]:bg-accent-soft data-[highlighted]:text-accent-default\"\n);\n\nconst contentBaseClasses = cx(\n    \"z-50 min-w-48 rounded-md border border-gray-default bg-gray-level-1 p-1 text-gray-default shadow-xl outline-none\",\n    \"data-[state=open]:animate-in data-[state=closed]:animate-out\",\n    \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n    \"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\n    \"data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\"\n);\n\nconst indicatorIcon = (\n    <svg\n        aria-hidden=\"true\"\n        className=\"h-4 w-4\"\n        fill=\"currentColor\"\n        focusable=\"false\"\n        viewBox=\"0 0 16 16\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n    >\n        <path d=\"M6.65 10.15 12.3 4.5a.64.64 0 0 1 .93 0c.14.13.2.3.2.48s-.06.34-.2.47l-6.11 6.13a.64.64 0 0 1-.93 0L3.31 8.72a.62.62 0 0 1-.2-.48c.01-.18.08-.34.21-.47.14-.14.3-.2.48-.2s.34.06.47.2l2.37 2.38Z\" />\n    </svg>\n);\n\nconst rightSlotClasses = \"ml-auto pl-6 text-gray-light\";\n\nconst DropdownMenuRoot: FC<DropdownMenuRootProps> = (props) => {\n    return <RadixDropdown.Root {...props} />;\n};\n\nDropdownMenuRoot.displayName = \"DropdownMenu.Root\";\n\nconst DropdownMenuTrigger = forwardRef<HTMLButtonElement, DropdownMenuTriggerProps>(\n    ({ className, asChild, ...props }, ref) => {\n        return (\n            <RadixDropdown.Trigger\n                asChild={asChild}\n                className={cx(className)}\n                ref={ref}\n                {...props}\n            />\n        );\n    }\n);\n\nDropdownMenuTrigger.displayName = \"DropdownMenu.Trigger\";\n\nconst DropdownMenuContent = forwardRef<HTMLDivElement, DropdownMenuContentProps>(\n    ({ className, sideOffset = 4, align = \"start\", ...props }, ref) => {\n        return (\n            <RadixDropdown.Portal>\n                <RadixDropdown.Content\n                    align={align}\n                    className={cx(contentBaseClasses, className)}\n                    ref={ref}\n                    sideOffset={sideOffset}\n                    {...props}\n                />\n            </RadixDropdown.Portal>\n        );\n    }\n);\n\nDropdownMenuContent.displayName = \"DropdownMenu.Content\";\n\nconst DropdownMenuItem = forwardRef<HTMLDivElement, DropdownMenuItemProps>(\n    ({ className, ...props }, ref) => (\n        <RadixDropdown.Item className={cx(itemBaseClasses, className)} ref={ref} {...props} />\n    )\n);\n\nDropdownMenuItem.displayName = \"DropdownMenu.Item\";\n\nconst DropdownMenuCheckboxItem = forwardRef<\n    HTMLDivElement,\n    DropdownMenuCheckboxItemProps\n>(({ className, children, checked, ...props }, ref) => (\n    <RadixDropdown.CheckboxItem\n        checked={checked}\n        className={cx(itemBaseClasses, className)}\n        ref={ref}\n        {...props}\n    >\n        <RadixDropdown.ItemIndicator className=\"inline-flex items-center justify-center\">\n            {indicatorIcon}\n        </RadixDropdown.ItemIndicator>\n        {children}\n    </RadixDropdown.CheckboxItem>\n));\n\nDropdownMenuCheckboxItem.displayName = \"DropdownMenu.CheckboxItem\";\n\nconst DropdownMenuRadioGroup: FC<DropdownMenuRadioGroupProps> = (props) => (\n    <RadixDropdown.RadioGroup {...props} />\n);\n\nDropdownMenuRadioGroup.displayName = \"DropdownMenu.RadioGroup\";\n\nconst DropdownMenuRadioItem = forwardRef<HTMLDivElement, DropdownMenuRadioItemProps>(\n    ({ className, children, ...props }, ref) => (\n        <RadixDropdown.RadioItem\n            className={cx(itemBaseClasses, className)}\n            ref={ref}\n            {...props}\n        >\n            <RadixDropdown.ItemIndicator className=\"absolute left-2 inline-flex items-center justify-center\">\n                <span className=\"h-1.5 w-1.5 rounded-circle bg-current\" />\n            </RadixDropdown.ItemIndicator>\n            {children}\n        </RadixDropdown.RadioItem>\n    )\n);\n\nDropdownMenuRadioItem.displayName = \"DropdownMenu.RadioItem\";\n\nconst DropdownMenuSeparator = forwardRef<\n    React.ElementRef<typeof RadixDropdown.Separator>,\n    DropdownMenuSeparatorProps\n>(({ className, ...props }, ref) => (\n    <RadixDropdown.Separator\n        className={cx(\"-mx-1 my-1 h-px bg-gray-a6\", className)}\n        ref={ref}\n        {...props}\n    />\n));\n\nDropdownMenuSeparator.displayName = \"DropdownMenu.Separator\";\n\nconst DropdownMenuLabel = forwardRef<\n    React.ElementRef<typeof RadixDropdown.Label>,\n    DropdownMenuLabelProps\n>(({ className, ...props }, ref) => (\n    <RadixDropdown.Label\n        className={cx(\"px-3 py-2 text-xs font-semibold uppercase text-gray-light\", className)}\n        ref={ref}\n        {...props}\n    />\n));\n\nDropdownMenuLabel.displayName = \"DropdownMenu.Label\";\n\nconst DropdownMenuShortcut: FC<React.HTMLAttributes<HTMLSpanElement>> = ({\n    className,\n    ...props\n}) => {\n    return <span className={cx(rightSlotClasses, className)} {...props} />;\n};\n\nDropdownMenuShortcut.displayName = \"DropdownMenu.Shortcut\";\n\nconst DropdownMenuSub: FC<DropdownMenuSubProps> = (props) => (\n    <RadixDropdown.Sub {...props} />\n);\n\nDropdownMenuSub.displayName = \"DropdownMenu.Sub\";\n\nconst DropdownMenuSubTrigger = forwardRef<\n    React.ElementRef<typeof RadixDropdown.SubTrigger>,\n    DropdownMenuSubTriggerProps\n>(({ className, asChild, children, ...props }, ref) => (\n    <RadixDropdown.SubTrigger\n        asChild={asChild}\n        className={cx(itemBaseClasses, \"pr-2\", className)}\n        ref={ref}\n        {...props}\n    >\n        {children}\n        <svg\n            aria-hidden=\"true\"\n            className={cx(\"h-4 w-4\", rightSlotClasses)}\n            fill=\"currentColor\"\n            viewBox=\"0 0 24 24\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n        >\n            <path d=\"m9.29 6.71 1.42-1.42L17.42 12l-6.71 6.71-1.42-1.42L14.58 12 9.29 6.71z\" />\n        </svg>\n    </RadixDropdown.SubTrigger>\n));\n\nDropdownMenuSubTrigger.displayName = \"DropdownMenu.SubTrigger\";\n\nconst DropdownMenuSubContent = forwardRef<\n    HTMLDivElement,\n    DropdownMenuSubContentProps\n>(({ className, sideOffset = 6, ...props }, ref) => (\n    <RadixDropdown.SubContent\n        className={cx(contentBaseClasses, className)}\n        ref={ref}\n        sideOffset={sideOffset}\n        {...props}\n    />\n));\n\nDropdownMenuSubContent.displayName = \"DropdownMenu.SubContent\";\n\nexport const DropdownMenu = {\n    Root: DropdownMenuRoot,\n    Trigger: DropdownMenuTrigger,\n    Content: DropdownMenuContent,\n    Item: DropdownMenuItem,\n    CheckboxItem: DropdownMenuCheckboxItem,\n    RadioGroup: DropdownMenuRadioGroup,\n    RadioItem: DropdownMenuRadioItem,\n    Separator: DropdownMenuSeparator,\n    Label: DropdownMenuLabel,\n    Shortcut: DropdownMenuShortcut,\n    Sub: DropdownMenuSub,\n    SubTrigger: DropdownMenuSubTrigger,\n    SubContent: DropdownMenuSubContent,\n};\n\n\n"],"names":["itemBaseClasses","cx","contentBaseClasses","indicatorIcon","_jsx","className","fill","focusable","viewBox","xmlns","children","d","rightSlotClasses","DropdownMenuRoot","props","RadixDropdown","Root","displayName","DropdownMenuTrigger","forwardRef","asChild","ref","Trigger","DropdownMenuContent","sideOffset","align","Portal","Content","DropdownMenuItem","Item","DropdownMenuCheckboxItem","checked","_jsxs","CheckboxItem","ItemIndicator","DropdownMenuRadioGroup","RadioGroup","DropdownMenuRadioItem","RadioItem","DropdownMenuSeparator","Separator","DropdownMenuLabel","Label","DropdownMenuShortcut","DropdownMenuSub","Sub","DropdownMenuSubTrigger","SubTrigger","DropdownMenuSubContent","SubContent","DropdownMenu","Shortcut"],"mappings":"+JA4CA,MAAMA,EAAkBC,EACpB,4IACA,iEACA,4EAGEC,EAAqBD,EACvB,mHACA,+DACA,6DACA,+DACA,+JAGEE,EACFC,EAAA,MAAA,CAAA,cACgB,OACZC,UAAU,UACVC,KAAK,eACLC,UAAU,QACVC,QAAQ,YACRC,MAAM,6BAA4BC,SAElCN,EAAA,OAAA,CAAMO,EAAE,uMAIVC,EAAmB,+BAEnBC,EAA+CC,GAC1CV,EAACW,EAAcC,KAAI,IAAKF,IAGnCD,EAAiBI,YAAc,oBAE/B,MAAMC,EAAsBC,EACxB,EAAGd,YAAWe,aAAYN,GAASO,IAE3BjB,EAACW,EAAcO,SACXF,QAASA,EACTf,UAAWJ,EAAGI,GACdgB,IAAKA,KACDP,KAMpBI,EAAoBD,YAAc,uBAElC,MAAMM,EAAsBJ,EACxB,EAAGd,YAAWmB,aAAa,EAAGC,QAAQ,WAAYX,GAASO,IAEnDjB,EAACW,EAAcW,iBACXtB,EAACW,EAAcY,SACXF,MAAOA,EACPpB,UAAWJ,EAAGC,EAAoBG,GAClCgB,IAAKA,EACLG,WAAYA,KACRV,OAOxBS,EAAoBN,YAAc,uBAElC,MAAMW,EAAmBT,EACrB,EAAGd,eAAcS,GAASO,IACtBjB,EAACW,EAAcc,MAAKxB,UAAWJ,EAAGD,EAAiBK,GAAYgB,IAAKA,KAASP,KAIrFc,EAAiBX,YAAc,oBAE/B,MAAMa,EAA2BX,EAG/B,EAAGd,YAAWK,WAAUqB,aAAYjB,GAASO,IAC3CW,EAACjB,EAAckB,aAAY,CACvBF,QAASA,EACT1B,UAAWJ,EAAGD,EAAiBK,GAC/BgB,IAAKA,KACDP,EAAKJ,SAAA,CAETN,EAACW,EAAcmB,cAAa,CAAC7B,UAAU,0CAAyCK,SAC3EP,IAEJO,MAIToB,EAAyBb,YAAc,4BAEvC,MAAMkB,EAA2DrB,GAC7DV,EAACW,EAAcqB,WAAU,IAAKtB,IAGlCqB,EAAuBlB,YAAc,0BAErC,MAAMoB,EAAwBlB,EAC1B,EAAGd,YAAWK,cAAaI,GAASO,IAChCW,EAACjB,EAAcuB,UAAS,CACpBjC,UAAWJ,EAAGD,EAAiBK,GAC/BgB,IAAKA,KACDP,EAAKJ,SAAA,CAETN,EAACW,EAAcmB,cAAa,CAAC7B,UAAU,0DAAyDK,SAC5FN,EAAA,OAAA,CAAMC,UAAU,4CAEnBK,MAKb2B,EAAsBpB,YAAc,yBAEpC,MAAMsB,EAAwBpB,EAG5B,EAAGd,eAAcS,GAASO,IACxBjB,EAACW,EAAcyB,WACXnC,UAAWJ,EAAG,6BAA8BI,GAC5CgB,IAAKA,KACDP,KAIZyB,EAAsBtB,YAAc,yBAEpC,MAAMwB,EAAoBtB,EAGxB,EAAGd,eAAcS,GAASO,IACxBjB,EAACW,EAAc2B,OACXrC,UAAWJ,EAAG,4DAA6DI,GAC3EgB,IAAKA,KACDP,KAIZ2B,EAAkBxB,YAAc,qBAEhC,MAAM0B,EAAkE,EACpEtC,eACGS,KAEIV,EAAA,OAAA,CAAMC,UAAWJ,EAAGW,EAAkBP,MAAgBS,IAGjE6B,EAAqB1B,YAAc,wBAEnC,MAAM2B,EAA6C9B,GAC/CV,EAACW,EAAc8B,IAAG,IAAK/B,IAG3B8B,EAAgB3B,YAAc,mBAE9B,MAAM6B,EAAyB3B,EAG7B,EAAGd,YAAWe,UAASV,cAAaI,GAASO,IAC3CW,EAACjB,EAAcgC,WAAU,CACrB3B,QAASA,EACTf,UAAWJ,EAAGD,EAAiB,OAAQK,GACvCgB,IAAKA,KACDP,EAAKJ,SAAA,CAERA,EACDN,EAAA,MAAA,CAAA,cACgB,OACZC,UAAWJ,EAAG,UAAWW,GACzBN,KAAK,eACLE,QAAQ,YACRC,MAAM,6BAA4BC,SAElCN,EAAA,OAAA,CAAMO,EAAE,iFAKpBmC,EAAuB7B,YAAc,0BAErC,MAAM+B,EAAyB7B,EAG7B,EAAGd,YAAWmB,aAAa,KAAMV,GAASO,IACxCjB,EAACW,EAAckC,WAAU,CACrB5C,UAAWJ,EAAGC,EAAoBG,GAClCgB,IAAKA,EACLG,WAAYA,KACRV,KAIZkC,EAAuB/B,YAAc,0BAE9B,MAAMiC,EAAe,CACxBlC,KAAMH,EACNS,QAASJ,EACTS,QAASJ,EACTM,KAAMD,EACNK,aAAcH,EACdM,WAAYD,EACZG,UAAWD,EACXG,UAAWD,EACXG,MAAOD,EACPU,SAAUR,EACVE,IAAKD,EACLG,WAAYD,EACZG,WAAYD"}

package/dist/components/Heading/Heading.d.ts

@@ -0,0 +1,11 @@
+import { type VariantProps } from 'class-variance-authority';
+declare const headingVariants: (props?: ({
+    size?: "sm" | "base" | "lg" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export type HeadingSize = 'sm' | 'base' | 'lg';
+export interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement>, VariantProps<typeof headingVariants> {
+    asChild?: boolean;
+    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div';
+}
+export declare const Heading: import("react").ForwardRefExoticComponent<HeadingProps & import("react").RefAttributes<HTMLHeadingElement>>;
+export {};

package/dist/components/Heading/Heading.js

@@ -0,0 +1,2 @@
+import{jsx as a}from"react/jsx-runtime";import{Slot as e}from"@radix-ui/react-slot";import{cx as s,cva as t}from"class-variance-authority";import{forwardRef as i}from"react";const r=t("",{variants:{size:{sm:"text-base font-semibold",base:"text-lg font-semibold",lg:"text-xl font-semibold"}},defaultVariants:{size:"base"}}),o=i(({className:t,size:i,asChild:o=!1,as:m="h2",...l},f)=>a(o?e:m,{className:s(r({size:i}),t),ref:f,...l}));o.displayName="Heading";export{o as Heading};
+//# sourceMappingURL=Heading.js.map

package/dist/components/Heading/Heading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Heading.js","sources":["../../../src/components/Heading/Heading.tsx"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cx } from 'class-variance-authority'\nimport { forwardRef } from 'react'\n\nconst headingVariants = cva('', {\n  variants: {\n    size: {\n      sm: 'text-base font-semibold',\n      base: 'text-lg font-semibold',\n      lg: 'text-xl font-semibold'\n    }\n  },\n  defaultVariants: {\n    size: 'base'\n  }\n})\n\nexport type HeadingSize = 'sm' | 'base' | 'lg'\n\nexport interface HeadingProps\n  extends React.HTMLAttributes<HTMLHeadingElement>,\n    VariantProps<typeof headingVariants> {\n  asChild?: boolean\n  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div'\n}\n\nexport const Heading = forwardRef<HTMLHeadingElement, HeadingProps>(\n  ({ className, size, asChild = false, as: Comp = 'h2', ...props }, ref) => {\n    const Component = asChild ? Slot : Comp\n\n    return (\n      <Component\n        className={cx(headingVariants({ size }), className)}\n        ref={ref}\n        {...props}\n      />\n    )\n  }\n)\n\nHeading.displayName = 'Heading'\n"],"names":["headingVariants","cva","variants","size","sm","base","lg","defaultVariants","Heading","forwardRef","className","asChild","as","Comp","props","ref","_jsx","Slot","cx","displayName"],"mappings":"8KAKA,MAAMA,EAAkBC,EAAI,GAAI,CAC9BC,SAAU,CACRC,KAAM,CACJC,GAAI,0BACJC,KAAM,wBACNC,GAAI,0BAGRC,gBAAiB,CACfJ,KAAM,UAaGK,EAAUC,EACrB,EAAGC,YAAWP,OAAMQ,WAAU,EAAOC,GAAIC,EAAO,QAASC,GAASC,IAI9DC,EAHgBL,EAAUM,EAAOJ,EAGvB,CACRH,UAAWQ,EAAGlB,EAAgB,CAAEG,SAASO,GACzCK,IAAKA,KACDD,KAMZN,EAAQW,YAAc"}