@dev-dga/react 0.10.1 → 0.12.0

package/dist/chunk-6CDZ7ZBG.js

@@ -0,0 +1,85 @@
+import {
+  cn
+} from "./chunk-7NTT2UXP.js";
+
+// src/components/Chip/Chip.tsx
+import { useState } from "react";
+import { Slot as SlotPrimitive } from "radix-ui";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+var chipVariants = cva("ddga-chip", {
+  variants: {
+    variant: {
+      primary: "ddga-chip--primary",
+      neutral: "ddga-chip--neutral"
+    },
+    size: {
+      sm: "ddga-chip--sm",
+      md: "ddga-chip--md",
+      lg: "ddga-chip--lg"
+    },
+    rounded: {
+      true: "ddga-chip--rounded"
+    }
+  },
+  defaultVariants: {
+    variant: "primary",
+    size: "md"
+  }
+});
+function Chip({
+  variant,
+  size,
+  rounded,
+  selected,
+  defaultSelected = false,
+  onSelectedChange,
+  leadingIcon,
+  trailingIcon,
+  asChild,
+  className,
+  children,
+  disabled,
+  onClick,
+  type = "button",
+  ...props
+}) {
+  const isControlled = selected !== void 0;
+  const [internal, setInternal] = useState(defaultSelected);
+  const isSelected = isControlled ? selected : internal;
+  const Comp = asChild ? SlotPrimitive.Slot : "button";
+  return /* @__PURE__ */ jsxs(
+    Comp,
+    {
+      ...asChild ? {} : { type, disabled },
+      ...asChild && disabled ? { tabIndex: -1 } : {},
+      "aria-disabled": disabled || void 0,
+      "data-slot": "chip",
+      "aria-pressed": isSelected,
+      className: cn(chipVariants({ variant, size, rounded }), className),
+      onClick: (e) => {
+        if (disabled) {
+          e.preventDefault();
+          return;
+        }
+        onClick?.(e);
+        if (e.defaultPrevented) return;
+        const next = !isSelected;
+        if (!isControlled) setInternal(next);
+        onSelectedChange?.(next);
+      },
+      ...props,
+      children: [
+        leadingIcon != null && /* @__PURE__ */ jsx("span", { className: "ddga-chip__icon", "aria-hidden": "true", children: leadingIcon }),
+        asChild ? /* @__PURE__ */ jsx(SlotPrimitive.Slottable, { children }) : children != null && /* @__PURE__ */ jsx("span", { className: "ddga-chip__label", children }),
+        trailingIcon != null && /* @__PURE__ */ jsx("span", { className: "ddga-chip__icon", "aria-hidden": "true", children: trailingIcon })
+      ]
+    }
+  );
+}
+
+export {
+  chipVariants,
+  Chip
+};
+//# sourceMappingURL=chunk-6CDZ7ZBG.js.map

package/dist/chunk-6CDZ7ZBG.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Chip/Chip.tsx"],"sourcesContent":["'use client';\n\nimport { useState, type ReactNode } from 'react';\nimport { Slot as SlotPrimitive } from 'radix-ui';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\n\nconst chipVariants = cva('ddga-chip', {\n  variants: {\n    variant: {\n      primary: 'ddga-chip--primary',\n      neutral: 'ddga-chip--neutral',\n    },\n    size: {\n      sm: 'ddga-chip--sm',\n      md: 'ddga-chip--md',\n      lg: 'ddga-chip--lg',\n    },\n    rounded: {\n      true: 'ddga-chip--rounded',\n    },\n  },\n  defaultVariants: {\n    variant: 'primary',\n    size: 'md',\n  },\n});\n\ninterface ChipProps\n  extends Omit<React.ComponentProps<'button'>, 'onChange'>, VariantProps<typeof chipVariants> {\n  /** Controlled selected state — drives `aria-pressed` and the filled treatment. */\n  selected?: boolean;\n  /** Uncontrolled initial selected state. */\n  defaultSelected?: boolean;\n  /** Called with the next selected value when the chip toggles. */\n  onSelectedChange?: (selected: boolean) => void;\n  /** Leading icon (inherits the chip text colour; 14px, 16px at `lg`). */\n  leadingIcon?: ReactNode;\n  /** Trailing icon. */\n  trailingIcon?: ReactNode;\n  /** Render as the child element (Radix `Slot`) — e.g. wrap a router link. */\n  asChild?: boolean;\n}\n\n/**\n * Interactive selectable chip (SDGA \"Chip\") — a toggle button, distinct from the\n * static `Tag` (SDGA \"Tags\"). Selecting fills the chip (`#1B8354` primary / gray-700 neutral).\n */\nfunction Chip({\n  variant,\n  size,\n  rounded,\n  selected,\n  defaultSelected = false,\n  onSelectedChange,\n  leadingIcon,\n  trailingIcon,\n  asChild,\n  className,\n  children,\n  disabled,\n  onClick,\n  type = 'button',\n  ...props\n}: ChipProps) {\n  const isControlled = selected !== undefined;\n  const [internal, setInternal] = useState(defaultSelected);\n  const isSelected = isControlled ? selected : internal;\n  const Comp = asChild ? SlotPrimitive.Slot : 'button';\n\n  return (\n    <Comp\n      // type/native disabled only apply to <button>; in asChild mode lean on\n      // aria-disabled + tabIndex (CSS matches [aria-disabled='true'] too).\n      {...(asChild ? {} : { type, disabled })}\n      {...(asChild && disabled ? { tabIndex: -1 } : {})}\n      aria-disabled={disabled || undefined}\n      data-slot=\"chip\"\n      aria-pressed={isSelected}\n      className={cn(chipVariants({ variant, size, rounded }), className)}\n      onClick={(e) => {\n        if (disabled) {\n          e.preventDefault();\n          return;\n        }\n        onClick?.(e);\n        if (e.defaultPrevented) return;\n        const next = !isSelected;\n        if (!isControlled) setInternal(next);\n        onSelectedChange?.(next);\n      }}\n      {...props}\n    >\n      {leadingIcon != null && (\n        <span className=\"ddga-chip__icon\" aria-hidden=\"true\">\n          {leadingIcon}\n        </span>\n      )}\n      {asChild ? (\n        <SlotPrimitive.Slottable>{children}</SlotPrimitive.Slottable>\n      ) : (\n        children != null && <span className=\"ddga-chip__label\">{children}</span>\n      )}\n      {trailingIcon != null && (\n        <span className=\"ddga-chip__icon\" aria-hidden=\"true\">\n          {trailingIcon}\n        </span>\n      )}\n    </Comp>\n  );\n}\n\nexport { Chip, chipVariants };\nexport type { ChipProps };\n"],"mappings":";;;;;AAEA,SAAS,gBAAgC;AACzC,SAAS,QAAQ,qBAAqB;AACtC,SAAS,WAA8B;AAmEnC,SAuBI,KAvBJ;AAhEJ,IAAM,eAAe,IAAI,aAAa;AAAA,EACpC,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS;AAAA,MACT,SAAS;AAAA,IACX;AAAA,IACA,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IACN;AAAA,IACA,SAAS;AAAA,MACP,MAAM;AAAA,IACR;AAAA,EACF;AAAA,EACA,iBAAiB;AAAA,IACf,SAAS;AAAA,IACT,MAAM;AAAA,EACR;AACF,CAAC;AAsBD,SAAS,KAAK;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,kBAAkB;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,GAAG;AACL,GAAc;AACZ,QAAM,eAAe,aAAa;AAClC,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,eAAe;AACxD,QAAM,aAAa,eAAe,WAAW;AAC7C,QAAM,OAAO,UAAU,cAAc,OAAO;AAE5C,SACE;AAAA,IAAC;AAAA;AAAA,MAGE,GAAI,UAAU,CAAC,IAAI,EAAE,MAAM,SAAS;AAAA,MACpC,GAAI,WAAW,WAAW,EAAE,UAAU,GAAG,IAAI,CAAC;AAAA,MAC/C,iBAAe,YAAY;AAAA,MAC3B,aAAU;AAAA,MACV,gBAAc;AAAA,MACd,WAAW,GAAG,aAAa,EAAE,SAAS,MAAM,QAAQ,CAAC,GAAG,SAAS;AAAA,MACjE,SAAS,CAAC,MAAM;AACd,YAAI,UAAU;AACZ,YAAE,eAAe;AACjB;AAAA,QACF;AACA,kBAAU,CAAC;AACX,YAAI,EAAE,iBAAkB;AACxB,cAAM,OAAO,CAAC;AACd,YAAI,CAAC,aAAc,aAAY,IAAI;AACnC,2BAAmB,IAAI;AAAA,MACzB;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,uBAAe,QACd,oBAAC,UAAK,WAAU,mBAAkB,eAAY,QAC3C,uBACH;AAAA,QAED,UACC,oBAAC,cAAc,WAAd,EAAyB,UAAS,IAEnC,YAAY,QAAQ,oBAAC,UAAK,WAAU,oBAAoB,UAAS;AAAA,QAElE,gBAAgB,QACf,oBAAC,UAAK,WAAU,mBAAkB,eAAY,QAC3C,wBACH;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

package/dist/{chunk-KPZ5T4DW.cjs → chunk-6G2BJQZL.cjs}

@@ -1,6 +1,6 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
 
-var _chunkIKWD2OENcjs = require('./chunk-IKWD2OEN.cjs');
+var _chunkYS2JJ73Mcjs = require('./chunk-YS2JJ73M.cjs');
 
 
 var _chunkFQLVTLUIcjs = require('./chunk-FQLVTLUI.cjs');
@@ -66,7 +66,7 @@ function DrawerContent({
               className: "ddga-drawer__close",
               "aria-label": closeLabel,
               "data-slot": "drawer-close-x",
-              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkIKWD2OENcjs.Close, { "aria-hidden": "true" })
+              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkYS2JJ73Mcjs.Close, { "aria-hidden": "true" })
             }
           ) : null
         ]
