@abumble/design-system 0.0.30 → 0.0.32

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/shared/Dialog.js +5 -5
  2. package/dist/shared/Dialog.js.map +1 -1
  3. package/package.json +1 -1
  4. package/src/styles.css +77 -67
package/dist/shared/Dialog.js CHANGED
@@ -1,6 +1,6 @@
1
- import { jsx as a, jsxs as o, Fragment as m } from "react/jsx-runtime";
1
+ import { jsx as a, jsxs as o, Fragment as u } from "react/jsx-runtime";
2
2
  import "react";
3
- import { XIcon as u } from "lucide-react";
3
+ import { XIcon as m } from "lucide-react";
4
4
  import * as n from "@radix-ui/react-dialog";
5
5
  import { c as i } from "./utils.js";
6
6
  import { B as f } from "./Button.js";
@@ -54,7 +54,7 @@ function v({
54
54
  {
55
55
  "data-slot": "dialog-content",
56
56
  className: i(
57
- "bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded border p-6 shadow-lg duration-200 outline-none sm:max-w-lg",
57
+ "bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded border p-6 shadow-lg duration-200 outline-none",
58
58
  e
59
59
  ),
60
60
  ...l,
@@ -66,7 +66,7 @@ function v({
66
66
  "data-slot": "dialog-close",
67
67
  className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
68
68
  children: [
69
- /* @__PURE__ */ a(u, {}),
69
+ /* @__PURE__ */ a(m, {}),
70
70
  /* @__PURE__ */ a("span", { className: "sr-only", children: "Close" })
71
71
  ]
72
72
  }
@@ -169,7 +169,7 @@ function y({
169
169
  /* @__PURE__ */ a("span", { className: "text-foreground", children: e }),
170
170
  /* @__PURE__ */ a("span", { children: "/" }),
171
171
  /* @__PURE__ */ a("span", { children: t }),
172
- g && /* @__PURE__ */ o(m, { children: [
172
+ g && /* @__PURE__ */ o(u, { children: [
173
173
  /* @__PURE__ */ a("span", { className: "text-border", children: "·" }),
174
174
  /* @__PURE__ */ a("span", { className: "hidden sm:inline", children: g })
175
175
  ] })
package/dist/shared/Dialog.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Dialog.js","sources":["../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { XIcon } from 'lucide-react'\nimport * as DialogPrimitive from '@radix-ui/react-dialog'\n\nimport { cn } from '@/utils'\nimport { Button } from '@/components/Button/Button'\n\n/** Class for create/edit form dialogs: consistent width and scroll. Use via FormDialog or apply to DialogContent. */\nexport const FORM_DIALOG_CONTENT_CLASS =\n\t'max-w-[calc(100vw-2rem)] sm:max-w-2xl max-h-[90vh] overflow-y-auto'\n\nexport function Dialog({\n\t...props\n}: React.ComponentProps<typeof DialogPrimitive.Root>) {\n\treturn <DialogPrimitive.Root data-slot=\"dialog\" {...props} />\n}\n\nexport function DialogTrigger({\n\t...props\n}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {\n\treturn <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />\n}\n\nexport function DialogPortal({\n\t...props\n}: React.ComponentProps<typeof DialogPrimitive.Portal>) {\n\treturn <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />\n}\n\nexport function DialogClose({\n\t...props\n}: React.ComponentProps<typeof DialogPrimitive.Close>) {\n\treturn <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />\n}\n\nexport function DialogOverlay({\n\tclassName,\n\t...props\n}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {\n\treturn (\n\t\t<DialogPrimitive.Overlay\n\t\t\tdata-slot=\"dialog-overlay\"\n\t\t\tclassName={cn(\n\t\t\t\t'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nexport function DialogContent({\n\tclassName,\n\tchildren,\n\tshowCloseIcon = true,\n\t...props\n}: React.ComponentProps<typeof DialogPrimitive.Content> & {\n\tshowCloseIcon?: boolean\n}) {\n\treturn (\n\t\t<DialogPortal data-slot=\"dialog-portal\">\n\t\t\t<DialogOverlay />\n\t\t\t<DialogPrimitive.Content\n\t\t\t\tdata-slot=\"dialog-content\"\n\t\t\t\tclassName={cn(\n\t\t\t\t\t'bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded border p-6 shadow-lg duration-200 outline-none sm:max-w-lg',\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t\t{showCloseIcon && (\n\t\t\t\t\t<DialogPrimitive.Close\n\t\t\t\t\t\tdata-slot=\"dialog-close\"\n\t\t\t\t\t\tclassName=\"ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<XIcon />\n\t\t\t\t\t\t<span className=\"sr-only\">Close</span>\n\t\t\t\t\t</DialogPrimitive.Close>\n\t\t\t\t)}\n\t\t\t</DialogPrimitive.Content>\n\t\t</DialogPortal>\n\t)\n}\n\nexport function DialogHeader({\n\tclassName,\n\t...props\n}: React.ComponentProps<'div'>) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"dialog-header\"\n\t\t\tclassName={cn('flex flex-col gap-2 text-center sm:text-left', className)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nexport function DialogFooter({\n\tclassName,\n\tshowCloseAction = false,\n\tchildren,\n\t...props\n}: React.ComponentProps<'div'> & {\n\tshowCloseAction?: boolean\n}) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"dialog-footer\"\n\t\t\tclassName={cn(\n\t\t\t\t'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t\t{showCloseAction && (\n\t\t\t\t<DialogPrimitive.Close asChild>\n\t\t\t\t\t<Button variant=\"outline\">Close</Button>\n\t\t\t\t</DialogPrimitive.Close>\n\t\t\t)}\n\t\t</div>\n\t)\n}\n\nexport function DialogTitle({\n\tclassName,\n\t...props\n}: React.ComponentProps<typeof DialogPrimitive.Title>) {\n\treturn (\n\t\t<DialogPrimitive.Title\n\t\t\tdata-slot=\"dialog-title\"\n\t\t\tclassName={cn('text-lg leading-none font-semibold', className)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nexport function DialogDescription({\n\tclassName,\n\t...props\n}: React.ComponentProps<typeof DialogPrimitive.Description>) {\n\treturn (\n\t\t<DialogPrimitive.Description\n\t\t\tdata-slot=\"dialog-description\"\n\t\t\tclassName={cn('text-muted-foreground text-sm', className)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nexport interface FormDialogProps {\n\topen: boolean\n\tonOpenChange: (open: boolean) => void\n\ttitle: string\n\tdescription: React.ReactNode\n\t/** Optional trigger (e.g. \"Add\" button); when provided, render as first child of Dialog. */\n\ttrigger?: React.ReactNode\n\tchildren: React.ReactNode\n\t/** Optional custom className for DialogContent (overrides FORM_DIALOG_CONTENT_CLASS). Use for wider dialogs (e.g., sm:max-w-5xl for wizards). */\n\tclassName?: string\n\t/** Optional wizard configuration for multi-step forms. Renders a stepper bar at the top of the header. */\n\twizard?: {\n\t\tcurrentStep: number\n\t\ttotalSteps: number\n\t\tstepTitle: string\n\t\tstepLabels?: Array<string>\n\t}\n}\n\n/** Compact glass-styled stepper for top-right corner of wizard dialogs. */\nexport function WizardStepper({\n\tcurrentStep,\n\ttotalSteps,\n\tstepLabels,\n}: {\n\tcurrentStep: number\n\ttotalSteps: number\n\tstepLabels?: Array<string>\n}) {\n\tconst steps = Array.from({ length: totalSteps }, (_, i) => i + 1)\n\tconst currentLabel = stepLabels?.[currentStep - 1]\n\n\treturn (\n\t\t<div\n\t\t\tclassName=\"absolute top-4 right-12 z-20 flex items-center gap-2 rounded-full border border-border/50 bg-background/80 px-3 py-1.5 backdrop-blur-sm\"\n\t\t\taria-label=\"Progress\"\n\t\t>\n\t\t\t{/* Step dots */}\n\t\t\t<div className=\"flex items-center gap-1.5\">\n\t\t\t\t{steps.map((step) => {\n\t\t\t\t\tconst isCompleted = step < currentStep\n\t\t\t\t\tconst isCurrent = step === currentStep\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tkey={step}\n\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t'h-1.5 w-1.5 rounded-full transition-all duration-300',\n\t\t\t\t\t\t\t\tisCurrent && 'bg-primary w-6',\n\t\t\t\t\t\t\t\tisCompleted && 'bg-primary',\n\t\t\t\t\t\t\t\t!isCurrent && !isCompleted && 'bg-muted',\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\taria-current={isCurrent ? 'step' : undefined}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)\n\t\t\t\t})}\n\t\t\t</div>\n\n\t\t\t{/* Step label/counter */}\n\t\t\t<div className=\"text-muted-foreground flex items-center gap-1.5 text-xs font-medium\">\n\t\t\t\t<span className=\"text-foreground\">{currentStep}</span>\n\t\t\t\t<span>/</span>\n\t\t\t\t<span>{totalSteps}</span>\n\t\t\t\t{currentLabel && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<span className=\"text-border\">·</span>\n\t\t\t\t\t\t<span className=\"hidden sm:inline\">{currentLabel}</span>\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</div>\n\t)\n}\n\n/** Dialog shell for create/edit forms: standard width, header with title + description. */\nexport function FormDialog({\n\topen,\n\tonOpenChange,\n\ttitle,\n\tdescription,\n\ttrigger,\n\tchildren,\n\tclassName,\n\twizard,\n}: FormDialogProps) {\n\treturn (\n\t\t<Dialog open={open} onOpenChange={onOpenChange}>\n\t\t\t{trigger}\n\t\t\t<DialogContent className={className ?? FORM_DIALOG_CONTENT_CLASS}>\n\t\t\t\t{wizard && (\n\t\t\t\t\t<WizardStepper\n\t\t\t\t\t\tcurrentStep={wizard.currentStep}\n\t\t\t\t\t\ttotalSteps={wizard.totalSteps}\n\t\t\t\t\t\tstepLabels={wizard.stepLabels}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t\t<div className=\"bg-muted -m-6 p-6 -mb-4\">\n\t\t\t\t\t<DialogTitle>{title}</DialogTitle>\n\t\t\t\t\t<DialogDescription>{description}</DialogDescription>\n\t\t\t\t</div>\n\t\t\t\t{children}\n\t\t\t</DialogContent>\n\t\t</Dialog>\n\t)\n}\n"],"names":["FORM_DIALOG_CONTENT_CLASS","Dialog","props","DialogPrimitive","DialogTrigger","DialogPortal","DialogClose","DialogOverlay","className","jsx","cn","DialogContent","children","showCloseIcon","jsxs","XIcon","DialogHeader","DialogFooter","showCloseAction","Button","DialogTitle","DialogDescription","WizardStepper","currentStep","totalSteps","stepLabels","steps","_","i","currentLabel","step","isCompleted","isCurrent","Fragment","FormDialog","open","onOpenChange","title","description","trigger","wizard"],"mappings":";;;;;;AAUO,MAAMA,IACZ;AAEM,SAASC,EAAO;AAAA,EACtB,GAAGC;AACJ,GAAsD;AACrD,2BAAQC,EAAgB,MAAhB,EAAqB,aAAU,UAAU,GAAGD,GAAO;AAC5D;AAEO,SAASE,EAAc;AAAA,EAC7B,GAAGF;AACJ,GAAyD;AACxD,2BAAQC,EAAgB,SAAhB,EAAwB,aAAU,kBAAkB,GAAGD,GAAO;AACvE;AAEO,SAASG,EAAa;AAAA,EAC5B,GAAGH;AACJ,GAAwD;AACvD,2BAAQC,EAAgB,QAAhB,EAAuB,aAAU,iBAAiB,GAAGD,GAAO;AACrE;AAEO,SAASI,EAAY;AAAA,EAC3B,GAAGJ;AACJ,GAAuD;AACtD,2BAAQC,EAAgB,OAAhB,EAAsB,aAAU,gBAAgB,GAAGD,GAAO;AACnE;AAEO,SAASK,EAAc;AAAA,EAC7B,WAAAC;AAAA,EACA,GAAGN;AACJ,GAAyD;AACxD,SACC,gBAAAO;AAAA,IAACN,EAAgB;AAAA,IAAhB;AAAA,MACA,aAAU;AAAA,MACV,WAAWO;AAAA,QACV;AAAA,QACAF;AAAA,MAAA;AAAA,MAEA,GAAGN;AAAA,IAAA;AAAA,EAAA;AAGP;AAEO,SAASS,EAAc;AAAA,EAC7B,WAAAH;AAAA,EACA,UAAAI;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,GAAGX;AACJ,GAEG;AACF,SACC,gBAAAY,EAACT,GAAA,EAAa,aAAU,iBACvB,UAAA;AAAA,IAAA,gBAAAI,EAACF,GAAA,EAAc;AAAA,IACf,gBAAAO;AAAA,MAACX,EAAgB;AAAA,MAAhB;AAAA,QACA,aAAU;AAAA,QACV,WAAWO;AAAA,UACV;AAAA,UACAF;AAAA,QAAA;AAAA,QAEA,GAAGN;AAAA,QAEH,UAAA;AAAA,UAAAU;AAAA,UACAC,KACA,gBAAAC;AAAA,YAACX,EAAgB;AAAA,YAAhB;AAAA,cACA,aAAU;AAAA,cACV,WAAU;AAAA,cAEV,UAAA;AAAA,gBAAA,gBAAAM,EAACM,GAAA,EAAM;AAAA,gBACP,gBAAAN,EAAC,QAAA,EAAK,WAAU,WAAU,UAAA,QAAA,CAAK;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QAChC;AAAA,MAAA;AAAA,IAAA;AAAA,EAEF,GACD;AAEF;AAEO,SAASO,EAAa;AAAA,EAC5B,WAAAR;AAAA,EACA,GAAGN;AACJ,GAAgC;AAC/B,SACC,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,aAAU;AAAA,MACV,WAAWC,EAAG,gDAAgDF,CAAS;AAAA,MACtE,GAAGN;AAAA,IAAA;AAAA,EAAA;AAGP;AAEO,SAASe,EAAa;AAAA,EAC5B,WAAAT;AAAA,EACA,iBAAAU,IAAkB;AAAA,EAClB,UAAAN;AAAA,EACA,GAAGV;AACJ,GAEG;AACF,SACC,gBAAAY;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,aAAU;AAAA,MACV,WAAWJ;AAAA,QACV;AAAA,QACAF;AAAA,MAAA;AAAA,MAEA,GAAGN;AAAA,MAEH,UAAA;AAAA,QAAAU;AAAA,QACAM,KACA,gBAAAT,EAACN,EAAgB,OAAhB,EAAsB,SAAO,IAC7B,UAAA,gBAAAM,EAACU,GAAA,EAAO,SAAQ,WAAU,UAAA,QAAA,CAAK,EAAA,CAChC;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIJ;AAEO,SAASC,EAAY;AAAA,EAC3B,WAAAZ;AAAA,EACA,GAAGN;AACJ,GAAuD;AACtD,SACC,gBAAAO;AAAA,IAACN,EAAgB;AAAA,IAAhB;AAAA,MACA,aAAU;AAAA,MACV,WAAWO,EAAG,sCAAsCF,CAAS;AAAA,MAC5D,GAAGN;AAAA,IAAA;AAAA,EAAA;AAGP;AAEO,SAASmB,EAAkB;AAAA,EACjC,WAAAb;AAAA,EACA,GAAGN;AACJ,GAA6D;AAC5D,SACC,gBAAAO;AAAA,IAACN,EAAgB;AAAA,IAAhB;AAAA,MACA,aAAU;AAAA,MACV,WAAWO,EAAG,iCAAiCF,CAAS;AAAA,MACvD,GAAGN;AAAA,IAAA;AAAA,EAAA;AAGP;AAsBO,SAASoB,EAAc;AAAA,EAC7B,aAAAC;AAAA,EACA,YAAAC;AAAA,EACA,YAAAC;AACD,GAIG;AACF,QAAMC,IAAQ,MAAM,KAAK,EAAE,QAAQF,EAAA,GAAc,CAACG,GAAGC,MAAMA,IAAI,CAAC,GAC1DC,IAAeJ,IAAaF,IAAc,CAAC;AAEjD,SACC,gBAAAT;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,WAAU;AAAA,MACV,cAAW;AAAA,MAGX,UAAA;AAAA,QAAA,gBAAAL,EAAC,SAAI,WAAU,6BACb,UAAAiB,EAAM,IAAI,CAACI,MAAS;AACpB,gBAAMC,IAAcD,IAAOP,GACrBS,IAAYF,MAASP;AAE3B,iBACC,gBAAAd;AAAA,YAAC;AAAA,YAAA;AAAA,cAEA,WAAWC;AAAA,gBACV;AAAA,gBACAsB,KAAa;AAAA,gBACbD,KAAe;AAAA,gBACf,CAACC,KAAa,CAACD,KAAe;AAAA,cAAA;AAAA,cAE/B,gBAAcC,IAAY,SAAS;AAAA,YAAA;AAAA,YAP9BF;AAAA,UAAA;AAAA,QAUR,CAAC,EAAA,CACF;AAAA,QAGA,gBAAAhB,EAAC,OAAA,EAAI,WAAU,uEACd,UAAA;AAAA,UAAA,gBAAAL,EAAC,QAAA,EAAK,WAAU,mBAAmB,UAAAc,GAAY;AAAA,UAC/C,gBAAAd,EAAC,UAAK,UAAA,IAAA,CAAC;AAAA,UACP,gBAAAA,EAAC,UAAM,UAAAe,EAAA,CAAW;AAAA,UACjBK,KACA,gBAAAf,EAAAmB,GAAA,EACC,UAAA;AAAA,YAAA,gBAAAxB,EAAC,QAAA,EAAK,WAAU,eAAc,UAAA,KAAC;AAAA,YAC/B,gBAAAA,EAAC,QAAA,EAAK,WAAU,oBAAoB,UAAAoB,EAAA,CAAa;AAAA,UAAA,EAAA,CAClD;AAAA,QAAA,EAAA,CAEF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGH;AAGO,SAASK,EAAW;AAAA,EAC1B,MAAAC;AAAA,EACA,cAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAA3B;AAAA,EACA,WAAAJ;AAAA,EACA,QAAAgC;AACD,GAAoB;AACnB,SACC,gBAAA1B,EAACb,GAAA,EAAO,MAAAkC,GAAY,cAAAC,GAClB,UAAA;AAAA,IAAAG;AAAA,IACD,gBAAAzB,EAACH,GAAA,EAAc,WAAWH,KAAaR,GACrC,UAAA;AAAA,MAAAwC,KACA,gBAAA/B;AAAA,QAACa;AAAA,QAAA;AAAA,UACA,aAAakB,EAAO;AAAA,UACpB,YAAYA,EAAO;AAAA,UACnB,YAAYA,EAAO;AAAA,QAAA;AAAA,MAAA;AAAA,MAGrB,gBAAA1B,EAAC,OAAA,EAAI,WAAU,2BACd,UAAA;AAAA,QAAA,gBAAAL,EAACW,KAAa,UAAAiB,EAAA,CAAM;AAAA,QACpB,gBAAA5B,EAACY,KAAmB,UAAAiB,EAAA,CAAY;AAAA,MAAA,GACjC;AAAA,MACC1B;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,GACD;AAEF;"}
1
+ {"version":3,"file":"Dialog.js","sources":["../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { XIcon } from 'lucide-react'\nimport * as DialogPrimitive from '@radix-ui/react-dialog'\n\nimport { cn } from '@/utils'\nimport { Button } from '@/components/Button/Button'\n\n/** Class for create/edit form dialogs: consistent width and scroll. Use via FormDialog or apply to DialogContent. */\nexport const FORM_DIALOG_CONTENT_CLASS =\n\t'max-w-[calc(100vw-2rem)] sm:max-w-2xl max-h-[90vh] overflow-y-auto'\n\nexport function Dialog({\n\t...props\n}: React.ComponentProps<typeof DialogPrimitive.Root>) {\n\treturn <DialogPrimitive.Root data-slot=\"dialog\" {...props} />\n}\n\nexport function DialogTrigger({\n\t...props\n}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {\n\treturn <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />\n}\n\nexport function DialogPortal({\n\t...props\n}: React.ComponentProps<typeof DialogPrimitive.Portal>) {\n\treturn <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />\n}\n\nexport function DialogClose({\n\t...props\n}: React.ComponentProps<typeof DialogPrimitive.Close>) {\n\treturn <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />\n}\n\nexport function DialogOverlay({\n\tclassName,\n\t...props\n}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {\n\treturn (\n\t\t<DialogPrimitive.Overlay\n\t\t\tdata-slot=\"dialog-overlay\"\n\t\t\tclassName={cn(\n\t\t\t\t'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nexport function DialogContent({\n\tclassName,\n\tchildren,\n\tshowCloseIcon = true,\n\t...props\n}: React.ComponentProps<typeof DialogPrimitive.Content> & {\n\tshowCloseIcon?: boolean\n}) {\n\treturn (\n\t\t<DialogPortal data-slot=\"dialog-portal\">\n\t\t\t<DialogOverlay />\n\t\t\t<DialogPrimitive.Content\n\t\t\t\tdata-slot=\"dialog-content\"\n\t\t\t\tclassName={cn(\n\t\t\t\t\t'bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded border p-6 shadow-lg duration-200 outline-none',\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t\t{showCloseIcon && (\n\t\t\t\t\t<DialogPrimitive.Close\n\t\t\t\t\t\tdata-slot=\"dialog-close\"\n\t\t\t\t\t\tclassName=\"ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<XIcon />\n\t\t\t\t\t\t<span className=\"sr-only\">Close</span>\n\t\t\t\t\t</DialogPrimitive.Close>\n\t\t\t\t)}\n\t\t\t</DialogPrimitive.Content>\n\t\t</DialogPortal>\n\t)\n}\n\nexport function DialogHeader({\n\tclassName,\n\t...props\n}: React.ComponentProps<'div'>) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"dialog-header\"\n\t\t\tclassName={cn('flex flex-col gap-2 text-center sm:text-left', className)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nexport function DialogFooter({\n\tclassName,\n\tshowCloseAction = false,\n\tchildren,\n\t...props\n}: React.ComponentProps<'div'> & {\n\tshowCloseAction?: boolean\n}) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"dialog-footer\"\n\t\t\tclassName={cn(\n\t\t\t\t'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t\t{showCloseAction && (\n\t\t\t\t<DialogPrimitive.Close asChild>\n\t\t\t\t\t<Button variant=\"outline\">Close</Button>\n\t\t\t\t</DialogPrimitive.Close>\n\t\t\t)}\n\t\t</div>\n\t)\n}\n\nexport function DialogTitle({\n\tclassName,\n\t...props\n}: React.ComponentProps<typeof DialogPrimitive.Title>) {\n\treturn (\n\t\t<DialogPrimitive.Title\n\t\t\tdata-slot=\"dialog-title\"\n\t\t\tclassName={cn('text-lg leading-none font-semibold', className)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nexport function DialogDescription({\n\tclassName,\n\t...props\n}: React.ComponentProps<typeof DialogPrimitive.Description>) {\n\treturn (\n\t\t<DialogPrimitive.Description\n\t\t\tdata-slot=\"dialog-description\"\n\t\t\tclassName={cn('text-muted-foreground text-sm', className)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nexport interface FormDialogProps {\n\topen: boolean\n\tonOpenChange: (open: boolean) => void\n\ttitle: string\n\tdescription: React.ReactNode\n\t/** Optional trigger (e.g. \"Add\" button); when provided, render as first child of Dialog. */\n\ttrigger?: React.ReactNode\n\tchildren: React.ReactNode\n\t/** Optional custom className for DialogContent (overrides FORM_DIALOG_CONTENT_CLASS). Use for wider dialogs (e.g., sm:max-w-5xl for wizards). */\n\tclassName?: string\n\t/** Optional wizard configuration for multi-step forms. Renders a stepper bar at the top of the header. */\n\twizard?: {\n\t\tcurrentStep: number\n\t\ttotalSteps: number\n\t\tstepTitle: string\n\t\tstepLabels?: Array<string>\n\t}\n}\n\n/** Compact glass-styled stepper for top-right corner of wizard dialogs. */\nexport function WizardStepper({\n\tcurrentStep,\n\ttotalSteps,\n\tstepLabels,\n}: {\n\tcurrentStep: number\n\ttotalSteps: number\n\tstepLabels?: Array<string>\n}) {\n\tconst steps = Array.from({ length: totalSteps }, (_, i) => i + 1)\n\tconst currentLabel = stepLabels?.[currentStep - 1]\n\n\treturn (\n\t\t<div\n\t\t\tclassName=\"absolute top-4 right-12 z-20 flex items-center gap-2 rounded-full border border-border/50 bg-background/80 px-3 py-1.5 backdrop-blur-sm\"\n\t\t\taria-label=\"Progress\"\n\t\t>\n\t\t\t{/* Step dots */}\n\t\t\t<div className=\"flex items-center gap-1.5\">\n\t\t\t\t{steps.map((step) => {\n\t\t\t\t\tconst isCompleted = step < currentStep\n\t\t\t\t\tconst isCurrent = step === currentStep\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tkey={step}\n\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t'h-1.5 w-1.5 rounded-full transition-all duration-300',\n\t\t\t\t\t\t\t\tisCurrent && 'bg-primary w-6',\n\t\t\t\t\t\t\t\tisCompleted && 'bg-primary',\n\t\t\t\t\t\t\t\t!isCurrent && !isCompleted && 'bg-muted',\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\taria-current={isCurrent ? 'step' : undefined}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)\n\t\t\t\t})}\n\t\t\t</div>\n\n\t\t\t{/* Step label/counter */}\n\t\t\t<div className=\"text-muted-foreground flex items-center gap-1.5 text-xs font-medium\">\n\t\t\t\t<span className=\"text-foreground\">{currentStep}</span>\n\t\t\t\t<span>/</span>\n\t\t\t\t<span>{totalSteps}</span>\n\t\t\t\t{currentLabel && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<span className=\"text-border\">·</span>\n\t\t\t\t\t\t<span className=\"hidden sm:inline\">{currentLabel}</span>\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</div>\n\t)\n}\n\n/** Dialog shell for create/edit forms: standard width, header with title + description. */\nexport function FormDialog({\n\topen,\n\tonOpenChange,\n\ttitle,\n\tdescription,\n\ttrigger,\n\tchildren,\n\tclassName,\n\twizard,\n}: FormDialogProps) {\n\treturn (\n\t\t<Dialog open={open} onOpenChange={onOpenChange}>\n\t\t\t{trigger}\n\t\t\t<DialogContent className={className ?? FORM_DIALOG_CONTENT_CLASS}>\n\t\t\t\t{wizard && (\n\t\t\t\t\t<WizardStepper\n\t\t\t\t\t\tcurrentStep={wizard.currentStep}\n\t\t\t\t\t\ttotalSteps={wizard.totalSteps}\n\t\t\t\t\t\tstepLabels={wizard.stepLabels}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t\t<div className=\"bg-muted -m-6 p-6 -mb-4\">\n\t\t\t\t\t<DialogTitle>{title}</DialogTitle>\n\t\t\t\t\t<DialogDescription>{description}</DialogDescription>\n\t\t\t\t</div>\n\t\t\t\t{children}\n\t\t\t</DialogContent>\n\t\t</Dialog>\n\t)\n}\n"],"names":["FORM_DIALOG_CONTENT_CLASS","Dialog","props","DialogPrimitive","DialogTrigger","DialogPortal","DialogClose","DialogOverlay","className","jsx","cn","DialogContent","children","showCloseIcon","jsxs","XIcon","DialogHeader","DialogFooter","showCloseAction","Button","DialogTitle","DialogDescription","WizardStepper","currentStep","totalSteps","stepLabels","steps","_","i","currentLabel","step","isCompleted","isCurrent","Fragment","FormDialog","open","onOpenChange","title","description","trigger","wizard"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@abumble/design-system",
3
- "version": "0.0.30",
3
+ "version": "0.0.32",
4
4
  "files": [
5
5
  "dist",
6
6
  "src/styles.css"
package/src/styles.css CHANGED
@@ -99,7 +99,6 @@
99
99
 
100
100
  .image-background {
101
101
  @apply h-38 bg-cover bg-center bg-blend-overlay bg-stone-300/20 sm:-mb-16 -mb-10;
102
- background-image: url('/src//assets//background-image.svg');
103
102
  z-index: -1;
104
103
  }
105
104
 
@@ -160,40 +159,49 @@ code {
160
159
  }
161
160
 
162
161
  :root {
163
- --background: oklch(1 0.002 85);
162
+ /* --- Light Theme (Warm & Natural) --- */
163
+ --background: oklch(0.99 0.003 85);
164
164
  --foreground: oklch(0.141 0.005 285.823);
165
+
166
+ /* Card: Frosted warm white */
165
167
  --card: oklch(1 0 0 / 0.75);
166
168
  --card-foreground: oklch(0.141 0.005 285.823);
169
+
167
170
  --popover: oklch(1 0 0);
168
171
  --popover-foreground: oklch(0.141 0.005 285.823);
172
+
173
+ /* Primary: Solid Anchor (matches original deep tone) */
169
174
  --primary: oklch(0.21 0.006 285.885);
170
175
  --primary-foreground: oklch(0.985 0 0);
171
- --secondary: oklch(0.967 0.001 286.375);
176
+
177
+ --secondary: oklch(0.96 0.005 85);
172
178
  --secondary-foreground: oklch(0.21 0.006 285.885);
173
- --muted: oklch(0.967 0.001 286.375);
179
+
180
+ --muted: oklch(0.96 0.005 85);
174
181
  --muted-foreground: oklch(0.552 0.016 285.938);
175
- --accent: oklch(0.967 0.001 286.375);
182
+
183
+ --accent: oklch(0.96 0.005 85);
176
184
  --accent-foreground: oklch(0.21 0.006 285.885);
185
+
177
186
  --destructive: oklch(0.577 0.245 27.325);
178
- --destructive-foreground: oklch(0.577 0.245 27.325);
179
- --border: oklch(0.92 0.004 286.32);
180
- --input: oklch(0.92 0.004 286.32);
181
- --ring: oklch(0.871 0.006 286.286);
182
- --chart-1: oklch(0.646 0.222 41.116);
183
- --chart-2: oklch(0.6 0.118 184.704);
184
- --chart-3: oklch(0.398 0.07 227.392);
185
- --chart-4: oklch(0.828 0.189 84.429);
186
- --chart-5: oklch(0.769 0.188 70.08);
187
- --radius: 0.625rem;
187
+ --destructive-foreground: oklch(0.99 0 0);
188
+
189
+ --border: oklch(0.92 0.005 85);
190
+ --input: oklch(0.92 0.005 85);
191
+ --ring: oklch(0.871 0.006 285.885);
192
+
193
+ --radius: 0.75rem;
194
+
195
+ /* Sidebar inherits warm Light palette */
188
196
  --sidebar: var(--card);
189
197
  --sidebar-foreground: oklch(0.141 0.005 285.823);
190
198
  --sidebar-primary: oklch(0.21 0.006 285.885);
191
199
  --sidebar-primary-foreground: oklch(0.985 0 0);
192
- --sidebar-accent: oklch(0.967 0.001 286.375);
200
+ --sidebar-accent: oklch(0.96 0.005 85);
193
201
  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
194
- --sidebar-border: oklch(0.92 0.004 286.32);
195
- --sidebar-ring: oklch(0.871 0.006 286.286);
196
- /* Banner: Tailwind blue/green/yellow/red (light: bg 100, text 800, border 400) */
202
+ --sidebar-border: oklch(0.92 0.005 85);
203
+
204
+ /* Banners (Light) */
197
205
  --banner-info: oklch(0.931 0.038 253.71);
198
206
  --banner-info-foreground: oklch(0.45 0.13 264.052);
199
207
  --banner-info-border: oklch(0.704 0.165 259.815);
@@ -206,72 +214,74 @@ code {
206
214
  --banner-alert: oklch(0.936 0.031 17.72);
207
215
  --banner-alert-foreground: oklch(0.396 0.141 25.723);
208
216
  --banner-alert-border: oklch(0.577 0.245 27.325);
209
- /* Badge: success = green, warning = amber */
217
+
218
+ /* Interactive Elements (Light) */
210
219
  --badge-success: oklch(0.53 0.15 145);
211
220
  --badge-success-foreground: oklch(1 0 0);
212
- --badge-warning: oklch(0.75 0.18 75);
213
- --badge-warning-foreground: oklch(1 0 0);
214
- /* Checkbox: light = olive checked, gray border unchecked; dark = matching contrast */
215
- --checkbox-checked: oklch(0.78 0.15 125);
221
+ --checkbox-checked: oklch(0.45 0.12 150);
222
+ /* Darker olive for light contrast */
216
223
  --checkbox-checked-foreground: oklch(1 0 0);
217
224
  --checkbox-unchecked-bg: oklch(1 0 0);
218
- --checkbox-unchecked-border: oklch(0.78 0.005 0);
225
+ --checkbox-unchecked-border: oklch(0.85 0.01 285);
219
226
  }
220
227
 
221
228
  .dark {
222
- --background: oklch(0.141 0.005 285.823);
229
+ /* --- Dark Theme (Modern Slate & Glow) --- */
230
+ --background: oklch(0.18 0.015 260);
223
231
  --foreground: oklch(0.985 0 0);
224
- --card: oklch(0.141 0.005 285.823);
232
+
233
+ /* Card Elevation: Brighter than background */
234
+ --card: oklch(0.23 0.02 260 / 0.75);
225
235
  --card-foreground: oklch(0.985 0 0);
226
- --popover: oklch(0.141 0.005 285.823);
236
+
237
+ --popover: oklch(0.21 0.015 260);
227
238
  --popover-foreground: oklch(0.985 0 0);
239
+
240
+ /* Primary: High-contrast Glow */
228
241
  --primary: oklch(0.985 0 0);
229
- --primary-foreground: oklch(0.21 0.006 285.885);
230
- --secondary: oklch(0.274 0.006 286.033);
242
+ --primary-foreground: oklch(0.18 0.015 260);
243
+
244
+ --secondary: oklch(0.28 0.02 260);
231
245
  --secondary-foreground: oklch(0.985 0 0);
232
- --muted: oklch(0.274 0.006 286.033);
233
- --muted-foreground: oklch(0.705 0.015 286.067);
234
- --accent: oklch(0.274 0.006 286.033);
246
+
247
+ --muted: oklch(0.28 0.02 260);
248
+ --muted-foreground: oklch(0.705 0.015 260);
249
+
250
+ --accent: oklch(0.28 0.02 260);
235
251
  --accent-foreground: oklch(0.985 0 0);
236
- --destructive: oklch(0.396 0.141 25.723);
237
- --destructive-foreground: oklch(0.637 0.237 25.331);
238
- --border: oklch(0.274 0.006 286.033);
239
- --input: oklch(0.274 0.006 286.033);
240
- --ring: oklch(0.442 0.017 285.786);
241
- --chart-1: oklch(0.488 0.243 264.376);
242
- --chart-2: oklch(0.696 0.17 162.48);
243
- --chart-3: oklch(0.769 0.188 70.08);
244
- --chart-4: oklch(0.627 0.265 303.9);
245
- --chart-5: oklch(0.645 0.246 16.439);
246
- --sidebar: oklch(0.21 0.006 285.885);
252
+
253
+ --destructive: oklch(0.45 0.15 25);
254
+ --destructive-foreground: oklch(0.985 0 0);
255
+
256
+ --border: oklch(0.32 0.02 260);
257
+ --input: oklch(0.32 0.02 260);
258
+ --ring: oklch(0.442 0.017 260);
259
+
260
+ /* Sidebar (Dark) */
261
+ --sidebar: oklch(0.21 0.015 260);
247
262
  --sidebar-foreground: oklch(0.985 0 0);
248
- --sidebar-primary: oklch(0.488 0.243 264.376);
263
+ --sidebar-primary: oklch(0.488 0.243 260);
249
264
  --sidebar-primary-foreground: oklch(0.985 0 0);
250
- --sidebar-accent: oklch(0.274 0.006 286.033);
251
- --sidebar-accent-foreground: oklch(0.985 0 0);
252
- --sidebar-border: oklch(0.274 0.006 286.033);
253
- --sidebar-ring: oklch(0.442 0.017 285.786);
254
- /* Banner: Tailwind blue/green/yellow/red (dark: bg 950, text 100, border 600) */
255
- --banner-info: oklch(0.274 0.079 264.695);
256
- --banner-info-foreground: oklch(0.925 0.033 264.665);
257
- --banner-info-border: oklch(0.488 0.243 264.376);
258
- --banner-note: oklch(0.266 0.065 152.934);
259
- --banner-note-foreground: oklch(0.962 0.044 156.743);
260
- --banner-note-border: oklch(0.627 0.194 149.214);
261
- --banner-warning: oklch(0.304 0.063 73.684);
262
- --banner-warning-foreground: oklch(0.969 0.071 103.748);
263
- --banner-warning-border: oklch(0.627 0.194 149.214);
264
- --banner-alert: oklch(0.293 0.084 27.325);
265
- --banner-alert-foreground: oklch(0.969 0.071 27.325);
266
- --banner-alert-border: oklch(0.577 0.245 27.325);
265
+ --sidebar-border: oklch(0.32 0.02 260);
266
+
267
+ /* Banners (Dark - Desaturated) */
268
+ --banner-info: oklch(0.274 0.079 260);
269
+ --banner-info-foreground: oklch(0.925 0.033 260);
270
+ --banner-info-border: oklch(0.488 0.2 260);
271
+ --banner-note: oklch(0.266 0.065 152);
272
+ --banner-note-foreground: oklch(0.962 0.044 156);
273
+ --banner-warning: oklch(0.304 0.063 73);
274
+ --banner-warning-foreground: oklch(0.969 0.071 103);
275
+ --banner-alert: oklch(0.293 0.084 27);
276
+ --banner-alert-foreground: oklch(0.969 0.071 27);
277
+
278
+ /* Interactive Elements (Dark) */
267
279
  --badge-success: oklch(0.48 0.15 150);
268
280
  --badge-success-foreground: oklch(1 0 0);
269
- --badge-warning: oklch(0.65 0.18 75);
270
- --badge-warning-foreground: oklch(1 0 0);
271
281
  --checkbox-checked: oklch(0.72 0.17 130);
272
- --checkbox-checked-foreground: oklch(1 0 0);
273
- --checkbox-unchecked-bg: oklch(0.28 0.01 260);
274
- --checkbox-unchecked-border: oklch(0.5 0.01 260);
282
+ --checkbox-checked-foreground: oklch(0.18 0.015 260);
283
+ --checkbox-unchecked-bg: oklch(0.25 0.01 260);
284
+ --checkbox-unchecked-border: oklch(0.4 0.01 260);
275
285
  }
276
286
 
277
287
  /* Banner: colors from styles.css tokens; type → info=blue, note=green, warning=yellow, alert=red */