@tomny-dev/uzi 0.5.0 → 0.6.0

package/dist/index12.js

@@ -1,41 +1,19 @@
-//#region src/components/modal/modal.module.css
-var portalLayer = "uzi-modal-module__portalLayer__t7blc";
-var backdrop = "uzi-modal-module__backdrop__IMd3b";
-var backdropFadeIn = "uzi-modal-module__backdropFadeIn__GNJdx";
-var backdropFadeOut = "uzi-modal-module__backdropFadeOut__R-3K5";
-var overlayContent = "uzi-modal-module__overlayContent__0DtbP";
-var modalContentIn = "uzi-modal-module__modalContentIn__fub8M";
-var modalContentOut = "uzi-modal-module__modalContentOut__elTJ3";
-var modal = "uzi-modal-module__modal__Mao59";
-var header = "uzi-modal-module__header__PmCaO";
-var titles = "uzi-modal-module__titles__IboyQ";
-var title = "uzi-modal-module__title__Zd7pL";
-var subtitle = "uzi-modal-module__subtitle__t-LRK";
-var closeButton = "uzi-modal-module__closeButton__GTiZr";
-var body = "uzi-modal-module__body__km6FQ";
-var footer = "uzi-modal-module__footer__jWLTv";
-var modal_module_default = {
-	portalLayer,
-	backdrop,
-	backdropFadeIn,
-	backdropFadeOut,
-	overlayContent,
-	modalContentIn,
-	modalContentOut,
-	modal,
-	"size-sm": "uzi-modal-module__size-sm__Uu9je",
-	"size-md": "uzi-modal-module__size-md__TiiWy",
-	"size-lg": "uzi-modal-module__size-lg__BrTIO",
-	"size-xl": "uzi-modal-module__size-xl__sj0mh",
-	header,
-	titles,
-	title,
-	subtitle,
-	closeButton,
-	body,
-	footer
+//#region src/components/pill/pill.module.css
+var pill = "uzi-pill-module__pill__uCKcP";
+var icon = "uzi-pill-module__icon__KQ8zg";
+var content = "uzi-pill-module__content__T7AG1";
+var pill_module_default = {
+	pill,
+	"size-sm": "uzi-pill-module__size-sm__JANOQ",
+	"size-md": "uzi-pill-module__size-md__fdsqR",
+	"tone-success": "uzi-pill-module__tone-success__kW2Kf",
+	"tone-warning": "uzi-pill-module__tone-warning__Rc5-s",
+	"tone-info": "uzi-pill-module__tone-info__0vQrj",
+	"tone-danger": "uzi-pill-module__tone-danger__gzNOa",
+	icon,
+	content
 };
 //#endregion
-export { backdrop, backdropFadeIn, backdropFadeOut, body, closeButton, modal_module_default as default, footer, header, modal, modalContentIn, modalContentOut, overlayContent, portalLayer, subtitle, title, titles };
+export { content, pill_module_default as default, icon, pill };
 
 //# sourceMappingURL=index12.js.map

package/dist/index12.js.map

@@ -1 +1 @@
-{"version":3,"file":"index12.js","names":[],"sources":["../src/components/modal/modal.module.css"],"sourcesContent":[".portalLayer {\n  --uzi-modal-viewport-margin: 32px;\n\n  position: fixed;\n  inset: 0;\n  z-index: var(--uzi-modal-z-index, 1000);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 16px;\n}\n\n.backdrop {\n  position: absolute;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.55);\n}\n\n.backdrop[data-state=\"open\"] {\n  animation: backdropFadeIn 160ms ease;\n}\n\n.backdrop[data-state=\"closed\"] {\n  animation: backdropFadeOut 140ms ease;\n}\n\n.overlayContent {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  max-width: 100%;\n  max-height: 100%;\n  outline: none;\n}\n\n.overlayContent[data-state=\"open\"] {\n  animation: modalContentIn 180ms ease;\n}\n\n.overlayContent[data-state=\"closed\"] {\n  animation: modalContentOut 140ms ease;\n}\n\n.modal {\n  background: var(--background);\n  border: 1px solid var(--border);\n  border-radius: 14px;\n  max-height: calc(100vh - var(--uzi-modal-viewport-margin));\n  max-height: calc(100dvh - var(--uzi-modal-viewport-margin));\n  overflow: hidden;\n  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);\n  display: flex;\n  flex-direction: column;\n  gap: 0;\n}\n\n/* Size variants */\n.size-sm { width: min(380px, calc(100vw - var(--uzi-modal-viewport-margin))); }\n.size-md { width: min(500px, calc(100vw - var(--uzi-modal-viewport-margin))); }\n.size-lg { width: min(640px, calc(100vw - var(--uzi-modal-viewport-margin))); }\n.size-xl { width: min(900px, calc(100vw - var(--uzi-modal-viewport-margin))); }\n\n.header {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 12px;\n  padding: 24px 24px 0;\n  margin-bottom: 16px;\n}\n\n.titles {\n  display: flex;\n  flex-direction: column;\n  gap: 3px;\n}\n\n.title {\n  font-weight: 700;\n  font-size: 16px;\n  color: var(--foreground);\n  line-height: 1.3;\n}\n\n.subtitle {\n  font-size: 13px;\n  color: var(--muted-foreground);\n  line-height: 1.4;\n}\n\n.closeButton {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  flex-shrink: 0;\n  background: transparent;\n  border: 1px solid transparent;\n  border-radius: 6px;\n  color: var(--muted-foreground);\n  cursor: pointer;\n  transition: background 0.12s, color 0.12s;\n  padding: 0;\n}\n\n.closeButton:hover {\n  background: color-mix(in srgb, var(--foreground) 7%, transparent);\n  color: var(--foreground);\n}\n\n.closeButton:focus-visible {\n  outline: var(--focus-ring);\n  outline-offset: var(--focus-ring-offset);\n}\n\n.body {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  min-height: 0;\n  overflow-y: auto;\n  padding: 0 24px;\n}\n\n.body:last-child {\n  padding-bottom: 24px;\n}\n\n.footer {\n  display: flex;\n  gap: 8px;\n  padding: 0 24px 24px;\n  margin-top: 20px;\n}\n\n@keyframes backdropFadeIn {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes backdropFadeOut {\n  from {\n    opacity: 1;\n  }\n\n  to {\n    opacity: 0;\n  }\n}\n\n@keyframes modalContentIn {\n  from {\n    opacity: 0;\n    transform: translateY(6px) scale(0.98);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n}\n\n@keyframes modalContentOut {\n  from {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n\n  to {\n    opacity: 0;\n    transform: translateY(4px) scale(0.98);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"index12.js","names":[],"sources":["../src/components/pill/pill.module.css"],"sourcesContent":[".pill {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 10px;\n  border-radius: 999px;\n  border: 1px solid var(--ts-pill-border, var(--border));\n  background: var(--ts-pill-bg, color-mix(in srgb, var(--foreground) 4%, transparent));\n  color: var(--ts-pill-fg, var(--muted-foreground));\n  font-size: 12px;\n  font-weight: 700;\n  letter-spacing: 0.05em;\n  text-transform: uppercase;\n  line-height: 1.2;\n  white-space: nowrap;\n}\n\n.size-sm {\n  padding: 3px 8px;\n  font-size: 11px;\n}\n\n.size-md {\n  padding: 4px 10px;\n}\n\n.tone-success {\n  color: var(--success);\n  border-color: color-mix(in srgb, var(--success) 45%, transparent);\n  background: color-mix(in srgb, var(--success) 12%, transparent);\n}\n\n.tone-warning {\n  color: var(--warning);\n  border-color: color-mix(in srgb, var(--warning) 45%, transparent);\n  background: color-mix(in srgb, var(--warning) 12%, transparent);\n}\n\n.tone-info {\n  color: var(--primary);\n  border-color: color-mix(in srgb, var(--primary) 50%, transparent);\n  background: color-mix(in srgb, var(--primary) 12%, transparent);\n}\n\n.tone-danger {\n  color: var(--destructive);\n  border-color: color-mix(in srgb, var(--destructive) 45%, transparent);\n  background: color-mix(in srgb, var(--destructive) 12%, transparent);\n}\n\n.icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 12px;\n  height: 12px;\n}\n\n.content {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n}\n"],"mappings":""}

package/dist/index13.cjs

@@ -1,56 +1,22 @@
-//#region src/components/modal/modal.module.css
-var portalLayer = "uzi-modal-module__portalLayer__t7blc";
-var backdrop = "uzi-modal-module__backdrop__IMd3b";
-var backdropFadeIn = "uzi-modal-module__backdropFadeIn__GNJdx";
-var backdropFadeOut = "uzi-modal-module__backdropFadeOut__R-3K5";
-var overlayContent = "uzi-modal-module__overlayContent__0DtbP";
-var modalContentIn = "uzi-modal-module__modalContentIn__fub8M";
-var modalContentOut = "uzi-modal-module__modalContentOut__elTJ3";
-var modal = "uzi-modal-module__modal__Mao59";
-var header = "uzi-modal-module__header__PmCaO";
-var titles = "uzi-modal-module__titles__IboyQ";
-var title = "uzi-modal-module__title__Zd7pL";
-var subtitle = "uzi-modal-module__subtitle__t-LRK";
-var closeButton = "uzi-modal-module__closeButton__GTiZr";
-var body = "uzi-modal-module__body__km6FQ";
-var footer = "uzi-modal-module__footer__jWLTv";
-var modal_module_default = {
-	portalLayer,
-	backdrop,
-	backdropFadeIn,
-	backdropFadeOut,
-	overlayContent,
-	modalContentIn,
-	modalContentOut,
-	modal,
-	"size-sm": "uzi-modal-module__size-sm__Uu9je",
-	"size-md": "uzi-modal-module__size-md__TiiWy",
-	"size-lg": "uzi-modal-module__size-lg__BrTIO",
-	"size-xl": "uzi-modal-module__size-xl__sj0mh",
-	header,
-	titles,
-	title,
-	subtitle,
-	closeButton,
-	body,
-	footer
+//#region src/components/pill/pill.module.css
+var pill = "uzi-pill-module__pill__uCKcP";
+var icon = "uzi-pill-module__icon__KQ8zg";
+var content = "uzi-pill-module__content__T7AG1";
+var pill_module_default = {
+	pill,
+	"size-sm": "uzi-pill-module__size-sm__JANOQ",
+	"size-md": "uzi-pill-module__size-md__fdsqR",
+	"tone-success": "uzi-pill-module__tone-success__kW2Kf",
+	"tone-warning": "uzi-pill-module__tone-warning__Rc5-s",
+	"tone-info": "uzi-pill-module__tone-info__0vQrj",
+	"tone-danger": "uzi-pill-module__tone-danger__gzNOa",
+	icon,
+	content
 };
 //#endregion
-exports.backdrop = backdrop;
-exports.backdropFadeIn = backdropFadeIn;
-exports.backdropFadeOut = backdropFadeOut;
-exports.body = body;
-exports.closeButton = closeButton;
-exports.default = modal_module_default;
-exports.footer = footer;
-exports.header = header;
-exports.modal = modal;
-exports.modalContentIn = modalContentIn;
-exports.modalContentOut = modalContentOut;
-exports.overlayContent = overlayContent;
-exports.portalLayer = portalLayer;
-exports.subtitle = subtitle;
-exports.title = title;
-exports.titles = titles;
+exports.content = content;
+exports.default = pill_module_default;
+exports.icon = icon;
+exports.pill = pill;
 
 //# sourceMappingURL=index13.cjs.map

package/dist/index13.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index13.cjs","names":[],"sources":["../src/components/modal/modal.module.css"],"sourcesContent":[".portalLayer {\n  --uzi-modal-viewport-margin: 32px;\n\n  position: fixed;\n  inset: 0;\n  z-index: var(--uzi-modal-z-index, 1000);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 16px;\n}\n\n.backdrop {\n  position: absolute;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.55);\n}\n\n.backdrop[data-state=\"open\"] {\n  animation: backdropFadeIn 160ms ease;\n}\n\n.backdrop[data-state=\"closed\"] {\n  animation: backdropFadeOut 140ms ease;\n}\n\n.overlayContent {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  max-width: 100%;\n  max-height: 100%;\n  outline: none;\n}\n\n.overlayContent[data-state=\"open\"] {\n  animation: modalContentIn 180ms ease;\n}\n\n.overlayContent[data-state=\"closed\"] {\n  animation: modalContentOut 140ms ease;\n}\n\n.modal {\n  background: var(--background);\n  border: 1px solid var(--border);\n  border-radius: 14px;\n  max-height: calc(100vh - var(--uzi-modal-viewport-margin));\n  max-height: calc(100dvh - var(--uzi-modal-viewport-margin));\n  overflow: hidden;\n  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);\n  display: flex;\n  flex-direction: column;\n  gap: 0;\n}\n\n/* Size variants */\n.size-sm { width: min(380px, calc(100vw - var(--uzi-modal-viewport-margin))); }\n.size-md { width: min(500px, calc(100vw - var(--uzi-modal-viewport-margin))); }\n.size-lg { width: min(640px, calc(100vw - var(--uzi-modal-viewport-margin))); }\n.size-xl { width: min(900px, calc(100vw - var(--uzi-modal-viewport-margin))); }\n\n.header {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 12px;\n  padding: 24px 24px 0;\n  margin-bottom: 16px;\n}\n\n.titles {\n  display: flex;\n  flex-direction: column;\n  gap: 3px;\n}\n\n.title {\n  font-weight: 700;\n  font-size: 16px;\n  color: var(--foreground);\n  line-height: 1.3;\n}\n\n.subtitle {\n  font-size: 13px;\n  color: var(--muted-foreground);\n  line-height: 1.4;\n}\n\n.closeButton {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  flex-shrink: 0;\n  background: transparent;\n  border: 1px solid transparent;\n  border-radius: 6px;\n  color: var(--muted-foreground);\n  cursor: pointer;\n  transition: background 0.12s, color 0.12s;\n  padding: 0;\n}\n\n.closeButton:hover {\n  background: color-mix(in srgb, var(--foreground) 7%, transparent);\n  color: var(--foreground);\n}\n\n.closeButton:focus-visible {\n  outline: var(--focus-ring);\n  outline-offset: var(--focus-ring-offset);\n}\n\n.body {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  min-height: 0;\n  overflow-y: auto;\n  padding: 0 24px;\n}\n\n.body:last-child {\n  padding-bottom: 24px;\n}\n\n.footer {\n  display: flex;\n  gap: 8px;\n  padding: 0 24px 24px;\n  margin-top: 20px;\n}\n\n@keyframes backdropFadeIn {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes backdropFadeOut {\n  from {\n    opacity: 1;\n  }\n\n  to {\n    opacity: 0;\n  }\n}\n\n@keyframes modalContentIn {\n  from {\n    opacity: 0;\n    transform: translateY(6px) scale(0.98);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n}\n\n@keyframes modalContentOut {\n  from {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n\n  to {\n    opacity: 0;\n    transform: translateY(4px) scale(0.98);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"index13.cjs","names":[],"sources":["../src/components/pill/pill.module.css"],"sourcesContent":[".pill {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 10px;\n  border-radius: 999px;\n  border: 1px solid var(--ts-pill-border, var(--border));\n  background: var(--ts-pill-bg, color-mix(in srgb, var(--foreground) 4%, transparent));\n  color: var(--ts-pill-fg, var(--muted-foreground));\n  font-size: 12px;\n  font-weight: 700;\n  letter-spacing: 0.05em;\n  text-transform: uppercase;\n  line-height: 1.2;\n  white-space: nowrap;\n}\n\n.size-sm {\n  padding: 3px 8px;\n  font-size: 11px;\n}\n\n.size-md {\n  padding: 4px 10px;\n}\n\n.tone-success {\n  color: var(--success);\n  border-color: color-mix(in srgb, var(--success) 45%, transparent);\n  background: color-mix(in srgb, var(--success) 12%, transparent);\n}\n\n.tone-warning {\n  color: var(--warning);\n  border-color: color-mix(in srgb, var(--warning) 45%, transparent);\n  background: color-mix(in srgb, var(--warning) 12%, transparent);\n}\n\n.tone-info {\n  color: var(--primary);\n  border-color: color-mix(in srgb, var(--primary) 50%, transparent);\n  background: color-mix(in srgb, var(--primary) 12%, transparent);\n}\n\n.tone-danger {\n  color: var(--destructive);\n  border-color: color-mix(in srgb, var(--destructive) 45%, transparent);\n  background: color-mix(in srgb, var(--destructive) 12%, transparent);\n}\n\n.icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 12px;\n  height: 12px;\n}\n\n.content {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n}\n"],"mappings":""}

package/dist/index13.js

@@ -1,84 +1,22 @@
-"use client";
 import { cx } from "./index3.js";
-import modal_module_default from "./index12.js";
+import pill_module_default from "./index12.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import * as DialogPrimitive from "@radix-ui/react-dialog";
-//#region src/components/modal/Modal.tsx
-function ModalOverlay({ open, onClose, className, children }) {
-	return /* @__PURE__ */ jsx(DialogPrimitive.Root, {
-		open,
-		onOpenChange: (nextOpen) => {
-			if (!nextOpen) onClose();
-		},
-		children: /* @__PURE__ */ jsx(DialogPrimitive.Portal, { children: /* @__PURE__ */ jsxs("div", {
-			className: modal_module_default.portalLayer,
-			children: [/* @__PURE__ */ jsx(DialogPrimitive.Overlay, { className: cx(modal_module_default.backdrop, className) }), /* @__PURE__ */ jsx(DialogPrimitive.Content, {
-				className: modal_module_default.overlayContent,
-				children
-			})]
-		}) })
-	});
-}
-function Modal({ open, onClose, title, subtitle, size = "md", children, footer }) {
-	return /* @__PURE__ */ jsx(ModalOverlay, {
-		open,
-		onClose,
-		children: /* @__PURE__ */ jsxs("div", {
-			className: cx(modal_module_default.modal, modal_module_default[`size-${size}`]),
-			children: [
-				/* @__PURE__ */ jsxs("div", {
-					className: modal_module_default.header,
-					children: [/* @__PURE__ */ jsxs("div", {
-						className: modal_module_default.titles,
-						children: [/* @__PURE__ */ jsx(DialogPrimitive.Title, {
-							className: modal_module_default.title,
-							children: title
-						}), subtitle ? /* @__PURE__ */ jsx(DialogPrimitive.Description, {
-							className: modal_module_default.subtitle,
-							children: subtitle
-						}) : null]
-					}), /* @__PURE__ */ jsx(DialogPrimitive.Close, {
-						asChild: true,
-						children: /* @__PURE__ */ jsx("button", {
-							className: modal_module_default.closeButton,
-							"aria-label": "Close",
-							children: /* @__PURE__ */ jsxs("svg", {
-								width: "14",
-								height: "14",
-								viewBox: "0 0 24 24",
-								fill: "none",
-								stroke: "currentColor",
-								strokeWidth: "2.5",
-								strokeLinecap: "round",
-								strokeLinejoin: "round",
-								children: [/* @__PURE__ */ jsx("line", {
-									x1: "18",
-									y1: "6",
-									x2: "6",
-									y2: "18"
-								}), /* @__PURE__ */ jsx("line", {
-									x1: "6",
-									y1: "6",
-									x2: "18",
-									y2: "18"
-								})]
-							})
-						})
-					})]
-				}),
-				/* @__PURE__ */ jsx("div", {
-					className: modal_module_default.body,
-					children
-				}),
-				footer && /* @__PURE__ */ jsx("div", {
-					className: modal_module_default.footer,
-					children: footer
-				})
-			]
-		})
+//#region src/components/pill/Pill.tsx
+function Pill({ as, tone = "neutral", size = "md", icon, className, children, ...rest }) {
+	return /* @__PURE__ */ jsxs(as ?? "span", {
+		className: cx(pill_module_default.pill, pill_module_default[`tone-${tone}`], pill_module_default[`size-${size}`], className),
+		...rest,
+		children: [icon ? /* @__PURE__ */ jsx("span", {
+			className: pill_module_default.icon,
+			"aria-hidden": "true",
+			children: icon
+		}) : null, /* @__PURE__ */ jsx("span", {
+			className: pill_module_default.content,
+			children
+		})]
 	});
 }
 //#endregion
-export { Modal, ModalOverlay };
+export { Pill };
 
 //# sourceMappingURL=index13.js.map

package/dist/index13.js.map

@@ -1 +1 @@
-{"version":3,"file":"index13.js","names":[],"sources":["../src/components/modal/Modal.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ReactNode } from \"react\";\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport { cx } from \"../../utils/cx\";\nimport styles from \"./modal.module.css\";\n\n// ── ModalOverlay ─────────────────────────────────────────────────────────────\n// Bare backdrop + container. No opinions on layout inside.\n// Use this when you need a full-custom layout (e.g. wide media modals).\n\nexport type ModalOverlayProps = {\n  open: boolean;\n  onClose: () => void;\n  /** Extra class applied to the backdrop */\n  className?: string;\n  children: ReactNode;\n};\n\nexport function ModalOverlay({ open, onClose, className, children }: ModalOverlayProps) {\n  return (\n    <DialogPrimitive.Root\n      open={open}\n      onOpenChange={(nextOpen: boolean) => {\n        if (!nextOpen) onClose();\n      }}\n    >\n      <DialogPrimitive.Portal>\n        <div className={styles.portalLayer}>\n          <DialogPrimitive.Overlay className={cx(styles.backdrop, className)} />\n          <DialogPrimitive.Content className={styles.overlayContent}>\n            {children}\n          </DialogPrimitive.Content>\n        </div>\n      </DialogPrimitive.Portal>\n    </DialogPrimitive.Root>\n  );\n}\n\n// ── Modal ─────────────────────────────────────────────────────────────────────\n// Opinionated dialog: header (title + close button), scrollable body, footer.\n\nexport type ModalSize = \"sm\" | \"md\" | \"lg\" | \"xl\";\n\nexport type ModalProps = {\n  open: boolean;\n  onClose: () => void;\n  title: string;\n  subtitle?: string;\n  size?: ModalSize;\n  children: ReactNode;\n  footer?: ReactNode;\n};\n\nexport function Modal({ open, onClose, title, subtitle, size = \"md\", children, footer }: ModalProps) {\n  return (\n    <ModalOverlay open={open} onClose={onClose}>\n      <div className={cx(styles.modal, styles[`size-${size}`])}>\n        <div className={styles.header}>\n          <div className={styles.titles}>\n            <DialogPrimitive.Title className={styles.title}>{title}</DialogPrimitive.Title>\n            {subtitle ? (\n              <DialogPrimitive.Description className={styles.subtitle}>\n                {subtitle}\n              </DialogPrimitive.Description>\n            ) : null}\n          </div>\n          <DialogPrimitive.Close asChild>\n            <button className={styles.closeButton} aria-label=\"Close\">\n              <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n                <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n                <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n              </svg>\n            </button>\n          </DialogPrimitive.Close>\n        </div>\n\n        <div className={styles.body}>{children}</div>\n\n        {footer && <div className={styles.footer}>{footer}</div>}\n      </div>\n    </ModalOverlay>\n  );\n}\n"],"mappings":";;;;;;AAmBA,SAAgB,aAAa,EAAE,MAAM,SAAS,WAAW,YAA+B;CACtF,OACE,oBAAC,gBAAgB,MAAjB;EACQ;EACN,eAAe,aAAsB;GACnC,IAAI,CAAC,UAAU,QAAQ;EACzB;YAEA,oBAAC,gBAAgB,QAAjB,EAAA,UACE,qBAAC,OAAD;GAAK,WAAW,qBAAO;aAAvB,CACE,oBAAC,gBAAgB,SAAjB,EAAyB,WAAW,GAAG,qBAAO,UAAU,SAAS,EAAI,CAAA,GACrE,oBAAC,gBAAgB,SAAjB;IAAyB,WAAW,qBAAO;IACxC;GACsB,CAAA,CACtB;KACiB,CAAA;CACJ,CAAA;AAE1B;AAiBA,SAAgB,MAAM,EAAE,MAAM,SAAS,OAAO,UAAU,OAAO,MAAM,UAAU,UAAsB;CACnG,OACE,oBAAC,cAAD;EAAoB;EAAe;YACjC,qBAAC,OAAD;GAAK,WAAW,GAAG,qBAAO,OAAO,qBAAO,QAAQ,OAAO;aAAvD;IACE,qBAAC,OAAD;KAAK,WAAW,qBAAO;eAAvB,CACE,qBAAC,OAAD;MAAK,WAAW,qBAAO;gBAAvB,CACE,oBAAC,gBAAgB,OAAjB;OAAuB,WAAW,qBAAO;iBAAQ;MAA6B,CAAA,GAC7E,WACC,oBAAC,gBAAgB,aAAjB;OAA6B,WAAW,qBAAO;iBAC5C;MAC0B,CAAA,IAC3B,IACD;SACL,oBAAC,gBAAgB,OAAjB;MAAuB,SAAA;gBACrB,oBAAC,UAAD;OAAQ,WAAW,qBAAO;OAAa,cAAW;iBAChD,qBAAC,OAAD;QAAK,OAAM;QAAK,QAAO;QAAK,SAAQ;QAAY,MAAK;QAAO,QAAO;QAAe,aAAY;QAAM,eAAc;QAAQ,gBAAe;kBAAzI,CACE,oBAAC,QAAD;SAAM,IAAG;SAAK,IAAG;SAAI,IAAG;SAAI,IAAG;QAAM,CAAA,GACrC,oBAAC,QAAD;SAAM,IAAG;SAAI,IAAG;SAAI,IAAG;SAAK,IAAG;QAAM,CAAA,CAClC;;MACC,CAAA;KACa,CAAA,CACpB;;IAEL,oBAAC,OAAD;KAAK,WAAW,qBAAO;KAAO;IAAc,CAAA;IAE3C,UAAU,oBAAC,OAAD;KAAK,WAAW,qBAAO;eAAS;IAAY,CAAA;GACpD;;CACO,CAAA;AAElB"}
+{"version":3,"file":"index13.js","names":[],"sources":["../src/components/pill/Pill.tsx"],"sourcesContent":["/**\n * Compact label component for status chips and tags.\n *\n * @remarks\n * Supports tone and size presets, and can render any inline element.\n *\n * @param props.as - Element to render (defaults to `span`).\n * @param props.tone - Visual tone variant.\n * @param props.size - Size preset.\n * @param props.icon - Optional leading icon.\n */\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cx } from \"../../utils/cx\";\nimport styles from \"./pill.module.css\";\n\nexport type PillTone = \"neutral\" | \"success\" | \"warning\" | \"info\" | \"danger\";\nexport type PillSize = \"sm\" | \"md\";\n\ntype PillElement = \"span\" | \"div\" | \"button\";\n\nexport type PillProps = HTMLAttributes<HTMLElement> & {\n  /** Optional rendered element; defaults to `span`. */\n  as?: PillElement;\n  /** Visual tone; adjusts color and border. */\n  tone?: PillTone;\n  /** Size preset. */\n  size?: PillSize;\n  /** Leading icon node (not focusable). */\n  icon?: ReactNode;\n};\n\nexport function Pill({\n  as,\n  tone = \"neutral\",\n  size = \"md\",\n  icon,\n  className,\n  children,\n  ...rest\n}: PillProps) {\n  const Component: PillElement = as ?? \"span\";\n  const classes = cx(styles.pill, styles[`tone-${tone}`], styles[`size-${size}`], className);\n\n  return (\n    <Component className={classes} {...rest}>\n      {icon ? (\n        <span className={styles.icon} aria-hidden=\"true\">\n          {icon}\n        </span>\n      ) : null}\n      <span className={styles.content}>{children}</span>\n    </Component>\n  );\n}\n"],"mappings":";;;;AA+BA,SAAgB,KAAK,EACnB,IACA,OAAO,WACP,OAAO,MACP,MACA,WACA,UACA,GAAG,QACS;CAIZ,OACE,qBAJ6B,MAAM,QAInC;EAAW,WAHG,GAAG,oBAAO,MAAM,oBAAO,QAAQ,SAAS,oBAAO,QAAQ,SAAS,SAGxD;EAAS,GAAI;YAAnC,CACG,OACC,oBAAC,QAAD;GAAM,WAAW,oBAAO;GAAM,eAAY;aACvC;EACG,CAAA,IACJ,MACJ,oBAAC,QAAD;GAAM,WAAW,oBAAO;GAAU;EAAe,CAAA,CACxC;;AAEf"}

package/dist/index14.cjs

@@ -1,87 +1,22 @@
-"use client";
-const require_runtime = require("./index2.cjs");
 const require_cx = require("./index4.cjs");
-const require_modal_module = require("./index13.cjs");
+const require_pill_module = require("./index13.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
-let _radix_ui_react_dialog = require("@radix-ui/react-dialog");
-_radix_ui_react_dialog = require_runtime.__toESM(_radix_ui_react_dialog, 1);
-//#region src/components/modal/Modal.tsx
-function ModalOverlay({ open, onClose, className, children }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dialog.Root, {
-		open,
-		onOpenChange: (nextOpen) => {
-			if (!nextOpen) onClose();
-		},
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dialog.Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: require_modal_module.default.portalLayer,
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dialog.Overlay, { className: require_cx.cx(require_modal_module.default.backdrop, className) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dialog.Content, {
-				className: require_modal_module.default.overlayContent,
-				children
-			})]
-		}) })
-	});
-}
-function Modal({ open, onClose, title, subtitle, size = "md", children, footer }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModalOverlay, {
-		open,
-		onClose,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: require_cx.cx(require_modal_module.default.modal, require_modal_module.default[`size-${size}`]),
-			children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: require_modal_module.default.header,
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: require_modal_module.default.titles,
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dialog.Title, {
-							className: require_modal_module.default.title,
-							children: title
-						}), subtitle ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dialog.Description, {
-							className: require_modal_module.default.subtitle,
-							children: subtitle
-						}) : null]
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dialog.Close, {
-						asChild: true,
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-							className: require_modal_module.default.closeButton,
-							"aria-label": "Close",
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
-								width: "14",
-								height: "14",
-								viewBox: "0 0 24 24",
-								fill: "none",
-								stroke: "currentColor",
-								strokeWidth: "2.5",
-								strokeLinecap: "round",
-								strokeLinejoin: "round",
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
-									x1: "18",
-									y1: "6",
-									x2: "6",
-									y2: "18"
-								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
-									x1: "6",
-									y1: "6",
-									x2: "18",
-									y2: "18"
-								})]
-							})
-						})
-					})]
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: require_modal_module.default.body,
-					children
-				}),
-				footer && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: require_modal_module.default.footer,
-					children: footer
-				})
-			]
-		})
+//#region src/components/pill/Pill.tsx
+function Pill({ as, tone = "neutral", size = "md", icon, className, children, ...rest }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(as ?? "span", {
+		className: require_cx.cx(require_pill_module.default.pill, require_pill_module.default[`tone-${tone}`], require_pill_module.default[`size-${size}`], className),
+		...rest,
+		children: [icon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: require_pill_module.default.icon,
+			"aria-hidden": "true",
+			children: icon
+		}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: require_pill_module.default.content,
+			children
+		})]
 	});
 }
 //#endregion
