@etus/ui 0.4.0-beta.12 → 0.4.0-beta.14

package/dist/chunk-FES2I2OT.js

@@ -0,0 +1,3 @@
+
+//# sourceMappingURL=chunk-FES2I2OT.js.map
+//# sourceMappingURL=chunk-FES2I2OT.js.map

package/dist/{chunk-6Z73ZQOP.js.map → chunk-FES2I2OT.js.map}

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"chunk-6Z73ZQOP.js"}
+{"version":3,"sources":[],"names":[],"mappings":"","file":"chunk-FES2I2OT.js"}

package/dist/chunk-K4MYVFWQ.js

@@ -0,0 +1,109 @@
+import { FeaturedIcon } from './chunk-PK5O62XD.js';
+import { cn } from './chunk-HRNDJU7D.js';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var featureItemVariants = cva("flex flex-col items-start text-left", {
+  variants: {
+    variant: {
+      badge: "gap-[var(--feature-item-root-gap)]",
+      "feature-icon": "gap-[var(--feature-item-root-gap)]",
+      icon: "gap-[var(--feature-item-body-gap)]"
+    }
+  },
+  defaultVariants: {
+    variant: "feature-icon"
+  }
+});
+function FeatureItem({
+  badge,
+  className,
+  description,
+  icon,
+  iconTone = "default",
+  title,
+  variant = "feature-icon",
+  ...props
+}) {
+  const isIconVariant = variant === "icon";
+  const titleNode = /* @__PURE__ */ jsx(
+    "p",
+    {
+      style: {
+        fontWeight: "var(--feature-item-title-font-weight)",
+        lineHeight: "var(--feature-item-title-line-height)"
+      },
+      className: "text-[length:var(--feature-item-title-font-size)] text-[color:var(--feature-item-title-color)]",
+      "data-slot": "feature-item-title",
+      children: title
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(featureItemVariants({ variant }), className),
+      "data-slot": "feature-item",
+      "data-variant": variant,
+      ...props,
+      children: [
+        variant === "feature-icon" && icon ? /* @__PURE__ */ jsx(FeaturedIcon, { tone: iconTone, children: icon }) : null,
+        variant === "badge" && badge ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              fontWeight: "var(--feature-item-badge-font-weight)",
+              lineHeight: "var(--feature-item-badge-line-height)"
+            },
+            className: "inline-flex w-fit items-center rounded-[var(--feature-item-badge-radius)] border border-[color:var(--feature-item-badge-border)] bg-[color:var(--feature-item-badge-bg)] px-[var(--feature-item-badge-padding-x)] py-[var(--feature-item-badge-padding-y)] text-[length:var(--feature-item-badge-font-size)] text-[color:var(--feature-item-badge-fg)]",
+            "data-slot": "feature-item-badge",
+            children: badge
+          }
+        ) : null,
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "flex flex-col items-start gap-[var(--feature-item-body-gap)]",
+            "data-slot": "feature-item-body",
+            children: [
+              isIconVariant ? /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: "flex items-center gap-[var(--feature-item-body-gap)]",
+                  "data-slot": "feature-item-title-row",
+                  children: [
+                    icon ? /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        "aria-hidden": "true",
+                        className: "inline-flex shrink-0 items-center justify-center text-[color:var(--feature-item-title-color)] [&_svg]:size-[var(--feature-item-icon-size)]",
+                        "data-slot": "feature-item-icon",
+                        children: icon
+                      }
+                    ) : null,
+                    titleNode
+                  ]
+                }
+              ) : titleNode,
+              description ? /* @__PURE__ */ jsx(
+                "p",
+                {
+                  style: {
+                    fontWeight: "var(--feature-item-description-font-weight)",
+                    lineHeight: "var(--feature-item-description-line-height)"
+                  },
+                  className: "text-[length:var(--feature-item-description-font-size)] text-[color:var(--feature-item-description-color)]",
+                  "data-slot": "feature-item-description",
+                  children: description
+                }
+              ) : null
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { FeatureItem, featureItemVariants };
+//# sourceMappingURL=chunk-K4MYVFWQ.js.map
+//# sourceMappingURL=chunk-K4MYVFWQ.js.map

