@tomny-dev/uzi 0.2.4 → 0.2.6-pr.22.67.1.9e9e57c

package/dist/index9.cjs

@@ -0,0 +1,20 @@
+//#region src/components/card/card.module.css
+var card = "uzi-card-module__card__ZPFTz";
+var interactive = "uzi-card-module__interactive__zlPML";
+var card_module_default = {
+	card,
+	"tone-default": "uzi-card-module__tone-default__7Ujf9",
+	"tone-muted": "uzi-card-module__tone-muted__RQy5B",
+	"tone-contrast": "uzi-card-module__tone-contrast__JpFxL",
+	interactive,
+	"padding-none": "uzi-card-module__padding-none__LXdx-",
+	"padding-sm": "uzi-card-module__padding-sm__-Ub1s",
+	"padding-md": "uzi-card-module__padding-md__kUf46",
+	"padding-lg": "uzi-card-module__padding-lg__a5mWP"
+};
+//#endregion
+exports.card = card;
+exports.default = card_module_default;
+exports.interactive = interactive;
+
+//# sourceMappingURL=index9.cjs.map

package/dist/index9.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index9.cjs","names":[],"sources":["../src/components/card/card.module.css"],"sourcesContent":[".card {\n  position: relative;\n  overflow: visible;\n  border-radius: var(--ts-card-radius, 12px);\n  border: 1px solid var(--ts-card-border, var(--border));\n  background: var(--ts-card-bg, var(--panel));\n  color: var(--ts-card-fg, var(--foreground));\n  box-shadow: var(--ts-card-shadow, 0 16px 36px rgba(0, 0, 0, 0.28));\n  padding: var(--ts-card-padding, 16px);\n  transition:\n    transform 140ms ease,\n    box-shadow 140ms ease,\n    border-color 140ms ease,\n    background-color 140ms ease;\n}\n\n.tone-default {\n  --ts-card-bg: var(--panel);\n  --ts-card-border: var(--border);\n  --ts-card-shadow: 0 16px 36px rgba(0, 0, 0, 0.28);\n}\n\n.tone-muted {\n  --ts-card-bg: var(--muted);\n  --ts-card-border: var(--border);\n  --ts-card-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);\n}\n\n.tone-contrast {\n  --ts-card-bg: var(--ts-card-contrast-bg, color-mix(in srgb, var(--background) 60%, black));\n  --ts-card-border: var(--border);\n  --ts-card-shadow: 0 18px 50px rgba(0, 0, 0, 0.32);\n}\n\n.interactive {\n  cursor: default;\n}\n\n.interactive:hover {\n  transform: translateY(-1px);\n  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.32);\n  border-color: var(--ts-card-hover-border, color-mix(in srgb, var(--primary) 40%, transparent));\n}\n\n.interactive:focus-within {\n  outline: var(--focus-ring);\n  outline-offset: var(--focus-ring-offset);\n}\n\n.padding-none { --ts-card-padding: 0; }\n.padding-sm   { --ts-card-padding: 10px; }\n.padding-md   { --ts-card-padding: 16px; }\n.padding-lg   { --ts-card-padding: 20px; }\n"],"mappings":""}

package/dist/index9.js

@@ -0,0 +1,26 @@
+import { cx } from "./index3.js";
+import card_module_default from "./index8.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/card/Card.tsx
+function Card({ as, tone = "default", padding = "md", interactive = false, className, children, ...rest }) {
+	const Component = as ?? "div";
+	const TONE_CLASS = {
+		default: null,
+		muted: "tone-muted",
+		contrast: "tone-contrast"
+	};
+	return /* @__PURE__ */ jsx(Component, {
+		className: cx(card_module_default.card, TONE_CLASS[tone] ? card_module_default[TONE_CLASS[tone]] : null, card_module_default[{
+			none: "padding-none",
+			sm: "padding-sm",
+			md: "padding-md",
+			lg: "padding-lg"
+		}[padding]], interactive && card_module_default.interactive, className),
+		...rest,
+		children
+	});
+}
+//#endregion
+export { Card };
+
+//# sourceMappingURL=index9.js.map

package/dist/index9.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index9.js","names":[],"sources":["../src/components/card/Card.tsx"],"sourcesContent":["/**\n * Lightweight container component used for panels across the app.\n *\n * @remarks\n * Supports tone variants, padding presets, and an optional interactive affordance.\n *\n * @param props.as - Semantic element to render (defaults to `div`).\n * @param props.tone - Visual tone variant.\n * @param props.padding - Padding preset.\n * @param props.interactive - Enables hover/focus affordance.\n */\nimport type { HTMLAttributes } from \"react\";\nimport { cx } from \"../../utils/cx\";\nimport styles from \"./card.module.css\";\n\nexport type CardTone = \"default\" | \"muted\" | \"contrast\";\nexport type CardPadding = \"none\" | \"sm\" | \"md\" | \"lg\";\n\ntype CardElement = \"div\" | \"section\" | \"article\";\n\nexport type CardProps = HTMLAttributes<HTMLElement> & {\n  /** Optional semantic element type. Defaults to `div`. */\n  as?: CardElement;\n  /** Visual tone; drives background/border CSS vars. */\n  tone?: CardTone;\n  /** Padding preset; maps to CSS variables so consumers can override globally. */\n  padding?: CardPadding;\n  /** Adds hover/focus affordance (lift + outline). */\n  interactive?: boolean;\n};\n\nexport function Card({\n  as,\n  tone = \"default\",\n  padding = \"md\",\n  interactive = false,\n  className,\n  children,\n  ...rest\n}: CardProps) {\n  const Component: CardElement = as ?? \"div\";\n  const TONE_CLASS: Record<CardTone, string | null> = { default: null, muted: \"tone-muted\", contrast: \"tone-contrast\" };\n  const PADDING_CLASS: Record<CardPadding, string> = { none: \"padding-none\", sm: \"padding-sm\", md: \"padding-md\", lg: \"padding-lg\" };\n  const classes = cx(\n    styles.card,\n    TONE_CLASS[tone] ? styles[TONE_CLASS[tone]] : null,\n    styles[PADDING_CLASS[padding]],\n    interactive && styles.interactive,\n    className,\n  );\n\n  return (\n    <Component className={classes} {...rest}>\n      {children}\n    </Component>\n  );\n}\n"],"mappings":";;;;AA+BA,SAAgB,KAAK,EACnB,IACA,OAAO,WACP,UAAU,MACV,cAAc,OACd,WACA,UACA,GAAG,QACS;CACZ,MAAM,YAAyB,MAAM;CACrC,MAAM,aAA8C;EAAE,SAAS;EAAM,OAAO;EAAc,UAAU;CAAgB;CAUpH,OACE,oBAAC,WAAD;EAAW,WATG,GACd,oBAAO,MACP,WAAW,QAAQ,oBAAO,WAAW,SAAS,MAC9C,oBAAO;GAJ4C,MAAM;GAAgB,IAAI;GAAc,IAAI;GAAc,IAAI;EAI1G,EAAc,WACrB,eAAe,oBAAO,aACtB,SAIsB;EAAS,GAAI;EAChC;CACQ,CAAA;AAEf"}