-exports.Modal = Modal;
-exports.ModalOverlay = ModalOverlay;
+exports.Pill = Pill;
 
 //# sourceMappingURL=index14.cjs.map

package/dist/index14.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index14.cjs","names":[],"sources":["../src/components/modal/Modal.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ReactNode } from \"react\";\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport { cx } from \"../../utils/cx\";\nimport styles from \"./modal.module.css\";\n\n// ── ModalOverlay ─────────────────────────────────────────────────────────────\n// Bare backdrop + container. No opinions on layout inside.\n// Use this when you need a full-custom layout (e.g. wide media modals).\n\nexport type ModalOverlayProps = {\n  open: boolean;\n  onClose: () => void;\n  /** Extra class applied to the backdrop */\n  className?: string;\n  children: ReactNode;\n};\n\nexport function ModalOverlay({ open, onClose, className, children }: ModalOverlayProps) {\n  return (\n    <DialogPrimitive.Root\n      open={open}\n      onOpenChange={(nextOpen: boolean) => {\n        if (!nextOpen) onClose();\n      }}\n    >\n      <DialogPrimitive.Portal>\n        <div className={styles.portalLayer}>\n          <DialogPrimitive.Overlay className={cx(styles.backdrop, className)} />\n          <DialogPrimitive.Content className={styles.overlayContent}>\n            {children}\n          </DialogPrimitive.Content>\n        </div>\n      </DialogPrimitive.Portal>\n    </DialogPrimitive.Root>\n  );\n}\n\n// ── Modal ─────────────────────────────────────────────────────────────────────\n// Opinionated dialog: header (title + close button), scrollable body, footer.\n\nexport type ModalSize = \"sm\" | \"md\" | \"lg\" | \"xl\";\n\nexport type ModalProps = {\n  open: boolean;\n  onClose: () => void;\n  title: string;\n  subtitle?: string;\n  size?: ModalSize;\n  children: ReactNode;\n  footer?: ReactNode;\n};\n\nexport function Modal({ open, onClose, title, subtitle, size = \"md\", children, footer }: ModalProps) {\n  return (\n    <ModalOverlay open={open} onClose={onClose}>\n      <div className={cx(styles.modal, styles[`size-${size}`])}>\n        <div className={styles.header}>\n          <div className={styles.titles}>\n            <DialogPrimitive.Title className={styles.title}>{title}</DialogPrimitive.Title>\n            {subtitle ? (\n              <DialogPrimitive.Description className={styles.subtitle}>\n                {subtitle}\n              </DialogPrimitive.Description>\n            ) : null}\n          </div>\n          <DialogPrimitive.Close asChild>\n            <button className={styles.closeButton} aria-label=\"Close\">\n              <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n                <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n                <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n              </svg>\n            </button>\n          </DialogPrimitive.Close>\n        </div>\n\n        <div className={styles.body}>{children}</div>\n\n        {footer && <div className={styles.footer}>{footer}</div>}\n      </div>\n    </ModalOverlay>\n  );\n}\n"],"mappings":";;;;;;;;AAmBA,SAAgB,aAAa,EAAE,MAAM,SAAS,WAAW,YAA+B;CACtF,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,uBAAgB,MAAjB;EACQ;EACN,eAAe,aAAsB;GACnC,IAAI,CAAC,UAAU,QAAQ;EACzB;YAEA,iBAAA,GAAA,kBAAA,IAAA,CAAC,uBAAgB,QAAjB,EAAA,UACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;GAAK,WAAW,qBAAA,QAAO;aAAvB,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,uBAAgB,SAAjB,EAAyB,WAAW,WAAA,GAAG,qBAAA,QAAO,UAAU,SAAS,EAAI,CAAA,GACrE,iBAAA,GAAA,kBAAA,IAAA,CAAC,uBAAgB,SAAjB;IAAyB,WAAW,qBAAA,QAAO;IACxC;GACsB,CAAA,CACtB;KACiB,CAAA;CACJ,CAAA;AAE1B;AAiBA,SAAgB,MAAM,EAAE,MAAM,SAAS,OAAO,UAAU,OAAO,MAAM,UAAU,UAAsB;CACnG,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,cAAD;EAAoB;EAAe;YACjC,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;GAAK,WAAW,WAAA,GAAG,qBAAA,QAAO,OAAO,qBAAA,QAAO,QAAQ,OAAO;aAAvD;IACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;KAAK,WAAW,qBAAA,QAAO;eAAvB,CACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;MAAK,WAAW,qBAAA,QAAO;gBAAvB,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,uBAAgB,OAAjB;OAAuB,WAAW,qBAAA,QAAO;iBAAQ;MAA6B,CAAA,GAC7E,WACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,uBAAgB,aAAjB;OAA6B,WAAW,qBAAA,QAAO;iBAC5C;MAC0B,CAAA,IAC3B,IACD;SACL,iBAAA,GAAA,kBAAA,IAAA,CAAC,uBAAgB,OAAjB;MAAuB,SAAA;gBACrB,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;OAAQ,WAAW,qBAAA,QAAO;OAAa,cAAW;iBAChD,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;QAAK,OAAM;QAAK,QAAO;QAAK,SAAQ;QAAY,MAAK;QAAO,QAAO;QAAe,aAAY;QAAM,eAAc;QAAQ,gBAAe;kBAAzI,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;SAAM,IAAG;SAAK,IAAG;SAAI,IAAG;SAAI,IAAG;QAAM,CAAA,GACrC,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;SAAM,IAAG;SAAI,IAAG;SAAI,IAAG;SAAK,IAAG;QAAM,CAAA,CAClC;;MACC,CAAA;KACa,CAAA,CACpB;;IAEL,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;KAAK,WAAW,qBAAA,QAAO;KAAO;IAAc,CAAA;IAE3C,UAAU,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;KAAK,WAAW,qBAAA,QAAO;eAAS;IAAY,CAAA;GACpD;;CACO,CAAA;AAElB"}
+{"version":3,"file":"index14.cjs","names":[],"sources":["../src/components/pill/Pill.tsx"],"sourcesContent":["/**\n * Compact label component for status chips and tags.\n *\n * @remarks\n * Supports tone and size presets, and can render any inline element.\n *\n * @param props.as - Element to render (defaults to `span`).\n * @param props.tone - Visual tone variant.\n * @param props.size - Size preset.\n * @param props.icon - Optional leading icon.\n */\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cx } from \"../../utils/cx\";\nimport styles from \"./pill.module.css\";\n\nexport type PillTone = \"neutral\" | \"success\" | \"warning\" | \"info\" | \"danger\";\nexport type PillSize = \"sm\" | \"md\";\n\ntype PillElement = \"span\" | \"div\" | \"button\";\n\nexport type PillProps = HTMLAttributes<HTMLElement> & {\n  /** Optional rendered element; defaults to `span`. */\n  as?: PillElement;\n  /** Visual tone; adjusts color and border. */\n  tone?: PillTone;\n  /** Size preset. */\n  size?: PillSize;\n  /** Leading icon node (not focusable). */\n  icon?: ReactNode;\n};\n\nexport function Pill({\n  as,\n  tone = \"neutral\",\n  size = \"md\",\n  icon,\n  className,\n  children,\n  ...rest\n}: PillProps) {\n  const Component: PillElement = as ?? \"span\";\n  const classes = cx(styles.pill, styles[`tone-${tone}`], styles[`size-${size}`], className);\n\n  return (\n    <Component className={classes} {...rest}>\n      {icon ? (\n        <span className={styles.icon} aria-hidden=\"true\">\n          {icon}\n        </span>\n      ) : null}\n      <span className={styles.content}>{children}</span>\n    </Component>\n  );\n}\n"],"mappings":";;;;AA+BA,SAAgB,KAAK,EACnB,IACA,OAAO,WACP,OAAO,MACP,MACA,WACA,UACA,GAAG,QACS;CAIZ,OACE,iBAAA,GAAA,kBAAA,KAAA,CAJ6B,MAAM,QAInC;EAAW,WAHG,WAAA,GAAG,oBAAA,QAAO,MAAM,oBAAA,QAAO,QAAQ,SAAS,oBAAA,QAAO,QAAQ,SAAS,SAGxD;EAAS,GAAI;YAAnC,CACG,OACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GAAM,WAAW,oBAAA,QAAO;GAAM,eAAY;aACvC;EACG,CAAA,IACJ,MACJ,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GAAM,WAAW,oBAAA,QAAO;GAAU;EAAe,CAAA,CACxC;;AAEf"}