@@ -124,4 +124,4 @@ function DrawerClose({ className, ...props }) {
 
 
 exports.drawerVariants = drawerVariants; exports.Drawer = Drawer; exports.DrawerTrigger = DrawerTrigger; exports.DrawerContent = DrawerContent; exports.DrawerHeader = DrawerHeader; exports.DrawerTitle = DrawerTitle; exports.DrawerDescription = DrawerDescription; exports.DrawerBody = DrawerBody; exports.DrawerFooter = DrawerFooter; exports.DrawerClose = DrawerClose;
-//# sourceMappingURL=chunk-KPZ5T4DW.cjs.map
+//# sourceMappingURL=chunk-6G2BJQZL.cjs.map

package/dist/{chunk-KPZ5T4DW.cjs.map → chunk-6G2BJQZL.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["/home/devdhaif/work/react/dga-dev/packages/react/dist/chunk-KPZ5T4DW.cjs","../src/components/Drawer/Drawer.tsx"],"names":[],"mappings":"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","file":"/home/devdhaif/work/react/dga-dev/packages/react/dist/chunk-KPZ5T4DW.cjs","sourcesContent":[null,"'use client';\n\nimport { useContext } from 'react';\nimport { Dialog as DialogPrimitive, Slot as SlotPrimitive } from 'radix-ui';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\nimport { DgaContext } from '../../providers/DgaContext';\nimport { Close } from '../../internal/icons';\n\n// ─── 1. Variants ─── //\n//\n// Drawer reuses Radix Dialog under the hood (same focus trap + scroll lock +\n// ESC contract as Modal), but slides in from an edge instead of centering.\n// `side` uses logical names — `start`/`end` flip with `dir`, so the same\n// markup works for both LTR and RTL without the consumer doing anything.\n\nconst drawerVariants = cva('ddga-drawer', {\n  variants: {\n    side: {\n      start: 'ddga-drawer--start',\n      end: 'ddga-drawer--end',\n      top: 'ddga-drawer--top',\n      bottom: 'ddga-drawer--bottom',\n    },\n    size: {\n      sm: 'ddga-drawer--sm',\n      md: 'ddga-drawer--md',\n      lg: 'ddga-drawer--lg',\n      full: 'ddga-drawer--full',\n    },\n  },\n  defaultVariants: {\n    side: 'end',\n    size: 'md',\n  },\n});\n\n// ─── 2. Types ─── //\n\ntype DrawerProps = React.ComponentProps<typeof DialogPrimitive.Root>;\ntype DrawerTriggerProps = React.ComponentProps<typeof DialogPrimitive.Trigger>;\ntype DrawerCloseProps = React.ComponentProps<typeof DialogPrimitive.Close>;\n\ninterface DrawerContentProps\n  extends\n    React.ComponentProps<typeof DialogPrimitive.Content>,\n    VariantProps<typeof drawerVariants> {\n  /** Show the corner X close button. Defaults to `true`. */\n  showCloseButton?: boolean;\n  /** Localized aria-label for the close button. Defaults to `\"Close\"`. */\n  closeLabel?: string;\n}\n\ntype DrawerSectionProps = React.ComponentProps<'div'> & { asChild?: boolean };\n\ninterface DrawerTitleProps extends React.ComponentProps<typeof DialogPrimitive.Title> {\n  asChild?: boolean;\n}\n\ninterface DrawerDescriptionProps extends React.ComponentProps<typeof DialogPrimitive.Description> {\n  asChild?: boolean;\n}\n\n// ─── 3. Components ─── //\n\nfunction Drawer(props: DrawerProps) {\n  return <DialogPrimitive.Root {...props} />;\n}\n\nfunction DrawerTrigger({ className, ...props }: DrawerTriggerProps) {\n  return <DialogPrimitive.Trigger data-slot=\"drawer-trigger\" className={className} {...props} />;\n}\n\nfunction DrawerContent({\n  side,\n  size,\n  showCloseButton = true,\n  closeLabel = 'Close',\n  className,\n  children,\n  ...props\n}: DrawerContentProps) {\n  // Anchor the Portal to the DgaProvider's body-level portal container so\n  // theming + dark mode inherit AND `position: fixed` stays anchored to the\n  // viewport (any `transform` ancestor would otherwise reparent the\n  // containing block and clip the drawer). Regression test mirrors\n  // Select/Modal/DropdownMenu.\n  const ctx = useContext(DgaContext);\n  const portalContainer = ctx?.portalEl ?? ctx?.rootEl ?? undefined;\n\n  return (\n    <DialogPrimitive.Portal container={portalContainer}>\n      <DialogPrimitive.Overlay className=\"ddga-drawer__overlay\" data-slot=\"drawer-overlay\" />\n      <DialogPrimitive.Content\n        data-slot=\"drawer-content\"\n        className={cn(drawerVariants({ side, size }), className)}\n        {...props}\n      >\n        {children}\n        {showCloseButton ? (\n          <DialogPrimitive.Close\n            className=\"ddga-drawer__close\"\n            aria-label={closeLabel}\n            data-slot=\"drawer-close-x\"\n          >\n            <Close aria-hidden=\"true\" />\n          </DialogPrimitive.Close>\n        ) : null}\n      </DialogPrimitive.Content>\n    </DialogPrimitive.Portal>\n  );\n}\n\nfunction DrawerHeader({ asChild, className, ...props }: DrawerSectionProps) {\n  const Comp = asChild ? SlotPrimitive.Slot : 'div';\n  return (\n    <Comp data-slot=\"drawer-header\" className={cn('ddga-drawer__header', className)} {...props} />\n  );\n}\n\nfunction DrawerTitle({ asChild, className, ...props }: DrawerTitleProps) {\n  return (\n    <DialogPrimitive.Title\n      asChild={asChild}\n      data-slot=\"drawer-title\"\n      className={cn('ddga-drawer__title', className)}\n      {...props}\n    />\n  );\n}\n\nfunction DrawerDescription({ asChild, className, ...props }: DrawerDescriptionProps) {\n  return (\n    <DialogPrimitive.Description\n      asChild={asChild}\n      data-slot=\"drawer-description\"\n      className={cn('ddga-drawer__description', className)}\n      {...props}\n    />\n  );\n}\n\nfunction DrawerBody({ asChild, className, ...props }: DrawerSectionProps) {\n  // Scrollable middle region — keeps Header/Footer pinned while the body\n  // overflows. Separate from Header/Footer so consumers can opt in.\n  const Comp = asChild ? SlotPrimitive.Slot : 'div';\n  return <Comp data-slot=\"drawer-body\" className={cn('ddga-drawer__body', className)} {...props} />;\n}\n\nfunction DrawerFooter({ asChild, className, ...props }: DrawerSectionProps) {\n  const Comp = asChild ? SlotPrimitive.Slot : 'div';\n  return (\n    <Comp data-slot=\"drawer-footer\" className={cn('ddga-drawer__footer', className)} {...props} />\n  );\n}\n\nfunction DrawerClose({ className, ...props }: DrawerCloseProps) {\n  return <DialogPrimitive.Close data-slot=\"drawer-close\" className={className} {...props} />;\n}\n\n// ─── 4. Exports ─── //\n\nexport {\n  Drawer,\n  DrawerTrigger,\n  DrawerContent,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerDescription,\n  DrawerBody,\n  DrawerFooter,\n  DrawerClose,\n  drawerVariants,\n};\nexport type {\n  DrawerProps,\n  DrawerTriggerProps,\n  DrawerContentProps,\n  DrawerSectionProps,\n  DrawerTitleProps,\n  DrawerDescriptionProps,\n  DrawerCloseProps,\n};\n"]}
+{"version":3,"sources":["/home/devdhaif/work/react/dga-dev/packages/react/dist/chunk-6G2BJQZL.cjs","../src/components/Drawer/Drawer.tsx"],"names":[],"mappings":"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","file":"/home/devdhaif/work/react/dga-dev/packages/react/dist/chunk-6G2BJQZL.cjs","sourcesContent":[null,"'use client';\n\nimport { useContext } from 'react';\nimport { Dialog as DialogPrimitive, Slot as SlotPrimitive } from 'radix-ui';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\nimport { DgaContext } from '../../providers/DgaContext';\nimport { Close } from '../../internal/icons';\n\n// ─── 1. Variants ─── //\n//\n// Drawer reuses Radix Dialog under the hood (same focus trap + scroll lock +\n// ESC contract as Modal), but slides in from an edge instead of centering.\n// `side` uses logical names — `start`/`end` flip with `dir`, so the same\n// markup works for both LTR and RTL without the consumer doing anything.\n\nconst drawerVariants = cva('ddga-drawer', {\n  variants: {\n    side: {\n      start: 'ddga-drawer--start',\n      end: 'ddga-drawer--end',\n      top: 'ddga-drawer--top',\n      bottom: 'ddga-drawer--bottom',\n    },\n    size: {\n      sm: 'ddga-drawer--sm',\n      md: 'ddga-drawer--md',\n      lg: 'ddga-drawer--lg',\n      full: 'ddga-drawer--full',\n    },\n  },\n  defaultVariants: {\n    side: 'end',\n    size: 'md',\n  },\n});\n\n// ─── 2. Types ─── //\n\ntype DrawerProps = React.ComponentProps<typeof DialogPrimitive.Root>;\ntype DrawerTriggerProps = React.ComponentProps<typeof DialogPrimitive.Trigger>;\ntype DrawerCloseProps = React.ComponentProps<typeof DialogPrimitive.Close>;\n\ninterface DrawerContentProps\n  extends\n    React.ComponentProps<typeof DialogPrimitive.Content>,\n    VariantProps<typeof drawerVariants> {\n  /** Show the corner X close button. Defaults to `true`. */\n  showCloseButton?: boolean;\n  /** Localized aria-label for the close button. Defaults to `\"Close\"`. */\n  closeLabel?: string;\n}\n\ntype DrawerSectionProps = React.ComponentProps<'div'> & { asChild?: boolean };\n\ninterface DrawerTitleProps extends React.ComponentProps<typeof DialogPrimitive.Title> {\n  asChild?: boolean;\n}\n\ninterface DrawerDescriptionProps extends React.ComponentProps<typeof DialogPrimitive.Description> {\n  asChild?: boolean;\n}\n\n// ─── 3. Components ─── //\n\nfunction Drawer(props: DrawerProps) {\n  return <DialogPrimitive.Root {...props} />;\n}\n\nfunction DrawerTrigger({ className, ...props }: DrawerTriggerProps) {\n  return <DialogPrimitive.Trigger data-slot=\"drawer-trigger\" className={className} {...props} />;\n}\n\nfunction DrawerContent({\n  side,\n  size,\n  showCloseButton = true,\n  closeLabel = 'Close',\n  className,\n  children,\n  ...props\n}: DrawerContentProps) {\n  // Anchor the Portal to the DgaProvider's body-level portal container so\n  // theming + dark mode inherit AND `position: fixed` stays anchored to the\n  // viewport (any `transform` ancestor would otherwise reparent the\n  // containing block and clip the drawer). Regression test mirrors\n  // Select/Modal/DropdownMenu.\n  const ctx = useContext(DgaContext);\n  const portalContainer = ctx?.portalEl ?? ctx?.rootEl ?? undefined;\n\n  return (\n    <DialogPrimitive.Portal container={portalContainer}>\n      <DialogPrimitive.Overlay className=\"ddga-drawer__overlay\" data-slot=\"drawer-overlay\" />\n      <DialogPrimitive.Content\n        data-slot=\"drawer-content\"\n        className={cn(drawerVariants({ side, size }), className)}\n        {...props}\n      >\n        {children}\n        {showCloseButton ? (\n          <DialogPrimitive.Close\n            className=\"ddga-drawer__close\"\n            aria-label={closeLabel}\n            data-slot=\"drawer-close-x\"\n          >\n            <Close aria-hidden=\"true\" />\n          </DialogPrimitive.Close>\n        ) : null}\n      </DialogPrimitive.Content>\n    </DialogPrimitive.Portal>\n  );\n}\n\nfunction DrawerHeader({ asChild, className, ...props }: DrawerSectionProps) {\n  const Comp = asChild ? SlotPrimitive.Slot : 'div';\n  return (\n    <Comp data-slot=\"drawer-header\" className={cn('ddga-drawer__header', className)} {...props} />\n  );\n}\n\nfunction DrawerTitle({ asChild, className, ...props }: DrawerTitleProps) {\n  return (\n    <DialogPrimitive.Title\n      asChild={asChild}\n      data-slot=\"drawer-title\"\n      className={cn('ddga-drawer__title', className)}\n      {...props}\n    />\n  );\n}\n\nfunction DrawerDescription({ asChild, className, ...props }: DrawerDescriptionProps) {\n  return (\n    <DialogPrimitive.Description\n      asChild={asChild}\n      data-slot=\"drawer-description\"\n      className={cn('ddga-drawer__description', className)}\n      {...props}\n    />\n  );\n}\n\nfunction DrawerBody({ asChild, className, ...props }: DrawerSectionProps) {\n  // Scrollable middle region — keeps Header/Footer pinned while the body\n  // overflows. Separate from Header/Footer so consumers can opt in.\n  const Comp = asChild ? SlotPrimitive.Slot : 'div';\n  return <Comp data-slot=\"drawer-body\" className={cn('ddga-drawer__body', className)} {...props} />;\n}\n\nfunction DrawerFooter({ asChild, className, ...props }: DrawerSectionProps) {\n  const Comp = asChild ? SlotPrimitive.Slot : 'div';\n  return (\n    <Comp data-slot=\"drawer-footer\" className={cn('ddga-drawer__footer', className)} {...props} />\n  );\n}\n\nfunction DrawerClose({ className, ...props }: DrawerCloseProps) {\n  return <DialogPrimitive.Close data-slot=\"drawer-close\" className={className} {...props} />;\n}\n\n// ─── 4. Exports ─── //\n\nexport {\n  Drawer,\n  DrawerTrigger,\n  DrawerContent,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerDescription,\n  DrawerBody,\n  DrawerFooter,\n  DrawerClose,\n  drawerVariants,\n};\nexport type {\n  DrawerProps,\n  DrawerTriggerProps,\n  DrawerContentProps,\n  DrawerSectionProps,\n  DrawerTitleProps,\n  DrawerDescriptionProps,\n  DrawerCloseProps,\n};\n"]}

package/dist/chunk-6HRQMDI3.js

@@ -0,0 +1,95 @@
+import {
+  AlertCircleFeatured,
+  AlertTriangleFeatured,
+  CheckCircleFeatured,
+  CloseSolid,
+  InfoCircleFeatured
+} from "./chunk-FFGALWM2.js";
+import {
+  cn
+} from "./chunk-7NTT2UXP.js";
+
+// src/components/Notification/Notification.tsx
+import { useState } from "react";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+var notificationVariants = cva("ddga-notification", {
+  variants: {
+    type: {
+      neutral: "ddga-notification--neutral",
+      info: "ddga-notification--info",
+      success: "ddga-notification--success",
+      warning: "ddga-notification--warning",
+      critical: "ddga-notification--critical"
+    }
+  },
+  defaultVariants: { type: "neutral" }
+});
+var DEFAULT_ICONS = {
+  neutral: /* @__PURE__ */ jsx(InfoCircleFeatured, { "aria-hidden": "true" }),
+  info: /* @__PURE__ */ jsx(InfoCircleFeatured, { "aria-hidden": "true" }),
+  success: /* @__PURE__ */ jsx(CheckCircleFeatured, { "aria-hidden": "true" }),
+  warning: /* @__PURE__ */ jsx(AlertTriangleFeatured, { "aria-hidden": "true" }),
+  critical: /* @__PURE__ */ jsx(AlertCircleFeatured, { "aria-hidden": "true" })
+};
+function Notification({
+  type,
+  lead,
+  icon,
+  actions,
+  onClose,
+  open: controlledOpen,
+  closeLabel = "Dismiss",
+  live,
+  className,
+  children,
+  ...props
+}) {
+  const [internalOpen, setInternalOpen] = useState(true);
+  const isControlled = controlledOpen !== void 0;
+  const open = isControlled ? controlledOpen : internalOpen;
+  if (!open) return null;
+  const resolvedIcon = icon === false ? null : icon ?? DEFAULT_ICONS[type ?? "neutral"];
+  const liveProps = live === "assertive" ? { role: "alert", "aria-live": "assertive" } : live === "polite" ? { role: "status", "aria-live": "polite" } : {};
+  function handleClose() {
+    if (!isControlled) setInternalOpen(false);
+    onClose?.();
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "notification",
+      "data-type": type ?? "neutral",
+      className: cn(notificationVariants({ type }), className),
+      ...liveProps,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "ddga-notification__title", children: [
+          /* @__PURE__ */ jsxs("div", { className: "ddga-notification__content", children: [
+            resolvedIcon ? /* @__PURE__ */ jsx("span", { className: "ddga-notification__icon", "aria-hidden": "true", children: resolvedIcon }) : null,
+            lead ? /* @__PURE__ */ jsx("span", { className: "ddga-notification__lead", "data-slot": "notification-lead", children: lead }) : null,
+            children ? /* @__PURE__ */ jsx("p", { className: "ddga-notification__message", "data-slot": "notification-message", children }) : null,
+            actions ? /* @__PURE__ */ jsx("div", { className: "ddga-notification__actions", "data-slot": "notification-actions", children: actions }) : null
+          ] }),
+          onClose ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "ddga-notification__close",
+              "aria-label": closeLabel,
+              onClick: handleClose,
+              children: /* @__PURE__ */ jsx(CloseSolid, { "aria-hidden": "true" })
+            }
+          ) : null
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "ddga-notification__line", "aria-hidden": "true" })
+      ]
+    }
+  );
+}
+
+export {
+  notificationVariants,
+  Notification
+};
+//# sourceMappingURL=chunk-6HRQMDI3.js.map

