@fuf-stack/pixels 1.8.0 → 1.10.0

package/dist/{index.css → Json/theme.css}

@@ -1,4 +1,3 @@
-/* src/Json/theme.css */
 :root {
   --w-rjv-font-family: monospace;
   --w-rjv-color: #002b36;
@@ -7,7 +6,7 @@
   --w-rjv-line-color: #ebebeb;
   --w-rjv-arrow-color: var(--w-rjv-color);
   --w-rjv-edit-color: var(--w-rjv-color);
-  --w-rjv-info-color: rgba(0, 0, 0, 0.3);
+  --w-rjv-info-color: #0000004d;
   --w-rjv-update-color: #ebcb8b;
   --w-rjv-copied-color: #002b36;
   --w-rjv-copied-success-color: #28a745;
@@ -27,16 +26,16 @@
   --w-rjv-type-nan-color: #859900;
   --w-rjv-type-undefined-color: #586e75;
 }
-html.dark,
-:root[data-theme=dark] {
+
+html.dark, :root[data-theme="dark"] {
   --w-rjv-font-family: monospace;
   --w-rjv-color: #9cdcfe;
   --w-rjv-key-string: #9cdcfe;
   --w-rjv-background-color: unset;
-  --w-rjv-line-color: rgba(54, 51, 66, 0.5);
+  --w-rjv-line-color: #36334280;
   --w-rjv-arrow-color: #838383;
   --w-rjv-edit-color: var(--w-rjv-color);
-  --w-rjv-info-color: rgba(156, 156, 156, 0.48);
+  --w-rjv-info-color: #9c9c9c7a;
   --w-rjv-update-color: #9cdcfe;
   --w-rjv-copied-color: #9cdcfe;
   --w-rjv-copied-success-color: #28a745;
@@ -56,4 +55,3 @@ html.dark,
   --w-rjv-type-nan-color: #859900;
   --w-rjv-type-undefined-color: #569cd6;
 }
-/*# sourceMappingURL=index.css.map */

package/dist/Label/Label.cjs

@@ -0,0 +1,84 @@
+require("../_virtual/_rolldown/runtime.cjs");
+let _fuf_stack_pixel_utils = require("@fuf-stack/pixel-utils");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _heroui_theme = require("@heroui/theme");
+let _heroui_chip = require("@heroui/chip");
+//#region src/Label/Label.tsx
+const labelVariants = (0, _fuf_stack_pixel_utils.tv)({
+	slots: {
+		base: "",
+		closeButton: "",
+		content: "",
+		dot: "",
+		icon: ""
+	},
+	variants: {
+		color: {
+			info: { dot: "bg-info" },
+			..._heroui_theme.chip.variants.color
+		},
+		isIconOnly: {
+			true: { content: "px-1" },
+			false: { content: "flex items-center gap-2" }
+		},
+		hasEndContent: { true: { base: "pr-2" } },
+		variant: _heroui_theme.chip.variants.variant
+	},
+	defaultVariants: _heroui_theme.chip.defaultVariants,
+	compoundVariants: [
+		..._heroui_theme.chip.compoundVariants,
+		{
+			variant: "solid",
+			color: "info",
+			class: { base: "bg-info text-info-foreground" }
+		},
+		{
+			variant: "bordered",
+			color: "info",
+			class: { base: "border-info text-info" }
+		},
+		{
+			variant: "light",
+			color: "info",
+			class: { base: "text-info" }
+		},
+		{
+			variant: "flat",
+			color: "info",
+			class: { base: "bg-info/20 text-info-600" }
+		},
+		{
+			variant: "faded",
+			color: "info",
+			class: { base: "border-default text-info" }
+		}
+	]
+});
+/**
+* Label component based on [HeroUI Chip](https://www.heroui.com//docs/components/chip)
+*/
+const Label = ({ children = void 0, className: _className = void 0, color = "default", endContent = void 0, icon = void 0, onClose = void 0, radius = "full", size = "md", variant = "solid" }) => {
+	const classNames = (0, _fuf_stack_pixel_utils.variantsToClassNames)(labelVariants({
+		color,
+		isIconOnly: !!icon && !children && !endContent,
+		hasEndContent: !!endContent,
+		variant
+	}), _className, "base");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_heroui_chip.Chip, {
+		classNames,
+		endContent,
+		onClose,
+		radius,
+		size,
+		variant,
+		children: [icon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: classNames.icon,
+			children: icon
+		}) : null, children]
+	});
+};
+//#endregion
+exports.default = Label;
+exports.labelVariants = labelVariants;
+
+//# sourceMappingURL=Label.cjs.map