package/dist/chunk-K4MYVFWQ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/FeatureItem/FeatureItem.variants.ts","../src/components/data-display/FeatureItem/FeatureItem.tsx"],"names":[],"mappings":";;;;;AAQO,IAAM,mBAAA,GAAsB,IAAI,qCAAA,EAAuC;AAAA,EAC5E,QAAA,EAAU;AAAA,IACR,OAAA,EAAS;AAAA,MACP,KAAA,EAAO,oCAAA;AAAA,MACP,cAAA,EAAgB,oCAAA;AAAA,MAChB,IAAA,EAAM;AAAA;AACR,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,OAAA,EAAS;AAAA;AAEb,CAAC;ACHD,SAAS,WAAA,CAAY;AAAA,EACnB,KAAA;AAAA,EACA,SAAA;AAAA,EACA,WAAA;AAAA,EACA,IAAA;AAAA,EACA,QAAA,GAAW,SAAA;AAAA,EACX,KAAA;AAAA,EACA,OAAA,GAAU,cAAA;AAAA,EACV,GAAG;AACL,CAAA,EAAqB;AACnB,EAAA,MAAM,gBAAgB,OAAA,KAAY,MAAA;AAElC,EAAA,MAAM,SAAA,mBACJ,GAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO;AAAA,QACL,UAAA,EAAY,uCAAA;AAAA,QACZ,UAAA,EAAY;AAAA,OACd;AAAA,MACA,SAAA,EAAU,gGAAA;AAAA,MACV,WAAA,EAAU,oBAAA;AAAA,MAET,QAAA,EAAA;AAAA;AAAA,GACH;AAGF,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAW,EAAA,CAAG,mBAAA,CAAoB,EAAE,OAAA,EAAS,GAAG,SAAS,CAAA;AAAA,MACzD,WAAA,EAAU,cAAA;AAAA,MACV,cAAA,EAAc,OAAA;AAAA,MACb,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,OAAA,KAAY,kBAAkB,IAAA,mBAC7B,GAAA,CAAC,gBAAa,IAAA,EAAM,QAAA,EAAW,gBAAK,CAAA,GAClC,IAAA;AAAA,QAEH,OAAA,KAAY,WAAW,KAAA,mBACtB,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,KAAA,EAAO;AAAA,cACL,UAAA,EAAY,uCAAA;AAAA,cACZ,UAAA,EAAY;AAAA,aACd;AAAA,YACA,SAAA,EAAU,wVAAA;AAAA,YACV,WAAA,EAAU,oBAAA;AAAA,YAET,QAAA,EAAA;AAAA;AAAA,SACH,GACE,IAAA;AAAA,wBAEJ,IAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,8DAAA;AAAA,YACV,WAAA,EAAU,mBAAA;AAAA,YAET,QAAA,EAAA;AAAA,cAAA,aAAA,mBACC,IAAA;AAAA,gBAAC,KAAA;AAAA,gBAAA;AAAA,kBACC,SAAA,EAAU,sDAAA;AAAA,kBACV,WAAA,EAAU,wBAAA;AAAA,kBAET,QAAA,EAAA;AAAA,oBAAA,IAAA,mBACC,GAAA;AAAA,sBAAC,MAAA;AAAA,sBAAA;AAAA,wBACC,aAAA,EAAY,MAAA;AAAA,wBACZ,SAAA,EAAU,4IAAA;AAAA,wBACV,WAAA,EAAU,mBAAA;AAAA,wBAET,QAAA,EAAA;AAAA;AAAA,qBACH,GACE,IAAA;AAAA,oBACH;AAAA;AAAA;AAAA,eACH,GAEA,SAAA;AAAA,cAGD,WAAA,mBACC,GAAA;AAAA,gBAAC,GAAA;AAAA,gBAAA;AAAA,kBACC,KAAA,EAAO;AAAA,oBACL,UAAA,EAAY,6CAAA;AAAA,oBACZ,UAAA,EAAY;AAAA,mBACd;AAAA,kBACA,SAAA,EAAU,4GAAA;AAAA,kBACV,WAAA,EAAU,0BAAA;AAAA,kBAET,QAAA,EAAA;AAAA;AAAA,eACH,GACE;AAAA;AAAA;AAAA;AACN;AAAA;AAAA,GACF;AAEJ","file":"chunk-K4MYVFWQ.js","sourcesContent":["import { cva } from \"class-variance-authority\"\n\n/**\n * FeatureItem root layout. The leading visual (FeaturedIcon / Badge) is stacked\n * above the text body for the `feature-icon` and `badge` styles, separated by\n * `--feature-item-root-gap`. The `icon` style has no stacked leading element, so\n * its single body uses the tighter `--feature-item-body-gap`.\n */\nexport const featureItemVariants = cva(\"flex flex-col items-start text-left\", {\n  variants: {\n    variant: {\n      badge: \"gap-[var(--feature-item-root-gap)]\",\n      \"feature-icon\": \"gap-[var(--feature-item-root-gap)]\",\n      icon: \"gap-[var(--feature-item-body-gap)]\",\n    },\n  },\n  defaultVariants: {\n    variant: \"feature-icon\",\n  },\n})\n","import type { FeatureItemProps } from \"./FeatureItem.types\"\n\nimport { cn } from \"../../../lib/utils\"\nimport { FeaturedIcon } from \"../../primitives/FeaturedIcon\"\nimport { featureItemVariants } from \"./FeatureItem.variants\"\n\n/**\n * FeatureItem is a promotional card pairing a leading visual with a title and\n * description. The leading visual is selected via `variant`:\n *\n * - `feature-icon` — an icon inside a FeaturedIcon plate, stacked above the text\n * - `badge` — a status badge, stacked above the text\n * - `icon` — a small icon rendered inline, to the left of the title\n *\n * All spacing, color and type come from `--feature-item-*` design tokens.\n */\nfunction FeatureItem({\n  badge,\n  className,\n  description,\n  icon,\n  iconTone = \"default\",\n  title,\n  variant = \"feature-icon\",\n  ...props\n}: FeatureItemProps) {\n  const isIconVariant = variant === \"icon\"\n\n  const titleNode = (\n    <p\n      style={{\n        fontWeight: \"var(--feature-item-title-font-weight)\",\n        lineHeight: \"var(--feature-item-title-line-height)\",\n      }}\n      className=\"text-[length:var(--feature-item-title-font-size)] text-[color:var(--feature-item-title-color)]\"\n      data-slot=\"feature-item-title\"\n    >\n      {title}\n    </p>\n  )\n\n  return (\n    <div\n      className={cn(featureItemVariants({ variant }), className)}\n      data-slot=\"feature-item\"\n      data-variant={variant}\n      {...props}\n    >\n      {variant === \"feature-icon\" && icon ? (\n        <FeaturedIcon tone={iconTone}>{icon}</FeaturedIcon>\n      ) : null}\n\n      {variant === \"badge\" && badge ? (\n        <span\n          style={{\n            fontWeight: \"var(--feature-item-badge-font-weight)\",\n            lineHeight: \"var(--feature-item-badge-line-height)\",\n          }}\n          className=\"inline-flex w-fit items-center rounded-[var(--feature-item-badge-radius)] border border-[color:var(--feature-item-badge-border)] bg-[color:var(--feature-item-badge-bg)] px-[var(--feature-item-badge-padding-x)] py-[var(--feature-item-badge-padding-y)] text-[length:var(--feature-item-badge-font-size)] text-[color:var(--feature-item-badge-fg)]\"\n          data-slot=\"feature-item-badge\"\n        >\n          {badge}\n        </span>\n      ) : null}\n\n      <div\n        className=\"flex flex-col items-start gap-[var(--feature-item-body-gap)]\"\n        data-slot=\"feature-item-body\"\n      >\n        {isIconVariant ? (\n          <div\n            className=\"flex items-center gap-[var(--feature-item-body-gap)]\"\n            data-slot=\"feature-item-title-row\"\n          >\n            {icon ? (\n              <span\n                aria-hidden=\"true\"\n                className=\"inline-flex shrink-0 items-center justify-center text-[color:var(--feature-item-title-color)] [&_svg]:size-[var(--feature-item-icon-size)]\"\n                data-slot=\"feature-item-icon\"\n              >\n                {icon}\n              </span>\n            ) : null}\n            {titleNode}\n          </div>\n        ) : (\n          titleNode\n        )}\n\n        {description ? (\n          <p\n            style={{\n              fontWeight: \"var(--feature-item-description-font-weight)\",\n              lineHeight: \"var(--feature-item-description-line-height)\",\n            }}\n            className=\"text-[length:var(--feature-item-description-font-size)] text-[color:var(--feature-item-description-color)]\"\n            data-slot=\"feature-item-description\"\n          >\n            {description}\n          </p>\n        ) : null}\n      </div>\n    </div>\n  )\n}\n\nexport { FeatureItem, featureItemVariants }\n"]}