package/dist/chunk-6HRQMDI3.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Notification/Notification.tsx"],"sourcesContent":["'use client';\n\nimport { useState, type ReactNode } from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\nimport {\n  AlertCircleFeatured,\n  AlertTriangleFeatured,\n  CheckCircleFeatured,\n  InfoCircleFeatured,\n  CloseSolid,\n} from '../../internal/icons';\n\nconst notificationVariants = cva('ddga-notification', {\n  variants: {\n    type: {\n      neutral: 'ddga-notification--neutral',\n      info: 'ddga-notification--info',\n      success: 'ddga-notification--success',\n      warning: 'ddga-notification--warning',\n      critical: 'ddga-notification--critical',\n    },\n  },\n  defaultVariants: { type: 'neutral' },\n});\n\ntype NotificationType = NonNullable<VariantProps<typeof notificationVariants>['type']>;\n\nconst DEFAULT_ICONS: Record<NotificationType, ReactNode> = {\n  neutral: <InfoCircleFeatured aria-hidden=\"true\" />,\n  info: <InfoCircleFeatured aria-hidden=\"true\" />,\n  success: <CheckCircleFeatured aria-hidden=\"true\" />,\n  warning: <AlertTriangleFeatured aria-hidden=\"true\" />,\n  critical: <AlertCircleFeatured aria-hidden=\"true\" />,\n};\n\ninterface NotificationProps\n  extends React.ComponentProps<'div'>, VariantProps<typeof notificationVariants> {\n  /** The message body — always present per SDGA (the one required content). */\n  children: ReactNode;\n  /** Bold lead-in shown before the message, e.g. `\"Important:\"`. */\n  lead?: ReactNode;\n  /** Featured leading icon. Pass `false` to hide it; defaults to the type's glyph. */\n  icon?: ReactNode | false;\n  /**\n   * Trailing action row — compose `<Link tone=\"neutral\">` and/or\n   * `<Button variant=\"black\" size=\"md\">` (the exact SDGA action variants).\n   */\n  actions?: ReactNode;\n  /** Provide to render the trailing ✕ and make the banner dismissible. */\n  onClose?: () => void;\n  /** Controlled visibility. Pair with `onClose` to own the state yourself. */\n  open?: boolean;\n  /** Localized close-button label. Defaults to `\"Dismiss\"`. */\n  closeLabel?: string;\n  /**\n   * Wire the banner into the a11y tree as a live region. `polite` (role=status)\n   * announces gracefully; `assertive` (role=alert) interrupts. Omit for static banners.\n   */\n  live?: 'polite' | 'assertive';\n}\n\nfunction Notification({\n  type,\n  lead,\n  icon,\n  actions,\n  onClose,\n  open: controlledOpen,\n  closeLabel = 'Dismiss',\n  live,\n  className,\n  children,\n  ...props\n}: NotificationProps) {\n  const [internalOpen, setInternalOpen] = useState(true);\n  const isControlled = controlledOpen !== undefined;\n  const open = isControlled ? controlledOpen : internalOpen;\n\n  if (!open) return null;\n\n  const resolvedIcon = icon === false ? null : (icon ?? DEFAULT_ICONS[type ?? 'neutral']);\n\n  const liveProps =\n    live === 'assertive'\n      ? { role: 'alert' as const, 'aria-live': 'assertive' as const }\n      : live === 'polite'\n        ? { role: 'status' as const, 'aria-live': 'polite' as const }\n        : {};\n\n  function handleClose() {\n    if (!isControlled) setInternalOpen(false);\n    onClose?.();\n  }\n\n  return (\n    <div\n      data-slot=\"notification\"\n      data-type={type ?? 'neutral'}\n      className={cn(notificationVariants({ type }), className)}\n      {...liveProps}\n      {...props}\n    >\n      <div className=\"ddga-notification__title\">\n        <div className=\"ddga-notification__content\">\n          {resolvedIcon ? (\n            <span className=\"ddga-notification__icon\" aria-hidden=\"true\">\n              {resolvedIcon}\n            </span>\n          ) : null}\n          {lead ? (\n            <span className=\"ddga-notification__lead\" data-slot=\"notification-lead\">\n              {lead}\n            </span>\n          ) : null}\n          {children ? (\n            <p className=\"ddga-notification__message\" data-slot=\"notification-message\">\n              {children}\n            </p>\n          ) : null}\n          {actions ? (\n            <div className=\"ddga-notification__actions\" data-slot=\"notification-actions\">\n              {actions}\n            </div>\n          ) : null}\n        </div>\n        {onClose ? (\n          <button\n            type=\"button\"\n            className=\"ddga-notification__close\"\n            aria-label={closeLabel}\n            onClick={handleClose}\n          >\n            <CloseSolid aria-hidden=\"true\" />\n          </button>\n        ) : null}\n      </div>\n      <span className=\"ddga-notification__line\" aria-hidden=\"true\" />\n    </div>\n  );\n}\n\nexport { Notification, notificationVariants };\nexport type { NotificationProps };\n"],"mappings":";;;;;;;;;;;;AAEA,SAAS,gBAAgC;AACzC,SAAS,WAA8B;AA0B5B,cA2EH,YA3EG;AAhBX,IAAM,uBAAuB,IAAI,qBAAqB;AAAA,EACpD,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,MACT,SAAS;AAAA,MACT,UAAU;AAAA,IACZ;AAAA,EACF;AAAA,EACA,iBAAiB,EAAE,MAAM,UAAU;AACrC,CAAC;AAID,IAAM,gBAAqD;AAAA,EACzD,SAAS,oBAAC,sBAAmB,eAAY,QAAO;AAAA,EAChD,MAAM,oBAAC,sBAAmB,eAAY,QAAO;AAAA,EAC7C,SAAS,oBAAC,uBAAoB,eAAY,QAAO;AAAA,EACjD,SAAS,oBAAC,yBAAsB,eAAY,QAAO;AAAA,EACnD,UAAU,oBAAC,uBAAoB,eAAY,QAAO;AACpD;AA4BA,SAAS,aAAa;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAsB;AACpB,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,IAAI;AACrD,QAAM,eAAe,mBAAmB;AACxC,QAAM,OAAO,eAAe,iBAAiB;AAE7C,MAAI,CAAC,KAAM,QAAO;AAElB,QAAM,eAAe,SAAS,QAAQ,OAAQ,QAAQ,cAAc,QAAQ,SAAS;AAErF,QAAM,YACJ,SAAS,cACL,EAAE,MAAM,SAAkB,aAAa,YAAqB,IAC5D,SAAS,WACP,EAAE,MAAM,UAAmB,aAAa,SAAkB,IAC1D,CAAC;AAET,WAAS,cAAc;AACrB,QAAI,CAAC,aAAc,iBAAgB,KAAK;AACxC,cAAU;AAAA,EACZ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,aAAW,QAAQ;AAAA,MACnB,WAAW,GAAG,qBAAqB,EAAE,KAAK,CAAC,GAAG,SAAS;AAAA,MACtD,GAAG;AAAA,MACH,GAAG;AAAA,MAEJ;AAAA,6BAAC,SAAI,WAAU,4BACb;AAAA,+BAAC,SAAI,WAAU,8BACZ;AAAA,2BACC,oBAAC,UAAK,WAAU,2BAA0B,eAAY,QACnD,wBACH,IACE;AAAA,YACH,OACC,oBAAC,UAAK,WAAU,2BAA0B,aAAU,qBACjD,gBACH,IACE;AAAA,YACH,WACC,oBAAC,OAAE,WAAU,8BAA6B,aAAU,wBACjD,UACH,IACE;AAAA,YACH,UACC,oBAAC,SAAI,WAAU,8BAA6B,aAAU,wBACnD,mBACH,IACE;AAAA,aACN;AAAA,UACC,UACC;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,WAAU;AAAA,cACV,cAAY;AAAA,cACZ,SAAS;AAAA,cAET,8BAAC,cAAW,eAAY,QAAO;AAAA;AAAA,UACjC,IACE;AAAA,WACN;AAAA,QACA,oBAAC,UAAK,WAAU,2BAA0B,eAAY,QAAO;AAAA;AAAA;AAAA,EAC/D;AAEJ;","names":[]}