package/dist/Label/Label.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Label.cjs","names":["heroLabelVariants","HeroLabel"],"sources":["../../src/Label/Label.tsx"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ChipProps as HeroLabelProps } from '@heroui/chip';\nimport type { ReactNode } from 'react';\n\nimport { Chip as HeroLabel } from '@heroui/chip';\nimport { chip as heroLabelVariants } from '@heroui/theme';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\n// label variants\nexport const labelVariants = tv({\n  slots: {\n    base: '',\n    closeButton: '',\n    content: '',\n    dot: '',\n    icon: '',\n  },\n  variants: {\n    color: {\n      // see: https://github.com/heroui-inc/heroui/blob/canary/packages/core/theme/src/components/chip.ts\n      info: {\n        dot: 'bg-info',\n      },\n      ...heroLabelVariants.variants.color,\n    },\n    isIconOnly: {\n      true: {\n        content: 'px-1',\n      },\n      false: {\n        content: 'flex items-center gap-2',\n      },\n    },\n    hasEndContent: {\n      true: {\n        base: 'pr-2',\n      },\n    },\n    variant: heroLabelVariants.variants.variant,\n  },\n  defaultVariants: heroLabelVariants.defaultVariants,\n  compoundVariants: [\n    // see: https://github.com/heroui-inc/heroui/blob/canary/packages/core/theme/src/components/chip.ts\n    ...heroLabelVariants.compoundVariants,\n    // solid / color info\n    {\n      variant: 'solid',\n      color: 'info',\n      class: {\n        base: 'bg-info text-info-foreground',\n      },\n    },\n    // bordered / color info\n    {\n      variant: 'bordered',\n      color: 'info',\n      class: {\n        base: 'border-info text-info',\n      },\n    },\n    // light / color info\n    {\n      variant: 'light',\n      color: 'info',\n      class: {\n        base: 'text-info',\n      },\n    },\n    // flat / color info\n    {\n      variant: 'flat',\n      color: 'info',\n      class: {\n        base: 'bg-info/20 text-info-600',\n      },\n    },\n    // faded / color info\n    {\n      variant: 'faded',\n      color: 'info',\n      class: {\n        base: 'border-default text-info',\n      },\n    },\n  ],\n});\n\ntype VariantProps = TVProps<typeof labelVariants>;\ntype ClassName = TVClassName<typeof labelVariants>;\n\nexport interface LabelProps extends VariantProps {\n  /** content of the label */\n  children?: ReactNode;\n  /** CSS class name */\n  className?: ClassName;\n  /** color of the label */\n  color?: VariantProps['color'];\n  /** element to be rendered in the right side of the label */\n  endContent?: HeroLabelProps['endContent'];\n  /** optional label icon, when only icon provided without children and endContent  */\n  icon?: ReactNode;\n  /** add close button to endContent */\n  onClose?: HeroLabelProps['onClose'];\n  /** radius of the label */\n  radius?: HeroLabelProps['radius'];\n  /** size of the label */\n  size?: HeroLabelProps['size'];\n  /** style variant of the label */\n  variant?: 'solid' | 'bordered' | 'light' | 'flat' | 'faded' | 'dot';\n}\n\n/**\n * Label component based on [HeroUI Chip](https://www.heroui.com//docs/components/chip)\n */\nconst Label = ({\n  children = undefined,\n  className: _className = undefined,\n  color = 'default',\n  endContent = undefined,\n  icon = undefined,\n  onClose = undefined,\n  radius = 'full',\n  size = 'md',\n  variant = 'solid',\n}: LabelProps) => {\n  // determine variants based on props\n  const isIconOnly = !!icon && !children && !endContent;\n  const hasEndContent = !!endContent;\n\n  // classNames from slots\n  const variants = labelVariants({ color, isIconOnly, hasEndContent, variant });\n  const classNames = variantsToClassNames(variants, _className, 'base');\n\n  return (\n    <HeroLabel\n      classNames={classNames}\n      endContent={endContent}\n      onClose={onClose}\n      radius={radius}\n      size={size}\n      variant={variant}\n    >\n      {icon ? <span className={classNames.icon}>{icon}</span> : null}\n      {children}\n    </HeroLabel>\n  );\n};\n\nexport default Label;\n"],"mappings":";;;;;;AAUA,MAAa,iBAAA,GAAA,uBAAA,IAAmB;CAC9B,OAAO;EACL,MAAM;EACN,aAAa;EACb,SAAS;EACT,KAAK;EACL,MAAM;CACR;CACA,UAAU;EACR,OAAO;GAEL,MAAM,EACJ,KAAK,UACP;GACA,GAAGA,cAAAA,KAAkB,SAAS;EAChC;EACA,YAAY;GACV,MAAM,EACJ,SAAS,OACX;GACA,OAAO,EACL,SAAS,0BACX;EACF;EACA,eAAe,EACb,MAAM,EACJ,MAAM,OACR,EACF;EACA,SAASA,cAAAA,KAAkB,SAAS;CACtC;CACA,iBAAiBA,cAAAA,KAAkB;CACnC,kBAAkB;EAEhB,GAAGA,cAAAA,KAAkB;EAErB;GACE,SAAS;GACT,OAAO;GACP,OAAO,EACL,MAAM,+BACR;EACF;EAEA;GACE,SAAS;GACT,OAAO;GACP,OAAO,EACL,MAAM,wBACR;EACF;EAEA;GACE,SAAS;GACT,OAAO;GACP,OAAO,EACL,MAAM,YACR;EACF;EAEA;GACE,SAAS;GACT,OAAO;GACP,OAAO,EACL,MAAM,2BACR;EACF;EAEA;GACE,SAAS;GACT,OAAO;GACP,OAAO,EACL,MAAM,2BACR;EACF;CACF;AACF,CAAC;;;;AA6BD,MAAM,SAAS,EACb,WAAW,KAAA,GACX,WAAW,aAAa,KAAA,GACxB,QAAQ,WACR,aAAa,KAAA,GACb,OAAO,KAAA,GACP,UAAU,KAAA,GACV,SAAS,QACT,OAAO,MACP,UAAU,cACM;CAOhB,MAAM,cAAA,GAAA,uBAAA,sBADW,cAAc;EAAE;EAAO,YAJrB,CAAC,CAAC,QAAQ,CAAC,YAAY,CAAC;EAIS,eAAA,CAH7B,CAAC;EAG2C;CAAQ,CAC5B,GAAG,YAAY,MAAM;CAEpE,OACE,iBAAA,GAAA,kBAAA,MAACC,aAAAA,MAAD;EACc;EACA;EACH;EACD;EACF;EACG;YANX,CAQG,OAAO,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,WAAW,WAAW;aAAO;EAAW,CAAA,IAAI,MACzD,QACQ;;AAEf"}

