@pibit.ai/cure-design-system 0.6.14 → 0.6.16

package/dist/patterns/tabs/tabs.d.ts

@@ -0,0 +1,42 @@
+import { ComponentPropsWithRef, ReactNode } from 'react';
+import { TabListProps as AriaTabListProps, TabProps as AriaTabProps, TabRenderProps as AriaTabRenderProps, TabPanel as AriaTabPanel, Tabs as AriaTabs } from 'react-aria-components';
+type Orientation = "horizontal" | "vertical";
+type HorizontalTypes = "button-brand" | "button-gray" | "button-border" | "button-minimal" | "underline" | "button-curved";
+type VerticalTypes = "button-brand" | "button-gray" | "button-border" | "button-minimal" | "line";
+type TabTypeColors<T> = T extends "horizontal" ? HorizontalTypes : VerticalTypes;
+declare const sizes: Record<"xs" | "sm" | "md", Partial<Record<HorizontalTypes | VerticalTypes, string>>>;
+export interface TabListComponentProps<T extends object, K extends Orientation> extends AriaTabListProps<T> {
+    /** The size of the tab list. */
+    size?: keyof typeof sizes;
+    /** The type of the tab list. */
+    type?: TabTypeColors<K>;
+    /** The orientation of the tab list. */
+    orientation?: K;
+    /** The items of the tab list. */
+    items: T[];
+    /** Whether the tab list is full width. */
+    fullWidth?: boolean;
+}
+export declare const TabList: <T extends Orientation>({ size, type, orientation: orientationProp, fullWidth, className, children, items, ...otherProps }: TabListComponentProps<TabComponentProps, T>) => import("react/jsx-runtime").JSX.Element;
+export declare const TabPanel: (props: ComponentPropsWithRef<typeof AriaTabPanel>) => import("react/jsx-runtime").JSX.Element;
+export interface TabComponentProps extends AriaTabProps {
+    /** The label of the tab. */
+    label?: ReactNode;
+    /** The children of the tab. */
+    children?: ReactNode | ((props: AriaTabRenderProps) => ReactNode);
+    /** The badge displayed next to the label. */
+    badge?: number | string;
+    /** The badge displayed before the label. */
+    leadingBadge?: number | string;
+    /** The class name for the badge. */
+    badgeClassName?: string;
+}
+export declare const Tab: (props: TabComponentProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Tabs: {
+    ({ className, ...props }: ComponentPropsWithRef<typeof AriaTabs>): import("react/jsx-runtime").JSX.Element;
+    Panel: (props: ComponentPropsWithRef<typeof AriaTabPanel>) => import("react/jsx-runtime").JSX.Element;
+    List: <T extends Orientation>({ size, type, orientation: orientationProp, fullWidth, className, children, items, ...otherProps }: TabListComponentProps<TabComponentProps, T>) => import("react/jsx-runtime").JSX.Element;
+    Item: (props: TabComponentProps) => import("react/jsx-runtime").JSX.Element;
+};
+export {};
+//# sourceMappingURL=tabs.d.ts.map

package/dist/patterns/tabs/tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/patterns/tabs/tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9D,OAAO,KAAK,EACV,YAAY,IAAI,gBAAgB,EAChC,QAAQ,IAAI,YAAY,EACxB,cAAc,IAAI,kBAAkB,EACrC,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAGL,QAAQ,IAAI,YAAY,EACxB,IAAI,IAAI,QAAQ,EAGjB,MAAM,uBAAuB,CAAC;AAY/B,KAAK,WAAW,GAAG,YAAY,GAAG,UAAU,CAAC;AAG7C,KAAK,eAAe,GAChB,cAAc,GACd,aAAa,GACb,eAAe,GACf,gBAAgB,GAChB,WAAW,GACX,eAAe,CAAC;AACpB,KAAK,aAAa,GAAG,cAAc,GAAG,aAAa,GAAG,eAAe,GAAG,gBAAgB,GAAG,MAAM,CAAC;AAClG,KAAK,aAAa,CAAC,CAAC,IAAI,CAAC,SAAS,YAAY,GAAG,eAAe,GAAG,aAAa,CAAC;AAsDjF,QAAA,MAAM,KAAK,EAAE,MAAM,CAAC,IAAI,GAAG,IAAI,GAAG,IAAI,EAAE,OAAO,CAAC,MAAM,CAAC,eAAe,GAAG,aAAa,EAAE,MAAM,CAAC,CAAC,CA2B/F,CAAC;AA0CF,MAAM,WAAW,qBAAqB,CAAC,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,WAAW,CAAE,SAAQ,gBAAgB,CAAC,CAAC,CAAC;IACzG,gCAAgC;IAChC,IAAI,CAAC,EAAE,MAAM,OAAO,KAAK,CAAC;IAC1B,gCAAgC;IAChC,IAAI,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;IACxB,uCAAuC;IACvC,WAAW,CAAC,EAAE,CAAC,CAAC;IAChB,iCAAiC;IACjC,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,0CAA0C;IAC1C,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAYD,eAAO,MAAM,OAAO,GAAI,CAAC,SAAS,WAAW,EAAE,oGAS5C,qBAAqB,CAAC,iBAAiB,EAAE,CAAC,CAAC,4CAoC7C,CAAC;AAEF,eAAO,MAAM,QAAQ,GAAI,OAAO,qBAAqB,CAAC,OAAO,YAAY,CAAC,4CAYzE,CAAC;AAEF,MAAM,WAAW,iBAAkB,SAAQ,YAAY;IACrD,4BAA4B;IAC5B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,kBAAkB,KAAK,SAAS,CAAC,CAAC;IAClE,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,4CAA4C;IAC5C,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,oCAAoC;IACpC,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,GAAG,GAAI,OAAO,iBAAiB,4CA8C3C,CAAC;AAEF,eAAO,MAAM,IAAI;8BAA6B,qBAAqB,CAAC,OAAO,QAAQ,CAAC;mBA3EpD,qBAAqB,CAAC,OAAO,YAAY,CAAC;WA/ClD,CAAC,SAAS,WAAW,sGAS1C,qBAAqB,CAAC,iBAAiB,EAAE,CAAC,CAAC;kBAiEnB,iBAAiB;CAgE3C,CAAC"}

package/dist/patterns/tabs/tabs.js

@@ -0,0 +1,217 @@
+import { jsx as b, jsxs as h } from "react/jsx-runtime";
+import { createContext as _, useContext as v, Fragment as T } from "react";
+import { Tabs as w, useSlottedContext as z, TabsContext as N, TabList as C, Tab as B, TabPanel as L } from "react-aria-components";
+import { cx as e } from "../../utils/cn.js";
+import { Badge as p } from "../../primitives/badge/badge.js";
+const P = ({ isFocusVisible: t, isSelected: n, isHovered: o, isDisabled: a }) => ({
+  "button-brand": e(
+    "outline-focus-ring",
+    t && "outline-2 -outline-offset-2",
+    n && "bg-brand-primary_alt text-[var(--color-brand-600)]",
+    o && "text-[var(--color-brand-600)]"
+  ),
+  "button-gray": e(
+    "outline-focus-ring",
+    o && "bg-primary_hover text-secondary",
+    t && "outline-2 -outline-offset-2",
+    n && "bg-active text-secondary"
+  ),
+  "button-border": e(
+    "outline-focus-ring",
+    (n || o) && "bg-primary_alt text-secondary shadow-sm",
+    t && "outline-2 -outline-offset-2"
+  ),
+  "button-minimal": e(
+    "rounded-lg outline-focus-ring",
+    o && "text-secondary",
+    t && "outline-2 -outline-offset-2",
+    n && "bg-primary_alt text-secondary shadow-xs ring-1 ring-primary ring-inset"
+  ),
+  underline: e(
+    "rounded-none outline-focus-ring",
+    n && "border-b-2 border-[var(--color-brand-600)] text-[var(--color-brand-600)]",
+    o && "text-[var(--color-brand-600)] border-transparent",
+    !a && "hover:border-[var(--color-brand-600)] hover:text-[var(--color-brand-600)]",
+    t && "outline-2 -outline-offset-2"
+  ),
+  line: e(
+    "rounded-none border-l-2 border-transparent outline-focus-ring",
+    n && "border-fg-brand-primary_alt text-brand-secondary",
+    o && "text-brand-secondary",
+    t && "outline-2 -outline-offset-2"
+  ),
+  "button-curved": e(
+    "rounded-none rounded-t-xl outline-focus-ring relative text-xs font-medium transition-all duration-200 ease-out",
+    "before:absolute before:-left-3 before:bottom-0 before:size-3 before:rounded-br-lg before:transition-shadow before:duration-200 before:ease-out",
+    "after:absolute after:-right-3 after:bottom-0 after:size-3 after:rounded-bl-lg after:transition-shadow after:duration-200 after:ease-out",
+    t && "outline-2 -outline-offset-2",
+    n && "bg-primary text-brand-tertiary z-10 font-semibold",
+    n && "before:shadow-[4px_4px_0_0_var(--color-bg-primary)]",
+    n && "after:shadow-[-4px_4px_0_0_var(--color-bg-primary)]",
+    !n && "before:shadow-[4px_4px_0_0_transparent] after:shadow-[-4px_4px_0_0_transparent]",
+    !n && !a && o && "bg-primary_hover text-primary"
+  )
+}), j = {
+  xs: {
+    "button-brand": "text-xs font-semibold px-2",
+    "button-gray": "text-xs font-semibold px-2",
+    "button-border": "text-xs font-semibold px-2",
+    "button-minimal": "text-xs font-semibold px-2",
+    underline: "text-xs font-semibold px-1.5 pt-0",
+    line: "text-xs font-semibold pl-2.5 pr-2.5"
+  },
+  sm: {
+    "button-brand": "text-sm font-semibold py-2 px-3",
+    "button-gray": "text-sm font-semibold py-2 px-3",
+    "button-border": "text-sm font-semibold py-2 px-3",
+    "button-minimal": "text-sm font-semibold py-2 px-3",
+    underline: "text-sm font-semibold px-1 pb-2.5 pt-0",
+    line: "text-sm font-semibold pl-2.5 pr-3 py-0.5",
+    "button-curved": "py-2 px-4"
+  },
+  md: {
+    "button-brand": "text-md font-semibold py-2.5 px-3",
+    "button-gray": "text-md font-semibold py-2.5 px-3",
+    "button-border": "text-md font-semibold py-2.5 px-3",
+    "button-minimal": "text-md font-semibold py-2.5 px-3",
+    underline: "text-md font-semibold px-1 pb-2.5 pt-0",
+    line: "text-md font-semibold pr-3.5 pl-3 py-1",
+    "button-curved": "py-2.5 px-5"
+  }
+}, $ = ({ size: t, fullWidth: n }) => ({
+  "button-brand": "gap-1",
+  "button-gray": "gap-1",
+  "button-border": e(
+    "gap-1 rounded-[10px] bg-secondary_alt p-1 ring-1 ring-secondary ring-inset",
+    t === "md" && "rounded-xl p-1.5"
+  ),
+  "button-minimal": "gap-0.5 rounded-lg bg-secondary_alt ring-1 ring-inset ring-secondary",
+  underline: e("gap-3", n && "w-full gap-4"),
+  line: "gap-2",
+  "button-curved": "gap-0"
+});
+function I(t) {
+  return t.some((n) => {
+    if (!("badge" in n)) return !1;
+    const o = n.badge;
+    return o != null && String(o).length > 0;
+  });
+}
+const k = {
+  xs: "!min-h-8",
+  sm: "!min-h-9",
+  md: "!min-h-10"
+}, g = ({ isSelected: t, isHovered: n }) => ({
+  "button-brand": t || n ? "brand" : "gray",
+  "button-gray": "gray",
+  "button-border": "gray",
+  "button-minimal": "gray",
+  underline: t || n ? "brand" : "gray",
+  line: t || n ? "brand" : "gray",
+  "button-curved": "gray"
+}), c = _({
+  size: "sm",
+  type: "button-brand",
+  reserveBadgeSlot: !1
+}), A = ({
+  size: t = "sm",
+  type: n = "button-brand",
+  orientation: o,
+  fullWidth: a,
+  className: d,
+  children: m,
+  items: u,
+  ...r
+}) => {
+  const i = z(N), s = o ?? (i == null ? void 0 : i.orientation) ?? "horizontal", l = s === "horizontal" && n === "underline" && I(u);
+  return /* @__PURE__ */ b(c.Provider, { value: { size: t, type: n, orientation: s, fullWidth: a, reserveBadgeSlot: l }, children: /* @__PURE__ */ b(
+    C,
+    {
+      ...r,
+      items: u,
+      className: (f) => e(
+        "group flex",
+        $({
+          size: t,
+          fullWidth: a
+        })[n],
+        s === "vertical" && "w-max flex-col",
+        // Only horizontal tabs with underline type have bottom border
+        s === "horizontal" && n === "underline" && "relative before:absolute before:inset-x-0 before:bottom-0 before:h-px before:bg-border-secondary",
+        typeof d == "function" ? d(f) : d
+      ),
+      children: m ?? ((f) => /* @__PURE__ */ b(y, { ...f, children: f.children }))
+    }
+  ) });
+}, M = (t) => /* @__PURE__ */ b(
+  L,
+  {
+    ...t,
+    className: (n) => e(
+      "outline-focus-ring focus-visible:outline-2 focus-visible:outline-offset-2",
+      typeof t.className == "function" ? t.className(n) : t.className
+    )
+  }
+), y = (t) => {
+  const { label: n, children: o, badge: a, leadingBadge: d, badgeClassName: m, ...u } = t, { size: r = "sm", type: i = "button-brand", fullWidth: s } = v(c);
+  return /* @__PURE__ */ b(
+    B,
+    {
+      ...u,
+      className: (l) => e(
+        "z-10 flex h-max cursor-pointer items-center justify-center gap-1 rounded-md whitespace-nowrap text-secondary transition duration-100 ease-linear",
+        "group-orientation-vertical:justify-start",
+        s && "w-full flex-1",
+        k[r],
+        j[r][i],
+        P(l)[i],
+        typeof t.className == "function" ? t.className(l) : t.className
+      ),
+      children: (l) => /* @__PURE__ */ h(T, { children: [
+        d && /* @__PURE__ */ b(
+          p,
+          {
+            size: r === "xs" ? "sm" : r,
+            type: "pill-color",
+            color: g(l)[i],
+            className: e("hidden transition-inherit-all md:flex", r === "sm" && "-my-px", m),
+            children: d
+          }
+        ),
+        typeof o == "function" ? o(l) : o || n,
+        a && /* @__PURE__ */ b(
+          p,
+          {
+            size: r === "xs" ? "sm" : r,
+            type: "pill-color",
+            color: g(l)[i],
+            className: e("hidden transition-inherit-all md:flex", r === "sm" && "-my-px"),
+            children: a
+          }
+        )
+      ] })
+    }
+  );
+}, x = ({ className: t, ...n }) => /* @__PURE__ */ b(
+  w,
+  {
+    keyboardActivation: "manual",
+    ...n,
+    className: (o) => e(
+      // RAC marks the root `data-focus-visible` whenever anything inside it has keyboard focus, and the
+      // design system's global `[data-focus-visible]` outline would ring the whole tab section.
+      // The focused tab or control draws its own ring.
+      "flex w-full flex-col outline-hidden",
+      typeof t == "function" ? t(o) : t
+    )
+  }
+);
+x.Panel = M;
+x.List = A;
+x.Item = y;
+export {
+  y as Tab,
+  A as TabList,
+  M as TabPanel,
+  x as Tabs
+};

package/dist/primitives/featured-icon/featured-icon.d.ts

@@ -0,0 +1,14 @@
+import { FC, ReactNode, Ref } from 'react';
+export interface FeaturedIconProps {
+    ref?: Ref<HTMLDivElement>;
+    children?: ReactNode;
+    className?: string;
+    icon?: FC<{
+        className?: string;
+    }> | ReactNode;
+    size?: "sm" | "md" | "lg" | "xl";
+    color: "brand" | "gray" | "success" | "warning" | "error";
+    theme?: "light" | "gradient" | "dark" | "outline" | "modern" | "modern-neue";
+}
+export declare const FeaturedIcon: (props: FeaturedIconProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=featured-icon.d.ts.map

package/dist/primitives/featured-icon/featured-icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"featured-icon.d.ts","sourceRoot":"","sources":["../../../src/primitives/featured-icon/featured-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AA6HhD,MAAM,WAAW,iBAAiB;IAChC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,EAAE,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,GAAG,SAAS,CAAC;IAC9C,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC,KAAK,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAC1D,KAAK,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,GAAG,aAAa,CAAC;CAC9E;AAED,eAAO,MAAM,YAAY,GAAI,OAAO,iBAAiB,4CAwBpD,CAAC"}

package/dist/primitives/featured-icon/featured-icon.js

@@ -0,0 +1,136 @@
+import { jsxs as b, jsx as a } from "react/jsx-runtime";
+import { isValidElement as n } from "react";
+import { cx as f, sortCx as g } from "../../utils/cn.js";
+import { isReactComponent as l } from "../../utils/is-react-component.js";
+const c = {
+  sm: "*:data-icon:size-4",
+  md: "*:data-icon:size-5",
+  lg: "*:data-icon:size-6",
+  xl: "*:data-icon:size-7"
+}, s = g({
+  light: {
+    base: "rounded-full",
+    sizes: {
+      sm: "size-8",
+      md: "size-10",
+      lg: "size-12",
+      xl: "size-14"
+    },
+    colors: {
+      brand: "bg-brand-secondary text-featured-icon-light-fg-brand",
+      gray: "bg-tertiary text-featured-icon-light-fg-gray",
+      error: "bg-error-secondary text-featured-icon-light-fg-error",
+      warning: "bg-warning-secondary text-featured-icon-light-fg-warning",
+      success: "bg-success-secondary text-featured-icon-light-fg-success"
+    }
+  },
+  gradient: {
+    base: "rounded-full text-fg-white before:absolute before:inset-0 before:size-full before:rounded-full before:border before:mask-b-from-0% after:absolute after:block after:rounded-full",
+    sizes: {
+      sm: "size-8 after:size-6 *:data-icon:size-4",
+      md: "size-10 after:size-7 *:data-icon:size-4",
+      lg: "size-12 after:size-8 *:data-icon:size-5",
+      xl: "size-14 after:size-10 *:data-icon:size-5"
+    },
+    colors: {
+      brand: "before:border-utility-brand-200 before:bg-utility-brand-50 after:bg-brand-solid",
+      gray: "before:border-utility-gray-200 before:bg-utility-gray-50 after:bg-secondary-solid",
+      error: "before:border-utility-error-200 before:bg-utility-error-50 after:bg-error-solid",
+      warning: "before:border-utility-warning-200 before:bg-utility-warning-50 after:bg-warning-solid",
+      success: "before:border-utility-success-200 before:bg-utility-success-50 after:bg-success-solid"
+    }
+  },
+  dark: {
+    base: "text-fg-white shadow-xs-skeumorphic before:absolute before:inset-px before:border before:border-white/12 before:mask-b-from-0%",
+    sizes: {
+      sm: "size-8 rounded-md before:rounded-[5px]",
+      md: "size-10 rounded-lg before:rounded-[7px]",
+      lg: "size-12 rounded-[10px] before:rounded-[9px]",
+      xl: "size-14 rounded-xl before:rounded-[11px]"
+    },
+    colors: {
+      brand: "bg-brand-solid before:border-utility-brand-200/12",
+      gray: "bg-secondary-solid before:border-utility-gray-200/12",
+      error: "bg-error-solid before:border-utility-error-200/12",
+      warning: "bg-warning-solid before:border-utility-warning-200/12",
+      success: "bg-success-solid before:border-utility-success-200/12"
+    }
+  },
+  modern: {
+    base: "bg-primary ",
+    sizes: {
+      sm: "size-8 rounded-md",
+      md: "size-10 rounded-lg",
+      lg: "size-12 rounded-[10px]",
+      xl: "size-14 rounded-xl"
+    },
+    colors: {
+      brand: "",
+      gray: "text-fg-secondary ring-primary",
+      error: "",
+      warning: "",
+      success: ""
+    }
+  },
+  "modern-neue": {
+    base: [
+      "bg-primary_alt ring-1 ring-inset before:absolute before:inset-1",
+      // Shadow
+      "before:shadow-[0px_1px_2px_0px_rgba(0,0,0,0.1),0px_3px_3px_0px_rgba(0,0,0,0.09),1px_8px_5px_0px_rgba(0,0,0,0.05),2px_21px_6px_0px_rgba(0,0,0,0),0px_0px_0px_1px_rgba(0,0,0,0.08),1px_13px_5px_0px_rgba(0,0,0,0.01),0px_-2px_2px_0px_rgba(0,0,0,0.13)_inset] before:ring-1 before:ring-secondary_alt"
+    ].join(" "),
+    sizes: {
+      sm: "size-8 rounded-[8px] before:rounded-[4px]",
+      md: "size-10 rounded-[10px] before:rounded-[6px]",
+      lg: "size-12 rounded-[12px] before:rounded-[8px]",
+      xl: "size-14 rounded-[14px] before:rounded-[10px]"
+    },
+    colors: {
+      brand: "",
+      gray: "text-fg-secondary ring-primary",
+      error: "",
+      warning: "",
+      success: ""
+    }
+  },
+  outline: {
+    base: "before:absolute before:rounded-full before:border-2 after:absolute after:rounded-full after:border-2",
+    sizes: {
+      sm: "size-4 before:size-6 after:size-8.5",
+      md: "size-5 before:size-7 after:size-9.5",
+      lg: "size-6 before:size-8 after:size-10.5",
+      xl: "size-7 before:size-9 after:size-11.5"
+    },
+    colors: {
+      brand: "text-fg-brand-primary before:border-fg-brand-primary/30 after:border-fg-brand-primary/10",
+      gray: "text-fg-tertiary before:border-fg-tertiary/30 after:border-fg-tertiary/10",
+      error: "text-fg-error-primary before:border-fg-error-primary/30 after:border-fg-error-primary/10",
+      warning: "text-fg-warning-primary before:border-fg-warning-primary/30 after:border-fg-warning-primary/10",
+      success: "text-fg-success-primary before:border-fg-success-primary/30 after:border-fg-success-primary/10"
+    }
+  }
+}), y = (r) => {
+  const { size: i = "sm", theme: o = "light", color: t = "brand", icon: e, ...d } = r;
+  return /* @__PURE__ */ b(
+    "div",
+    {
+      ...d,
+      "data-featured-icon": !0,
+      className: f(
+        "relative flex shrink-0 items-center justify-center",
+        c[i],
+        s[o].base,
+        s[o].sizes[i],
+        s[o].colors[t],
+        r.className
+      ),
+      children: [
+        l(e) && /* @__PURE__ */ a(e, { "data-icon": !0, className: "z-1" }),
+        n(e) && /* @__PURE__ */ a("div", { className: "z-1", children: e }),
+        r.children
+      ]
+    }
+  );
+};
+export {
+  y as FeaturedIcon
+};

package/dist/primitives/featured-icon/index.d.ts

@@ -0,0 +1,2 @@
+export { FeaturedIcon, type FeaturedIconProps } from './featured-icon';
+//# sourceMappingURL=index.d.ts.map

package/dist/primitives/featured-icon/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/primitives/featured-icon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAC"}