package/dist/{chunk-RZEJPDIW.js → chunk-6LV62GNU.js}

@@ -10,17 +10,17 @@ var skeletonVariants = cva("ddga-skeleton", {
     shape: {
       text: "ddga-skeleton--text",
       circle: "ddga-skeleton--circle",
-      rectangle: "ddga-skeleton--rectangle"
+      rectangle: "ddga-skeleton--rectangle",
+      square: "ddga-skeleton--square"
     },
     animation: {
-      pulse: "ddga-skeleton--pulse",
-      wave: "ddga-skeleton--wave",
+      shimmer: "ddga-skeleton--shimmer",
       none: "ddga-skeleton--none"
     }
   },
   defaultVariants: {
     shape: "text",
-    animation: "pulse"
+    animation: "shimmer"
   }
 });
 function Skeleton({ shape, animation, width, height, className, style, ...props }) {
@@ -45,4 +45,4 @@ export {
   skeletonVariants,
   Skeleton
 };
-//# sourceMappingURL=chunk-RZEJPDIW.js.map
+//# sourceMappingURL=chunk-6LV62GNU.js.map

package/dist/chunk-6LV62GNU.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\n\nconst skeletonVariants = cva('ddga-skeleton', {\n  variants: {\n    shape: {\n      text: 'ddga-skeleton--text',\n      circle: 'ddga-skeleton--circle',\n      rectangle: 'ddga-skeleton--rectangle',\n      square: 'ddga-skeleton--square',\n    },\n    animation: {\n      shimmer: 'ddga-skeleton--shimmer',\n      none: 'ddga-skeleton--none',\n    },\n  },\n  defaultVariants: {\n    shape: 'text',\n    animation: 'shimmer',\n  },\n});\n\ninterface SkeletonProps extends React.ComponentProps<'div'>, VariantProps<typeof skeletonVariants> {\n  /**\n   * Inline width override (any valid CSS length, e.g. `\"60%\"`, `200`, `\"4rem\"`).\n   * Defaults: `text` → `100%`; `rectangle` → `100%`; `circle`/`square` → `40px`.\n   */\n  width?: number | string;\n  /**\n   * Inline height override. Defaults: `text` → `1em` (tracks line-height, ≈ SDGA Line 22/14);\n   * `rectangle` → `40px` (= SDGA Large); `circle`/`square` → matches `width` (aspect-ratio 1).\n   */\n  height?: number | string;\n}\n\nfunction Skeleton({ shape, animation, width, height, className, style, ...props }: SkeletonProps) {\n  const sizeStyle: React.CSSProperties = {\n    ...(width !== undefined ? { width: typeof width === 'number' ? `${width}px` : width } : null),\n    ...(height !== undefined\n      ? { height: typeof height === 'number' ? `${height}px` : height }\n      : null),\n    ...style,\n  };\n\n  return (\n    <div\n      data-slot=\"skeleton\"\n      aria-hidden=\"true\"\n      className={cn(skeletonVariants({ shape, animation }), className)}\n      style={sizeStyle}\n      {...props}\n    />\n  );\n}\n\nexport { Skeleton, skeletonVariants };\nexport type { SkeletonProps };\n"],"mappings":";;;;;AAEA,SAAS,WAA8B;AA6CnC;AA1CJ,IAAM,mBAAmB,IAAI,iBAAiB;AAAA,EAC5C,UAAU;AAAA,IACR,OAAO;AAAA,MACL,MAAM;AAAA,MACN,QAAQ;AAAA,MACR,WAAW;AAAA,MACX,QAAQ;AAAA,IACV;AAAA,IACA,WAAW;AAAA,MACT,SAAS;AAAA,MACT,MAAM;AAAA,IACR;AAAA,EACF;AAAA,EACA,iBAAiB;AAAA,IACf,OAAO;AAAA,IACP,WAAW;AAAA,EACb;AACF,CAAC;AAeD,SAAS,SAAS,EAAE,OAAO,WAAW,OAAO,QAAQ,WAAW,OAAO,GAAG,MAAM,GAAkB;AAChG,QAAM,YAAiC;AAAA,IACrC,GAAI,UAAU,SAAY,EAAE,OAAO,OAAO,UAAU,WAAW,GAAG,KAAK,OAAO,MAAM,IAAI;AAAA,IACxF,GAAI,WAAW,SACX,EAAE,QAAQ,OAAO,WAAW,WAAW,GAAG,MAAM,OAAO,OAAO,IAC9D;AAAA,IACJ,GAAG;AAAA,EACL;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,eAAY;AAAA,MACZ,WAAW,GAAG,iBAAiB,EAAE,OAAO,UAAU,CAAC,GAAG,SAAS;AAAA,MAC/D,OAAO;AAAA,MACN,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}

package/dist/chunk-6POW3HXX.js

@@ -0,0 +1,73 @@
+import {
+  cn
+} from "./chunk-7NTT2UXP.js";
+
+// src/components/List/List.tsx
+import { createContext, useContext } from "react";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+var listVariants = cva("ddga-list", {
+  variants: {
+    variant: {
+      unordered: "ddga-list--unordered",
+      ordered: "ddga-list--ordered",
+      "with-icon": "ddga-list--with-icon"
+    },
+    tone: {
+      primary: "ddga-list--primary",
+      neutral: "ddga-list--neutral",
+      "on-color": "ddga-list--on-color"
+    }
+  },
+  defaultVariants: { variant: "unordered", tone: "neutral" }
+});
+var ListContext = createContext(null);
+var CheckCircle = () => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "9.25" }),
+      /* @__PURE__ */ jsx("path", { d: "m8.25 12 2.5 2.5 5-5.5" })
+    ]
+  }
+);
+function List({ variant, tone, className, ...props }) {
+  const resolved = variant ?? "unordered";
+  const classes = cn(listVariants({ variant, tone }), className);
+  const shared = { "data-slot": "list", "data-variant": resolved, className: classes };
+  const tree = resolved === "ordered" ? /* @__PURE__ */ jsx("ol", { ...shared, ...props }) : /* @__PURE__ */ jsx("ul", { ...shared, ...props });
+  return /* @__PURE__ */ jsx(ListContext.Provider, { value: { variant: resolved }, children: tree });
+}
+function ListItem({ level = 1, icon, className, children, ...props }) {
+  const ctx = useContext(ListContext);
+  const withIcon = ctx?.variant === "with-icon";
+  return /* @__PURE__ */ jsxs(
+    "li",
+    {
+      "data-slot": "list-item",
+      "data-level": level,
+      className: cn("ddga-list__item", className),
+      ...props,
+      children: [
+        withIcon && /* @__PURE__ */ jsx("span", { "data-slot": "list-item-icon", className: "ddga-list__icon", "aria-hidden": "true", children: icon ?? /* @__PURE__ */ jsx(CheckCircle, {}) }),
+        children
+      ]
+    }
+  );
+}
+
+export {
+  listVariants,
+  List,
+  ListItem
+};
+//# sourceMappingURL=chunk-6POW3HXX.js.map