package/dist/Label/Label.d.cts

@@ -0,0 +1,225 @@
+import { TVClassName, TVProps } from "@fuf-stack/pixel-utils";
+import { ReactNode } from "react";
+import { ChipProps } from "@heroui/chip";
+
+//#region src/Label/Label.d.ts
+declare const labelVariants: import("tailwind-variants").TVReturnType<{
+  color: {
+    default: {
+      dot: string;
+    };
+    primary: {
+      dot: string;
+    };
+    secondary: {
+      dot: string;
+    };
+    success: {
+      dot: string;
+    };
+    warning: {
+      dot: string;
+    };
+    danger: {
+      dot: string;
+    };
+    info: {
+      dot: string;
+    };
+  };
+  isIconOnly: {
+    true: {
+      content: string;
+    };
+    false: {
+      content: string;
+    };
+  };
+  hasEndContent: {
+    true: {
+      base: string;
+    };
+  };
+  variant: {
+    solid: {};
+    bordered: {
+      base: string;
+    };
+    light: {
+      base: string;
+    };
+    flat: {};
+    faded: {
+      base: string;
+    };
+    shadow: {};
+    dot: {
+      base: string;
+    };
+  };
+}, {
+  base: string;
+  closeButton: string;
+  content: string;
+  dot: string;
+  icon: string;
+}, undefined, {
+  color: {
+    default: {
+      dot: string;
+    };
+    primary: {
+      dot: string;
+    };
+    secondary: {
+      dot: string;
+    };
+    success: {
+      dot: string;
+    };
+    warning: {
+      dot: string;
+    };
+    danger: {
+      dot: string;
+    };
+    info: {
+      dot: string;
+    };
+  };
+  isIconOnly: {
+    true: {
+      content: string;
+    };
+    false: {
+      content: string;
+    };
+  };
+  hasEndContent: {
+    true: {
+      base: string;
+    };
+  };
+  variant: {
+    solid: {};
+    bordered: {
+      base: string;
+    };
+    light: {
+      base: string;
+    };
+    flat: {};
+    faded: {
+      base: string;
+    };
+    shadow: {};
+    dot: {
+      base: string;
+    };
+  };
+}, {
+  base: string;
+  closeButton: string;
+  content: string;
+  dot: string;
+  icon: string;
+}, import("tailwind-variants").TVReturnType<{
+  color: {
+    default: {
+      dot: string;
+    };
+    primary: {
+      dot: string;
+    };
+    secondary: {
+      dot: string;
+    };
+    success: {
+      dot: string;
+    };
+    warning: {
+      dot: string;
+    };
+    danger: {
+      dot: string;
+    };
+    info: {
+      dot: string;
+    };
+  };
+  isIconOnly: {
+    true: {
+      content: string;
+    };
+    false: {
+      content: string;
+    };
+  };
+  hasEndContent: {
+    true: {
+      base: string;
+    };
+  };
+  variant: {
+    solid: {};
+    bordered: {
+      base: string;
+    };
+    light: {
+      base: string;
+    };
+    flat: {};
+    faded: {
+      base: string;
+    };
+    shadow: {};
+    dot: {
+      base: string;
+    };
+  };
+}, {
+  base: string;
+  closeButton: string;
+  content: string;
+  dot: string;
+  icon: string;
+}, undefined, unknown, unknown, undefined>>;
+type VariantProps = TVProps<typeof labelVariants>;
+type ClassName = TVClassName<typeof labelVariants>;
+interface LabelProps extends VariantProps {
+  /** content of the label */
+  children?: ReactNode;
+  /** CSS class name */
+  className?: ClassName;
+  /** color of the label */
+  color?: VariantProps['color'];
+  /** element to be rendered in the right side of the label */
+  endContent?: ChipProps['endContent'];
+  /** optional label icon, when only icon provided without children and endContent  */
+  icon?: ReactNode;
+  /** add close button to endContent */
+  onClose?: ChipProps['onClose'];
+  /** radius of the label */
+  radius?: ChipProps['radius'];
+  /** size of the label */
+  size?: ChipProps['size'];
+  /** style variant of the label */
+  variant?: 'solid' | 'bordered' | 'light' | 'flat' | 'faded' | 'dot';
+}
+/**
+ * Label component based on [HeroUI Chip](https://www.heroui.com//docs/components/chip)
+ */
+declare const Label: ({
+  children,
+  className: _className,
+  color,
+  endContent,
+  icon,
+  onClose,
+  radius,
+  size,
+  variant
+}: LabelProps) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Label, LabelProps, labelVariants };
+//# sourceMappingURL=Label.d.cts.map