package/dist/index14.js

@@ -1,17 +1,41 @@
-//#region src/components/alert/alert.module.css
-var alert = "uzi-alert-module__alert__7Bt6c";
-var success = "uzi-alert-module__success__apdFG";
-var error = "uzi-alert-module__error__KLgi1";
-var warning = "uzi-alert-module__warning__F4fpk";
-var info = "uzi-alert-module__info__1IKHt";
-var alert_module_default = {
-	alert,
-	success,
-	error,
-	warning,
-	info
+//#region src/components/modal/modal.module.css
+var portalLayer = "uzi-modal-module__portalLayer__t7blc";
+var backdrop = "uzi-modal-module__backdrop__IMd3b";
+var backdropFadeIn = "uzi-modal-module__backdropFadeIn__GNJdx";
+var backdropFadeOut = "uzi-modal-module__backdropFadeOut__R-3K5";
+var overlayContent = "uzi-modal-module__overlayContent__0DtbP";
+var modalContentIn = "uzi-modal-module__modalContentIn__fub8M";
+var modalContentOut = "uzi-modal-module__modalContentOut__elTJ3";
+var modal = "uzi-modal-module__modal__Mao59";
+var header = "uzi-modal-module__header__PmCaO";
+var titles = "uzi-modal-module__titles__IboyQ";
+var title = "uzi-modal-module__title__Zd7pL";
+var subtitle = "uzi-modal-module__subtitle__t-LRK";
+var closeButton = "uzi-modal-module__closeButton__GTiZr";
+var body = "uzi-modal-module__body__km6FQ";
+var footer = "uzi-modal-module__footer__jWLTv";
+var modal_module_default = {
+	portalLayer,
+	backdrop,
+	backdropFadeIn,
+	backdropFadeOut,
+	overlayContent,
+	modalContentIn,
+	modalContentOut,
+	modal,
+	"size-sm": "uzi-modal-module__size-sm__Uu9je",
+	"size-md": "uzi-modal-module__size-md__TiiWy",
+	"size-lg": "uzi-modal-module__size-lg__BrTIO",
+	"size-xl": "uzi-modal-module__size-xl__sj0mh",
+	header,
+	titles,
+	title,
+	subtitle,
+	closeButton,
+	body,
+	footer
 };
 //#endregion
-export { alert, alert_module_default as default, error, info, success, warning };
+export { backdrop, backdropFadeIn, backdropFadeOut, body, closeButton, modal_module_default as default, footer, header, modal, modalContentIn, modalContentOut, overlayContent, portalLayer, subtitle, title, titles };
 
 //# sourceMappingURL=index14.js.map

package/dist/index14.js.map

@@ -1 +1 @@
-{"version":3,"file":"index14.js","names":[],"sources":["../src/components/alert/alert.module.css"],"sourcesContent":[".alert {\n  display: flex;\n  align-items: flex-start;\n  gap: 0.5rem;\n  border-radius: 0.375rem;\n  border: 1px solid;\n  padding: 0.625rem 0.875rem;\n  font-size: 0.875rem;\n  line-height: 1.5;\n}\n\n.success {\n  border-color: color-mix(in srgb, var(--success) 35%, transparent);\n  background: color-mix(in srgb, var(--success) 10%, transparent);\n  color: color-mix(in srgb, var(--success) 90%, var(--foreground));\n}\n\n.error {\n  border-color: color-mix(in srgb, var(--destructive) 35%, transparent);\n  background: color-mix(in srgb, var(--destructive) 10%, transparent);\n  color: color-mix(in srgb, var(--destructive) 90%, var(--foreground));\n}\n\n.warning {\n  border-color: color-mix(in srgb, var(--warning) 35%, transparent);\n  background: color-mix(in srgb, var(--warning) 10%, transparent);\n  color: color-mix(in srgb, var(--warning) 90%, var(--foreground));\n}\n\n.info {\n  border-color: color-mix(in srgb, var(--primary) 35%, transparent);\n  background: color-mix(in srgb, var(--primary) 10%, transparent);\n  color: color-mix(in srgb, var(--primary) 90%, var(--foreground));\n}\n"],"mappings":""}
+{"version":3,"file":"index14.js","names":[],"sources":["../src/components/modal/modal.module.css"],"sourcesContent":[".portalLayer {\n  --uzi-modal-viewport-margin: 32px;\n\n  position: fixed;\n  inset: 0;\n  z-index: var(--uzi-modal-z-index, 1000);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 16px;\n}\n\n.backdrop {\n  position: absolute;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.55);\n}\n\n.backdrop[data-state=\"open\"] {\n  animation: backdropFadeIn 160ms ease;\n}\n\n.backdrop[data-state=\"closed\"] {\n  animation: backdropFadeOut 140ms ease;\n}\n\n.overlayContent {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  max-width: 100%;\n  max-height: 100%;\n  outline: none;\n}\n\n.overlayContent[data-state=\"open\"] {\n  animation: modalContentIn 180ms ease;\n}\n\n.overlayContent[data-state=\"closed\"] {\n  animation: modalContentOut 140ms ease;\n}\n\n.modal {\n  background: var(--background);\n  border: 1px solid var(--border);\n  border-radius: 14px;\n  max-height: calc(100vh - var(--uzi-modal-viewport-margin));\n  max-height: calc(100dvh - var(--uzi-modal-viewport-margin));\n  overflow: hidden;\n  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);\n  display: flex;\n  flex-direction: column;\n  gap: 0;\n}\n\n/* Size variants */\n.size-sm { width: min(380px, calc(100vw - var(--uzi-modal-viewport-margin))); }\n.size-md { width: min(500px, calc(100vw - var(--uzi-modal-viewport-margin))); }\n.size-lg { width: min(640px, calc(100vw - var(--uzi-modal-viewport-margin))); }\n.size-xl { width: min(900px, calc(100vw - var(--uzi-modal-viewport-margin))); }\n\n.header {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 12px;\n  padding: 24px 24px 0;\n  margin-bottom: 16px;\n}\n\n.titles {\n  display: flex;\n  flex-direction: column;\n  gap: 3px;\n}\n\n.title {\n  font-weight: 700;\n  font-size: 16px;\n  color: var(--foreground);\n  line-height: 1.3;\n}\n\n.subtitle {\n  font-size: 13px;\n  color: var(--muted-foreground);\n  line-height: 1.4;\n}\n\n.closeButton {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  flex-shrink: 0;\n  background: transparent;\n  border: 1px solid transparent;\n  border-radius: 6px;\n  color: var(--muted-foreground);\n  cursor: pointer;\n  transition: background 0.12s, color 0.12s;\n  padding: 0;\n}\n\n.closeButton:hover {\n  background: color-mix(in srgb, var(--foreground) 7%, transparent);\n  color: var(--foreground);\n}\n\n.closeButton:focus-visible {\n  outline: var(--focus-ring);\n  outline-offset: var(--focus-ring-offset);\n}\n\n.body {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  min-height: 0;\n  overflow-y: auto;\n  padding: 0 24px;\n}\n\n.body:last-child {\n  padding-bottom: 24px;\n}\n\n.footer {\n  display: flex;\n  gap: 8px;\n  padding: 0 24px 24px;\n  margin-top: 20px;\n}\n\n@keyframes backdropFadeIn {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes backdropFadeOut {\n  from {\n    opacity: 1;\n  }\n\n  to {\n    opacity: 0;\n  }\n}\n\n@keyframes modalContentIn {\n  from {\n    opacity: 0;\n    transform: translateY(6px) scale(0.98);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n}\n\n@keyframes modalContentOut {\n  from {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n\n  to {\n    opacity: 0;\n    transform: translateY(4px) scale(0.98);\n  }\n}\n"],"mappings":""}

package/dist/index15.cjs

@@ -1,22 +1,56 @@
-//#region src/components/alert/alert.module.css
-var alert = "uzi-alert-module__alert__7Bt6c";
-var success = "uzi-alert-module__success__apdFG";
-var error = "uzi-alert-module__error__KLgi1";
-var warning = "uzi-alert-module__warning__F4fpk";
-var info = "uzi-alert-module__info__1IKHt";
-var alert_module_default = {
-	alert,
-	success,
-	error,
-	warning,
-	info
+//#region src/components/modal/modal.module.css
+var portalLayer = "uzi-modal-module__portalLayer__t7blc";
+var backdrop = "uzi-modal-module__backdrop__IMd3b";
+var backdropFadeIn = "uzi-modal-module__backdropFadeIn__GNJdx";
+var backdropFadeOut = "uzi-modal-module__backdropFadeOut__R-3K5";
+var overlayContent = "uzi-modal-module__overlayContent__0DtbP";
+var modalContentIn = "uzi-modal-module__modalContentIn__fub8M";
+var modalContentOut = "uzi-modal-module__modalContentOut__elTJ3";
+var modal = "uzi-modal-module__modal__Mao59";
+var header = "uzi-modal-module__header__PmCaO";
+var titles = "uzi-modal-module__titles__IboyQ";
+var title = "uzi-modal-module__title__Zd7pL";
+var subtitle = "uzi-modal-module__subtitle__t-LRK";
+var closeButton = "uzi-modal-module__closeButton__GTiZr";
+var body = "uzi-modal-module__body__km6FQ";
+var footer = "uzi-modal-module__footer__jWLTv";
+var modal_module_default = {
+	portalLayer,
+	backdrop,
+	backdropFadeIn,
+	backdropFadeOut,
+	overlayContent,
+	modalContentIn,
+	modalContentOut,
+	modal,
+	"size-sm": "uzi-modal-module__size-sm__Uu9je",
+	"size-md": "uzi-modal-module__size-md__TiiWy",
+	"size-lg": "uzi-modal-module__size-lg__BrTIO",
+	"size-xl": "uzi-modal-module__size-xl__sj0mh",
+	header,
+	titles,
+	title,
+	subtitle,
+	closeButton,
+	body,
+	footer
 };
 //#endregion
-exports.alert = alert;
-exports.default = alert_module_default;
-exports.error = error;
-exports.info = info;
-exports.success = success;
-exports.warning = warning;
+exports.backdrop = backdrop;
+exports.backdropFadeIn = backdropFadeIn;
+exports.backdropFadeOut = backdropFadeOut;
+exports.body = body;
+exports.closeButton = closeButton;
+exports.default = modal_module_default;
+exports.footer = footer;
+exports.header = header;
+exports.modal = modal;
+exports.modalContentIn = modalContentIn;
+exports.modalContentOut = modalContentOut;
+exports.overlayContent = overlayContent;
+exports.portalLayer = portalLayer;
+exports.subtitle = subtitle;
+exports.title = title;
+exports.titles = titles;
 
 //# sourceMappingURL=index15.cjs.map

package/dist/index15.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index15.cjs","names":[],"sources":["../src/components/alert/alert.module.css"],"sourcesContent":[".alert {\n  display: flex;\n  align-items: flex-start;\n  gap: 0.5rem;\n  border-radius: 0.375rem;\n  border: 1px solid;\n  padding: 0.625rem 0.875rem;\n  font-size: 0.875rem;\n  line-height: 1.5;\n}\n\n.success {\n  border-color: color-mix(in srgb, var(--success) 35%, transparent);\n  background: color-mix(in srgb, var(--success) 10%, transparent);\n  color: color-mix(in srgb, var(--success) 90%, var(--foreground));\n}\n\n.error {\n  border-color: color-mix(in srgb, var(--destructive) 35%, transparent);\n  background: color-mix(in srgb, var(--destructive) 10%, transparent);\n  color: color-mix(in srgb, var(--destructive) 90%, var(--foreground));\n}\n\n.warning {\n  border-color: color-mix(in srgb, var(--warning) 35%, transparent);\n  background: color-mix(in srgb, var(--warning) 10%, transparent);\n  color: color-mix(in srgb, var(--warning) 90%, var(--foreground));\n}\n\n.info {\n  border-color: color-mix(in srgb, var(--primary) 35%, transparent);\n  background: color-mix(in srgb, var(--primary) 10%, transparent);\n  color: color-mix(in srgb, var(--primary) 90%, var(--foreground));\n}\n"],"mappings":""}
+{"version":3,"file":"index15.cjs","names":[],"sources":["../src/components/modal/modal.module.css"],"sourcesContent":[".portalLayer {\n  --uzi-modal-viewport-margin: 32px;\n\n  position: fixed;\n  inset: 0;\n  z-index: var(--uzi-modal-z-index, 1000);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 16px;\n}\n\n.backdrop {\n  position: absolute;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.55);\n}\n\n.backdrop[data-state=\"open\"] {\n  animation: backdropFadeIn 160ms ease;\n}\n\n.backdrop[data-state=\"closed\"] {\n  animation: backdropFadeOut 140ms ease;\n}\n\n.overlayContent {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  max-width: 100%;\n  max-height: 100%;\n  outline: none;\n}\n\n.overlayContent[data-state=\"open\"] {\n  animation: modalContentIn 180ms ease;\n}\n\n.overlayContent[data-state=\"closed\"] {\n  animation: modalContentOut 140ms ease;\n}\n\n.modal {\n  background: var(--background);\n  border: 1px solid var(--border);\n  border-radius: 14px;\n  max-height: calc(100vh - var(--uzi-modal-viewport-margin));\n  max-height: calc(100dvh - var(--uzi-modal-viewport-margin));\n  overflow: hidden;\n  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);\n  display: flex;\n  flex-direction: column;\n  gap: 0;\n}\n\n/* Size variants */\n.size-sm { width: min(380px, calc(100vw - var(--uzi-modal-viewport-margin))); }\n.size-md { width: min(500px, calc(100vw - var(--uzi-modal-viewport-margin))); }\n.size-lg { width: min(640px, calc(100vw - var(--uzi-modal-viewport-margin))); }\n.size-xl { width: min(900px, calc(100vw - var(--uzi-modal-viewport-margin))); }\n\n.header {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 12px;\n  padding: 24px 24px 0;\n  margin-bottom: 16px;\n}\n\n.titles {\n  display: flex;\n  flex-direction: column;\n  gap: 3px;\n}\n\n.title {\n  font-weight: 700;\n  font-size: 16px;\n  color: var(--foreground);\n  line-height: 1.3;\n}\n\n.subtitle {\n  font-size: 13px;\n  color: var(--muted-foreground);\n  line-height: 1.4;\n}\n\n.closeButton {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  flex-shrink: 0;\n  background: transparent;\n  border: 1px solid transparent;\n  border-radius: 6px;\n  color: var(--muted-foreground);\n  cursor: pointer;\n  transition: background 0.12s, color 0.12s;\n  padding: 0;\n}\n\n.closeButton:hover {\n  background: color-mix(in srgb, var(--foreground) 7%, transparent);\n  color: var(--foreground);\n}\n\n.closeButton:focus-visible {\n  outline: var(--focus-ring);\n  outline-offset: var(--focus-ring-offset);\n}\n\n.body {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  min-height: 0;\n  overflow-y: auto;\n  padding: 0 24px;\n}\n\n.body:last-child {\n  padding-bottom: 24px;\n}\n\n.footer {\n  display: flex;\n  gap: 8px;\n  padding: 0 24px 24px;\n  margin-top: 20px;\n}\n\n@keyframes backdropFadeIn {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes backdropFadeOut {\n  from {\n    opacity: 1;\n  }\n\n  to {\n    opacity: 0;\n  }\n}\n\n@keyframes modalContentIn {\n  from {\n    opacity: 0;\n    transform: translateY(6px) scale(0.98);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n}\n\n@keyframes modalContentOut {\n  from {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n\n  to {\n    opacity: 0;\n    transform: translateY(4px) scale(0.98);\n  }\n}\n"],"mappings":""}