package/dist/chunk-6POW3HXX.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/List/List.tsx"],"sourcesContent":["'use client';\n\nimport { createContext, useContext, type ReactNode } from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\n\nconst listVariants = cva('ddga-list', {\n  variants: {\n    variant: {\n      unordered: 'ddga-list--unordered',\n      ordered: 'ddga-list--ordered',\n      'with-icon': 'ddga-list--with-icon',\n    },\n    tone: {\n      primary: 'ddga-list--primary',\n      neutral: 'ddga-list--neutral',\n      'on-color': 'ddga-list--on-color',\n    },\n  },\n  defaultVariants: { variant: 'unordered', tone: 'neutral' },\n});\n\ntype ListVariant = NonNullable<VariantProps<typeof listVariants>['variant']>;\n\nconst ListContext = createContext<{ variant: ListVariant } | null>(null);\n\nconst CheckCircle = () => (\n  <svg\n    width=\"16\"\n    height=\"16\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    aria-hidden=\"true\"\n  >\n    <circle cx=\"12\" cy=\"12\" r=\"9.25\" />\n    <path d=\"m8.25 12 2.5 2.5 5-5.5\" />\n  </svg>\n);\n\ninterface ListProps\n  extends Omit<React.ComponentProps<'ul'>, 'type'>, VariantProps<typeof listVariants> {}\n\ninterface ListItemProps extends React.ComponentProps<'li'> {\n  /** Nesting depth: `2` indents 24px and shifts the marker (ordered → letters, unordered → bullet). */\n  level?: 1 | 2;\n  /** `with-icon` lists only — overrides the default check-circle for this item. */\n  icon?: ReactNode;\n}\n\nfunction List({ variant, tone, className, ...props }: ListProps) {\n  const resolved: ListVariant = variant ?? 'unordered';\n  const classes = cn(listVariants({ variant, tone }), className);\n  const shared = { 'data-slot': 'list', 'data-variant': resolved, className: classes };\n  const tree =\n    resolved === 'ordered' ? (\n      <ol {...shared} {...(props as React.ComponentProps<'ol'>)} />\n    ) : (\n      <ul {...shared} {...props} />\n    );\n  return <ListContext.Provider value={{ variant: resolved }}>{tree}</ListContext.Provider>;\n}\n\nfunction ListItem({ level = 1, icon, className, children, ...props }: ListItemProps) {\n  const ctx = useContext(ListContext);\n  const withIcon = ctx?.variant === 'with-icon';\n  return (\n    <li\n      data-slot=\"list-item\"\n      data-level={level}\n      className={cn('ddga-list__item', className)}\n      {...props}\n    >\n      {withIcon && (\n        <span data-slot=\"list-item-icon\" className=\"ddga-list__icon\" aria-hidden=\"true\">\n          {icon ?? <CheckCircle />}\n        </span>\n      )}\n      {children}\n    </li>\n  );\n}\n\nexport { List, ListItem, listVariants };\nexport type { ListProps, ListItemProps };\n"],"mappings":";;;;;AAEA,SAAS,eAAe,kBAAkC;AAC1D,SAAS,WAA8B;AAwBrC,SAWE,KAXF;AArBF,IAAM,eAAe,IAAI,aAAa;AAAA,EACpC,UAAU;AAAA,IACR,SAAS;AAAA,MACP,WAAW;AAAA,MACX,SAAS;AAAA,MACT,aAAa;AAAA,IACf;AAAA,IACA,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,SAAS;AAAA,MACT,YAAY;AAAA,IACd;AAAA,EACF;AAAA,EACA,iBAAiB,EAAE,SAAS,aAAa,MAAM,UAAU;AAC3D,CAAC;AAID,IAAM,cAAc,cAA+C,IAAI;AAEvE,IAAM,cAAc,MAClB;AAAA,EAAC;AAAA;AAAA,IACC,OAAM;AAAA,IACN,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,MAAK;AAAA,IACL,QAAO;AAAA,IACP,aAAY;AAAA,IACZ,eAAc;AAAA,IACd,gBAAe;AAAA,IACf,eAAY;AAAA,IAEZ;AAAA,0BAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,QAAO;AAAA,MACjC,oBAAC,UAAK,GAAE,0BAAyB;AAAA;AAAA;AACnC;AAaF,SAAS,KAAK,EAAE,SAAS,MAAM,WAAW,GAAG,MAAM,GAAc;AAC/D,QAAM,WAAwB,WAAW;AACzC,QAAM,UAAU,GAAG,aAAa,EAAE,SAAS,KAAK,CAAC,GAAG,SAAS;AAC7D,QAAM,SAAS,EAAE,aAAa,QAAQ,gBAAgB,UAAU,WAAW,QAAQ;AACnF,QAAM,OACJ,aAAa,YACX,oBAAC,QAAI,GAAG,QAAS,GAAI,OAAsC,IAE3D,oBAAC,QAAI,GAAG,QAAS,GAAG,OAAO;AAE/B,SAAO,oBAAC,YAAY,UAAZ,EAAqB,OAAO,EAAE,SAAS,SAAS,GAAI,gBAAK;AACnE;AAEA,SAAS,SAAS,EAAE,QAAQ,GAAG,MAAM,WAAW,UAAU,GAAG,MAAM,GAAkB;AACnF,QAAM,MAAM,WAAW,WAAW;AAClC,QAAM,WAAW,KAAK,YAAY;AAClC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,cAAY;AAAA,MACZ,WAAW,GAAG,mBAAmB,SAAS;AAAA,MACzC,GAAG;AAAA,MAEH;AAAA,oBACC,oBAAC,UAAK,aAAU,kBAAiB,WAAU,mBAAkB,eAAY,QACtE,kBAAQ,oBAAC,eAAY,GACxB;AAAA,QAED;AAAA;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/chunk-6UFDUJZI.cjs