package/dist/Label/Label.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Label.d.cts","names":[],"sources":["../../src/Label/Label.tsx"],"mappings":";;;;;cAUa,aAAA,8BAAa,YAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8ErB,YAAA,GAAe,OAAO,QAAQ,aAAA;AAAA,KAC9B,SAAA,GAAY,WAAW,QAAQ,aAAA;AAAA,UAEnB,UAAA,SAAmB,YAAA;EAwBrB;EAtBb,QAAA,GAAW,SAAA;EAgCV;EA9BD,SAAA,GAAY,SAAA;EA8BD;EA5BX,KAAA,GAAQ,YAAA;EAkBK;EAhBb,UAAA,GAAa,SAAA;EAgBA;EAdb,IAAA,GAAO,SAAA;EAcM;EAZb,OAAA,GAAU,SAAA;EAYG;EAVb,MAAA,GAAS,SAAA;EAUI;EARb,IAAA,GAAO,SAAA;EAQM;EANb,OAAA;AAAA;;;;cAMI,KAAA;EAAS,QAAA;EAAA,SAAA,EAAA,UAAA;EAAA,KAAA;EAAA,UAAA;EAAA,IAAA;EAAA,OAAA;EAAA,MAAA;EAAA,IAAA;EAAA;AAAA,GAUZ,UAAA,iCAAU,GAAA,CAAA,OAAA"}