@@ -0,0 +1,124 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } }
+
+var _chunkYS2JJ73Mcjs = require('./chunk-YS2JJ73M.cjs');
+
+
+var _chunkV6MXOJQ4cjs = require('./chunk-V6MXOJQ4.cjs');
+
+// src/components/ProgressIndicator/ProgressIndicator.tsx
+var _classvarianceauthority = require('class-variance-authority');
+var _jsxruntime = require('react/jsx-runtime');
+var progressIndicatorVariants = _classvarianceauthority.cva.call(void 0, "ddga-progress-indicator", {
+  variants: {
+    orientation: {
+      horizontal: "ddga-progress-indicator--horizontal",
+      vertical: "ddga-progress-indicator--vertical"
+    },
+    appearance: {
+      circles: "ddga-progress-indicator--circles",
+      dot: "ddga-progress-indicator--dot"
+    }
+  },
+  defaultVariants: {
+    orientation: "horizontal",
+    appearance: "circles"
+  }
+});
+var stepVariants = _classvarianceauthority.cva.call(void 0, "ddga-progress-indicator__step", {
+  variants: {
+    state: {
+      completed: "ddga-progress-indicator__step--completed",
+      current: "ddga-progress-indicator__step--current",
+      upcoming: "ddga-progress-indicator__step--upcoming"
+    }
+  },
+  defaultVariants: {
+    state: "upcoming"
+  }
+});
+function ProgressIndicator({
+  orientation,
+  appearance,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "ol",
+    {
+      "data-slot": "progress-indicator",
+      "data-orientation": _nullishCoalesce(orientation, () => ( "horizontal")),
+      "data-appearance": _nullishCoalesce(appearance, () => ( "circles")),
+      className: _chunkV6MXOJQ4cjs.cn.call(void 0, progressIndicatorVariants({ orientation, appearance }), className),
+      ...props
+    }
+  );
+}
+function Step({ state, className, ...props }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "li",
+    {
+      "aria-current": state === "current" ? "step" : void 0,
+      "data-slot": "step",
+      "data-state": _nullishCoalesce(state, () => ( "upcoming")),
+      className: _chunkV6MXOJQ4cjs.cn.call(void 0, stepVariants({ state }), className),
+      ...props
+    }
+  );
+}
+function StepIndicator({ step, className, ...props }) {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "span",
+    {
+      "aria-hidden": "true",
+      "data-slot": "step-indicator",
+      className: _chunkV6MXOJQ4cjs.cn.call(void 0, "ddga-progress-indicator__indicator", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkYS2JJ73Mcjs.Check, { className: "ddga-progress-indicator__indicator-check" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "ddga-progress-indicator__indicator-number", children: step })
+      ]
+    }
+  );
+}
+function StepContent({ className, ...props }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      "data-slot": "step-content",
+      className: _chunkV6MXOJQ4cjs.cn.call(void 0, "ddga-progress-indicator__content", className),
+      ...props
+    }
+  );
+}
+function StepTitle({ className, ...props }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "span",
+    {
+      "data-slot": "step-title",
+      className: _chunkV6MXOJQ4cjs.cn.call(void 0, "ddga-progress-indicator__title", className),
+      ...props
+    }
+  );
+}
+function StepDescription({ className, ...props }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "span",
+    {
+      "data-slot": "step-description",
+      className: _chunkV6MXOJQ4cjs.cn.call(void 0, "ddga-progress-indicator__description", className),
+      ...props
+    }
+  );
+}
+
+
+
+
+
+
+
+
+
+
+exports.progressIndicatorVariants = progressIndicatorVariants; exports.stepVariants = stepVariants; exports.ProgressIndicator = ProgressIndicator; exports.Step = Step; exports.StepIndicator = StepIndicator; exports.StepContent = StepContent; exports.StepTitle = StepTitle; exports.StepDescription = StepDescription;
+//# sourceMappingURL=chunk-6UFDUJZI.cjs.map