package/dist/Label/Label.d.ts

@@ -0,0 +1,225 @@
+import { TVClassName, TVProps } from "@fuf-stack/pixel-utils";
+import { ReactNode } from "react";
+import { ChipProps } from "@heroui/chip";
+
+//#region src/Label/Label.d.ts
+declare const labelVariants: import("tailwind-variants").TVReturnType<{
+  color: {
+    default: {
+      dot: string;
+    };
+    primary: {
+      dot: string;
+    };
+    secondary: {
+      dot: string;
+    };
+    success: {
+      dot: string;
+    };
+    warning: {
+      dot: string;
+    };
+    danger: {
+      dot: string;
+    };
+    info: {
+      dot: string;
+    };
+  };
+  isIconOnly: {
+    true: {
+      content: string;
+    };
+    false: {
+      content: string;
+    };
+  };
+  hasEndContent: {
+    true: {
+      base: string;
+    };
+  };
+  variant: {
+    solid: {};
+    bordered: {
+      base: string;
+    };
+    light: {
+      base: string;
+    };
+    flat: {};
+    faded: {
+      base: string;
+    };
+    shadow: {};
+    dot: {
+      base: string;
+    };
+  };
+}, {
+  base: string;
+  closeButton: string;
+  content: string;
+  dot: string;
+  icon: string;
+}, undefined, {
+  color: {
+    default: {
+      dot: string;
+    };
+    primary: {
+      dot: string;
+    };
+    secondary: {
+      dot: string;
+    };
+    success: {
+      dot: string;
+    };
+    warning: {
+      dot: string;
+    };
+    danger: {
+      dot: string;
+    };
+    info: {
+      dot: string;
+    };
+  };
+  isIconOnly: {
+    true: {
+      content: string;
+    };
+    false: {
+      content: string;
+    };
+  };
+  hasEndContent: {
+    true: {
+      base: string;
+    };
+  };
+  variant: {
+    solid: {};
+    bordered: {
+      base: string;
+    };
+    light: {
+      base: string;
+    };
+    flat: {};
+    faded: {
+      base: string;
+    };
+    shadow: {};
+    dot: {
+      base: string;
+    };
+  };
+}, {
+  base: string;
+  closeButton: string;
+  content: string;
+  dot: string;
+  icon: string;
+}, import("tailwind-variants").TVReturnType<{
+  color: {
+    default: {
+      dot: string;
+    };
+    primary: {
+      dot: string;
+    };
+    secondary: {
+      dot: string;
+    };
+    success: {
+      dot: string;
+    };
+    warning: {
+      dot: string;
+    };
+    danger: {
+      dot: string;
+    };
+    info: {
+      dot: string;
+    };
+  };
+  isIconOnly: {
+    true: {
+      content: string;
+    };
+    false: {
+      content: string;
+    };
+  };
+  hasEndContent: {
+    true: {
+      base: string;
+    };
+  };
+  variant: {
+    solid: {};
+    bordered: {
+      base: string;
+    };
+    light: {
+      base: string;
+    };
+    flat: {};
+    faded: {
+      base: string;
+    };
+    shadow: {};
+    dot: {
+      base: string;
+    };
+  };
+}, {
+  base: string;
+  closeButton: string;
+  content: string;
+  dot: string;
+  icon: string;
+}, undefined, unknown, unknown, undefined>>;
+type VariantProps = TVProps<typeof labelVariants>;
+type ClassName = TVClassName<typeof labelVariants>;
+interface LabelProps extends VariantProps {
+  /** content of the label */
+  children?: ReactNode;
+  /** CSS class name */
+  className?: ClassName;
+  /** color of the label */
+  color?: VariantProps['color'];
+  /** element to be rendered in the right side of the label */
+  endContent?: ChipProps['endContent'];
+  /** optional label icon, when only icon provided without children and endContent  */
+  icon?: ReactNode;
+  /** add close button to endContent */
+  onClose?: ChipProps['onClose'];
+  /** radius of the label */
+  radius?: ChipProps['radius'];
+  /** size of the label */
+  size?: ChipProps['size'];
+  /** style variant of the label */
+  variant?: 'solid' | 'bordered' | 'light' | 'flat' | 'faded' | 'dot';
+}
+/**
+ * Label component based on [HeroUI Chip](https://www.heroui.com//docs/components/chip)
+ */
+declare const Label: ({
+  children,
+  className: _className,
+  color,
+  endContent,
+  icon,
+  onClose,
+  radius,
+  size,
+  variant
+}: LabelProps) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Label, LabelProps, labelVariants };
+//# sourceMappingURL=Label.d.ts.map

package/dist/Label/Label.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Label.d.ts","names":[],"sources":["../../src/Label/Label.tsx"],"mappings":";;;;;cAUa,aAAA,8BAAa,YAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8ErB,YAAA,GAAe,OAAO,QAAQ,aAAA;AAAA,KAC9B,SAAA,GAAY,WAAW,QAAQ,aAAA;AAAA,UAEnB,UAAA,SAAmB,YAAA;EAwBrB;EAtBb,QAAA,GAAW,SAAA;EAgCV;EA9BD,SAAA,GAAY,SAAA;EA8BD;EA5BX,KAAA,GAAQ,YAAA;EAkBK;EAhBb,UAAA,GAAa,SAAA;EAgBA;EAdb,IAAA,GAAO,SAAA;EAcM;EAZb,OAAA,GAAU,SAAA;EAYG;EAVb,MAAA,GAAS,SAAA;EAUI;EARb,IAAA,GAAO,SAAA;EAQM;EANb,OAAA;AAAA;;;;cAMI,KAAA;EAAS,QAAA;EAAA,SAAA,EAAA,UAAA;EAAA,KAAA;EAAA,UAAA;EAAA,IAAA;EAAA,OAAA;EAAA,MAAA;EAAA,IAAA;EAAA;AAAA,GAUZ,UAAA,iCAAU,GAAA,CAAA,OAAA"}

package/dist/Label/Label.js