package/dist/chunk-6UFDUJZI.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/devdhaif/work/react/dga-dev/packages/react/dist/chunk-6UFDUJZI.cjs","../src/components/ProgressIndicator/ProgressIndicator.tsx"],"names":[],"mappings":"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","file":"/home/devdhaif/work/react/dga-dev/packages/react/dist/chunk-6UFDUJZI.cjs","sourcesContent":[null,"'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\nimport { Check } from '../../internal/icons';\n\nconst progressIndicatorVariants = cva('ddga-progress-indicator', {\n  variants: {\n    orientation: {\n      horizontal: 'ddga-progress-indicator--horizontal',\n      vertical: 'ddga-progress-indicator--vertical',\n    },\n    appearance: {\n      circles: 'ddga-progress-indicator--circles',\n      dot: 'ddga-progress-indicator--dot',\n    },\n  },\n  defaultVariants: {\n    orientation: 'horizontal',\n    appearance: 'circles',\n  },\n});\n\ntype StepState = 'completed' | 'current' | 'upcoming';\n\nconst stepVariants = cva('ddga-progress-indicator__step', {\n  variants: {\n    state: {\n      completed: 'ddga-progress-indicator__step--completed',\n      current: 'ddga-progress-indicator__step--current',\n      upcoming: 'ddga-progress-indicator__step--upcoming',\n    },\n  },\n  defaultVariants: {\n    state: 'upcoming',\n  },\n});\n\ninterface ProgressIndicatorProps\n  extends React.ComponentProps<'ol'>, VariantProps<typeof progressIndicatorVariants> {}\n\ninterface StepProps\n  extends Omit<React.ComponentProps<'li'>, 'aria-current'>, VariantProps<typeof stepVariants> {}\n\ninterface StepIndicatorProps extends React.ComponentProps<'span'> {\n  /**\n   * The 1-based step number to render. Shown for `current` and `upcoming`\n   * steps, and for `completed` steps in the `dot` appearance. Ignored for a\n   * `completed` step in the `circles` appearance — it shows a check instead.\n   */\n  step?: number | string;\n}\n\ntype StepContentProps = React.ComponentProps<'div'>;\ntype StepTitleProps = React.ComponentProps<'span'>;\ntype StepDescriptionProps = React.ComponentProps<'span'>;\n\nfunction ProgressIndicator({\n  orientation,\n  appearance,\n  className,\n  ...props\n}: ProgressIndicatorProps) {\n  return (\n    <ol\n      data-slot=\"progress-indicator\"\n      data-orientation={orientation ?? 'horizontal'}\n      data-appearance={appearance ?? 'circles'}\n      className={cn(progressIndicatorVariants({ orientation, appearance }), className)}\n      {...props}\n    />\n  );\n}\n\nfunction Step({ state, className, ...props }: StepProps) {\n  return (\n    <li\n      aria-current={state === 'current' ? 'step' : undefined}\n      data-slot=\"step\"\n      data-state={state ?? 'upcoming'}\n      className={cn(stepVariants({ state }), className)}\n      {...props}\n    />\n  );\n}\n\nfunction StepIndicator({ step, className, ...props }: StepIndicatorProps) {\n  // Decorative: AT reads the title/description, not the number-in-a-circle.\n  return (\n    <span\n      aria-hidden=\"true\"\n      data-slot=\"step-indicator\"\n      className={cn('ddga-progress-indicator__indicator', className)}\n      {...props}\n    >\n      <Check className=\"ddga-progress-indicator__indicator-check\" />\n      <span className=\"ddga-progress-indicator__indicator-number\">{step}</span>\n    </span>\n  );\n}\n\nfunction StepContent({ className, ...props }: StepContentProps) {\n  return (\n    <div\n      data-slot=\"step-content\"\n      className={cn('ddga-progress-indicator__content', className)}\n      {...props}\n    />\n  );\n}\n\nfunction StepTitle({ className, ...props }: StepTitleProps) {\n  return (\n    <span\n      data-slot=\"step-title\"\n      className={cn('ddga-progress-indicator__title', className)}\n      {...props}\n    />\n  );\n}\n\nfunction StepDescription({ className, ...props }: StepDescriptionProps) {\n  return (\n    <span\n      data-slot=\"step-description\"\n      className={cn('ddga-progress-indicator__description', className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  ProgressIndicator,\n  Step,\n  StepIndicator,\n  StepContent,\n  StepTitle,\n  StepDescription,\n  progressIndicatorVariants,\n  stepVariants,\n};\nexport type {\n  ProgressIndicatorProps,\n  StepProps,\n  StepIndicatorProps,\n  StepContentProps,\n  StepTitleProps,\n  StepDescriptionProps,\n  StepState,\n};\n"]}