@@ -0,0 +1,82 @@
+import { tv, variantsToClassNames } from "@fuf-stack/pixel-utils";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { chip } from "@heroui/theme";
+import { Chip } from "@heroui/chip";
+//#region src/Label/Label.tsx
+const labelVariants = tv({
+	slots: {
+		base: "",
+		closeButton: "",
+		content: "",
+		dot: "",
+		icon: ""
+	},
+	variants: {
+		color: {
+			info: { dot: "bg-info" },
+			...chip.variants.color
+		},
+		isIconOnly: {
+			true: { content: "px-1" },
+			false: { content: "flex items-center gap-2" }
+		},
+		hasEndContent: { true: { base: "pr-2" } },
+		variant: chip.variants.variant
+	},
+	defaultVariants: chip.defaultVariants,
+	compoundVariants: [
+		...chip.compoundVariants,
+		{
+			variant: "solid",
+			color: "info",
+			class: { base: "bg-info text-info-foreground" }
+		},
+		{
+			variant: "bordered",
+			color: "info",
+			class: { base: "border-info text-info" }
+		},
+		{
+			variant: "light",
+			color: "info",
+			class: { base: "text-info" }
+		},
+		{
+			variant: "flat",
+			color: "info",
+			class: { base: "bg-info/20 text-info-600" }
+		},
+		{
+			variant: "faded",
+			color: "info",
+			class: { base: "border-default text-info" }
+		}
+	]
+});
+/**
+* Label component based on [HeroUI Chip](https://www.heroui.com//docs/components/chip)
+*/
+const Label = ({ children = void 0, className: _className = void 0, color = "default", endContent = void 0, icon = void 0, onClose = void 0, radius = "full", size = "md", variant = "solid" }) => {
+	const classNames = variantsToClassNames(labelVariants({
+		color,
+		isIconOnly: !!icon && !children && !endContent,
+		hasEndContent: !!endContent,
+		variant
+	}), _className, "base");
+	return /* @__PURE__ */ jsxs(Chip, {
+		classNames,
+		endContent,
+		onClose,
+		radius,
+		size,
+		variant,
+		children: [icon ? /* @__PURE__ */ jsx("span", {
+			className: classNames.icon,
+			children: icon
+		}) : null, children]
+	});
+};
+//#endregion
+export { Label as default, labelVariants };
+
+//# sourceMappingURL=Label.js.map

package/dist/Label/Label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Label.js","names":["heroLabelVariants","HeroLabel"],"sources":["../../src/Label/Label.tsx"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ChipProps as HeroLabelProps } from '@heroui/chip';\nimport type { ReactNode } from 'react';\n\nimport { Chip as HeroLabel } from '@heroui/chip';\nimport { chip as heroLabelVariants } from '@heroui/theme';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\n// label variants\nexport const labelVariants = tv({\n  slots: {\n    base: '',\n    closeButton: '',\n    content: '',\n    dot: '',\n    icon: '',\n  },\n  variants: {\n    color: {\n      // see: https://github.com/heroui-inc/heroui/blob/canary/packages/core/theme/src/components/chip.ts\n      info: {\n        dot: 'bg-info',\n      },\n      ...heroLabelVariants.variants.color,\n    },\n    isIconOnly: {\n      true: {\n        content: 'px-1',\n      },\n      false: {\n        content: 'flex items-center gap-2',\n      },\n    },\n    hasEndContent: {\n      true: {\n        base: 'pr-2',\n      },\n    },\n    variant: heroLabelVariants.variants.variant,\n  },\n  defaultVariants: heroLabelVariants.defaultVariants,\n  compoundVariants: [\n    // see: https://github.com/heroui-inc/heroui/blob/canary/packages/core/theme/src/components/chip.ts\n    ...heroLabelVariants.compoundVariants,\n    // solid / color info\n    {\n      variant: 'solid',\n      color: 'info',\n      class: {\n        base: 'bg-info text-info-foreground',\n      },\n    },\n    // bordered / color info\n    {\n      variant: 'bordered',\n      color: 'info',\n      class: {\n        base: 'border-info text-info',\n      },\n    },\n    // light / color info\n    {\n      variant: 'light',\n      color: 'info',\n      class: {\n        base: 'text-info',\n      },\n    },\n    // flat / color info\n    {\n      variant: 'flat',\n      color: 'info',\n      class: {\n        base: 'bg-info/20 text-info-600',\n      },\n    },\n    // faded / color info\n    {\n      variant: 'faded',\n      color: 'info',\n      class: {\n        base: 'border-default text-info',\n      },\n    },\n  ],\n});\n\ntype VariantProps = TVProps<typeof labelVariants>;\ntype ClassName = TVClassName<typeof labelVariants>;\n\nexport interface LabelProps extends VariantProps {\n  /** content of the label */\n  children?: ReactNode;\n  /** CSS class name */\n  className?: ClassName;\n  /** color of the label */\n  color?: VariantProps['color'];\n  /** element to be rendered in the right side of the label */\n  endContent?: HeroLabelProps['endContent'];\n  /** optional label icon, when only icon provided without children and endContent  */\n  icon?: ReactNode;\n  /** add close button to endContent */\n  onClose?: HeroLabelProps['onClose'];\n  /** radius of the label */\n  radius?: HeroLabelProps['radius'];\n  /** size of the label */\n  size?: HeroLabelProps['size'];\n  /** style variant of the label */\n  variant?: 'solid' | 'bordered' | 'light' | 'flat' | 'faded' | 'dot';\n}\n\n/**\n * Label component based on [HeroUI Chip](https://www.heroui.com//docs/components/chip)\n */\nconst Label = ({\n  children = undefined,\n  className: _className = undefined,\n  color = 'default',\n  endContent = undefined,\n  icon = undefined,\n  onClose = undefined,\n  radius = 'full',\n  size = 'md',\n  variant = 'solid',\n}: LabelProps) => {\n  // determine variants based on props\n  const isIconOnly = !!icon && !children && !endContent;\n  const hasEndContent = !!endContent;\n\n  // classNames from slots\n  const variants = labelVariants({ color, isIconOnly, hasEndContent, variant });\n  const classNames = variantsToClassNames(variants, _className, 'base');\n\n  return (\n    <HeroLabel\n      classNames={classNames}\n      endContent={endContent}\n      onClose={onClose}\n      radius={radius}\n      size={size}\n      variant={variant}\n    >\n      {icon ? <span className={classNames.icon}>{icon}</span> : null}\n      {children}\n    </HeroLabel>\n  );\n};\n\nexport default Label;\n"],"mappings":";;;;;AAUA,MAAa,gBAAgB,GAAG;CAC9B,OAAO;EACL,MAAM;EACN,aAAa;EACb,SAAS;EACT,KAAK;EACL,MAAM;CACR;CACA,UAAU;EACR,OAAO;GAEL,MAAM,EACJ,KAAK,UACP;GACA,GAAGA,KAAkB,SAAS;EAChC;EACA,YAAY;GACV,MAAM,EACJ,SAAS,OACX;GACA,OAAO,EACL,SAAS,0BACX;EACF;EACA,eAAe,EACb,MAAM,EACJ,MAAM,OACR,EACF;EACA,SAASA,KAAkB,SAAS;CACtC;CACA,iBAAiBA,KAAkB;CACnC,kBAAkB;EAEhB,GAAGA,KAAkB;EAErB;GACE,SAAS;GACT,OAAO;GACP,OAAO,EACL,MAAM,+BACR;EACF;EAEA;GACE,SAAS;GACT,OAAO;GACP,OAAO,EACL,MAAM,wBACR;EACF;EAEA;GACE,SAAS;GACT,OAAO;GACP,OAAO,EACL,MAAM,YACR;EACF;EAEA;GACE,SAAS;GACT,OAAO;GACP,OAAO,EACL,MAAM,2BACR;EACF;EAEA;GACE,SAAS;GACT,OAAO;GACP,OAAO,EACL,MAAM,2BACR;EACF;CACF;AACF,CAAC;;;;AA6BD,MAAM,SAAS,EACb,WAAW,KAAA,GACX,WAAW,aAAa,KAAA,GACxB,QAAQ,WACR,aAAa,KAAA,GACb,OAAO,KAAA,GACP,UAAU,KAAA,GACV,SAAS,QACT,OAAO,MACP,UAAU,cACM;CAOhB,MAAM,aAAa,qBADF,cAAc;EAAE;EAAO,YAJrB,CAAC,CAAC,QAAQ,CAAC,YAAY,CAAC;EAIS,eAAA,CAH7B,CAAC;EAG2C;CAAQ,CAC5B,GAAG,YAAY,MAAM;CAEpE,OACE,qBAACC,MAAD;EACc;EACA;EACH;EACD;EACF;EACG;YANX,CAQG,OAAO,oBAAC,QAAD;GAAM,WAAW,WAAW;aAAO;EAAW,CAAA,IAAI,MACzD,QACQ;;AAEf"}