@wallarm-org/design-system 0.1.0

package/dist/components/Badge/Badge.d.ts

@@ -0,0 +1,12 @@
+import type { FC, HTMLAttributes, PropsWithChildren, Ref } from 'react';
+import type { VariantProps } from 'class-variance-authority';
+import { badgeVariants } from './classes';
+type BadgeNativeProps = HTMLAttributes<HTMLDivElement>;
+type BadgeVariantProps = VariantProps<typeof badgeVariants>;
+interface BadgeBaseProps {
+    ref?: Ref<HTMLDivElement>;
+    asChild?: boolean;
+}
+export type BadgeProps = BadgeNativeProps & BadgeVariantProps & BadgeBaseProps & PropsWithChildren;
+export declare const Badge: FC<BadgeProps>;
+export {};

package/dist/components/Badge/Badge.js

@@ -0,0 +1,32 @@
+import { jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { cn } from "../../utils/cn.js";
+import { isIconOnly } from "../../utils/isIconOnly.js";
+import { badgeVariants } from "./classes.js";
+const Badge = ({ ref, className, variant = 'default', size = 'medium', type = 'solid', color = 'slate', muted = false, textVariant = 'default', asChild = false, children, onClick, ...props })=>{
+    const badgeClasses = cn(badgeVariants({
+        variant,
+        size,
+        type,
+        color,
+        muted,
+        textVariant,
+        isIconOnly: isIconOnly(children)
+    }), className);
+    const handleClick = (event)=>{
+        event.stopPropagation();
+        onClick?.(event);
+    };
+    const Comp = asChild ? Slot : 'div';
+    return /*#__PURE__*/ jsx(Comp, {
+        ...props,
+        ref: ref,
+        className: badgeClasses,
+        "data-slot": "badge",
+        "data-type": type,
+        onClick: handleClick,
+        children: children
+    });
+};
+Badge.displayName = 'Badge';
+export { Badge };

package/dist/components/Badge/classes.d.ts

@@ -0,0 +1,10 @@
+import type { BadgeColor } from './types';
+export declare const badgeVariants: (props?: ({
+    variant?: "default" | "dotted" | null | undefined;
+    size?: "medium" | "large" | null | undefined;
+    isIconOnly?: boolean | null | undefined;
+    type?: "text" | "secondary" | "outline" | "solid" | "text-color" | null | undefined;
+    color?: BadgeColor | null | undefined;
+    muted?: boolean | null | undefined;
+    textVariant?: "code" | "default" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/components/Badge/classes.js

@@ -0,0 +1,54 @@
+import { cva } from "class-variance-authority";
+import { BadgeColorEnum } from "./constants.js";
+import { generateBadgeVariants } from "./generateBadgeVariants.js";
+const badgeVariants = cva('inline-flex items-center gap-4 rounded-8', {
+    variants: {
+        variant: {
+            default: '',
+            dotted: 'before:w-6 before:h-6 before:bg-current before:rounded-2'
+        },
+        size: {
+            medium: 'h-20 py-2 px-6 [&_svg]:icon-sm',
+            large: 'h-24 py-4 px-6 [&_svg]:icon-md'
+        },
+        isIconOnly: {
+            true: 'justify-center p-2'
+        },
+        type: {
+            solid: '',
+            secondary: '',
+            outline: 'border-1 bg-badge-badge-bg',
+            text: 'bg-transparent',
+            'text-color': 'bg-transparent'
+        },
+        color: Object.values(BadgeColorEnum).reduce((acc, color)=>({
+                ...acc,
+                [color]: ''
+            }), {}),
+        muted: {
+            true: '',
+            false: ''
+        },
+        textVariant: {
+            default: 'font-sans-display text-xs font-medium',
+            code: 'font-mono leading-sm text-xs font-medium'
+        }
+    },
+    compoundVariants: [
+        ...generateBadgeVariants(),
+        {
+            isIconOnly: true,
+            size: 'large',
+            className: 'w-24'
+        },
+        {
+            isIconOnly: true,
+            size: 'medium',
+            className: 'w-20'
+        }
+    ],
+    defaultVariants: {
+        variant: 'default'
+    }
+});
+export { badgeVariants };

package/dist/components/Badge/constants.d.ts

@@ -0,0 +1,30 @@
+export declare const BadgeTypeEnum: {
+    readonly Solid: "solid";
+    readonly Secondary: "secondary";
+    readonly Outline: "outline";
+    readonly Text: "text";
+    readonly TextColor: "text-color";
+};
+export declare const BadgeColorEnum: {
+    readonly Slate: "slate";
+    readonly Red: "red";
+    readonly WOrange: "w-orange";
+    readonly Amber: "amber";
+    readonly Yellow: "yellow";
+    readonly Lime: "lime";
+    readonly Green: "green";
+    readonly Emerald: "emerald";
+    readonly Teal: "teal";
+    readonly Cyan: "cyan";
+    readonly Sky: "sky";
+    readonly Blue: "blue";
+    readonly Indigo: "indigo";
+    readonly Violet: "violet";
+    readonly Fuchsia: "fuchsia";
+    readonly Pink: "pink";
+    readonly Rose: "rose";
+    readonly Gray: "gray";
+    readonly Zinc: "zinc";
+    readonly Neutral: "neutral";
+    readonly Stone: "stone";
+};

package/dist/components/Badge/constants.js

@@ -0,0 +1,31 @@
+const BadgeTypeEnum = {
+    Solid: 'solid',
+    Secondary: 'secondary',
+    Outline: 'outline',
+    Text: 'text',
+    TextColor: 'text-color'
+};
+const BadgeColorEnum = {
+    Slate: 'slate',
+    Red: 'red',
+    WOrange: 'w-orange',
+    Amber: 'amber',
+    Yellow: 'yellow',
+    Lime: 'lime',
+    Green: 'green',
+    Emerald: 'emerald',
+    Teal: 'teal',
+    Cyan: 'cyan',
+    Sky: 'sky',
+    Blue: 'blue',
+    Indigo: 'indigo',
+    Violet: 'violet',
+    Fuchsia: 'fuchsia',
+    Pink: 'pink',
+    Rose: 'rose',
+    Gray: 'gray',
+    Zinc: 'zinc',
+    Neutral: 'neutral',
+    Stone: 'stone'
+};
+export { BadgeColorEnum, BadgeTypeEnum };

package/dist/components/Badge/generateBadgeVariants.d.ts

@@ -0,0 +1,14 @@
+import type { BadgeColor, BadgeType } from './types';
+interface ColorVariant {
+    type: BadgeType;
+    color: BadgeColor;
+    muted?: boolean;
+    className: string;
+}
+export declare const badgeColorsMuted: BadgeColor[];
+/**
+ * Generates all compound variants for badge colors and types
+ * Uses a static class map to ensure Tailwind can detect all classes
+ */
+export declare const generateBadgeVariants: () => ColorVariant[];
+export {};

package/dist/components/Badge/generateBadgeVariants.js

@@ -0,0 +1,232 @@
+import { BadgeColorEnum } from "./constants.js";
+const badgeColorsMuted = [
+    BadgeColorEnum.Slate,
+    BadgeColorEnum.Gray,
+    BadgeColorEnum.Zinc,
+    BadgeColorEnum.Neutral,
+    BadgeColorEnum.Stone
+];
+const generateBadgeVariants = ()=>{
+    const colorClassMap = {
+        slate: {
+            solid: 'bg-badge-slate-strong text-badge-on-solid',
+            solidMuted: 'bg-badge-slate-dark-alt text-badge-on-solid',
+            secondary: 'bg-badge-slate-light text-badge-slate-dark',
+            secondaryMuted: 'bg-badge-slate-light text-badge-slate-muted',
+            outline: 'border-badge-slate-dark text-badge-slate-dark',
+            outlineMuted: 'border-badge-slate-muted text-badge-slate-muted',
+            text: 'text-badge-label-primary [&_svg]:text-badge-slate-strong before:bg-badge-slate-strong',
+            textMuted: 'text-badge-label-primary [&_svg]:text-badge-slate-muted before:bg-badge-slate-muted',
+            textColor: 'text-badge-slate-strong',
+            textColorMuted: 'text-badge-slate-muted'
+        },
+        gray: {
+            solid: 'bg-badge-gray-strong text-badge-on-solid',
+            solidMuted: 'bg-badge-gray-dark-alt text-badge-on-solid',
+            secondary: 'bg-badge-gray-light text-badge-gray-dark',
+            secondaryMuted: 'bg-badge-gray-light text-badge-gray-muted',
+            outline: 'border-badge-gray-dark text-badge-gray-dark',
+            outlineMuted: 'border-badge-gray-muted text-badge-gray-muted',
+            text: 'text-badge-label-primary [&_svg]:text-badge-gray-strong before:bg-badge-gray-strong',
+            textMuted: 'text-badge-label-primary [&_svg]:text-badge-gray-muted before:bg-badge-gray-muted',
+            textColor: 'text-badge-gray-strong',
+            textColorMuted: 'text-badge-gray-muted'
+        },
+        zinc: {
+            solid: 'bg-badge-zinc-strong text-badge-on-solid',
+            solidMuted: 'bg-badge-zinc-dark-alt text-badge-on-solid',
+            secondary: 'bg-badge-zinc-light text-badge-zinc-dark',
+            secondaryMuted: 'bg-badge-zinc-light text-badge-zinc-muted',
+            outline: 'border-badge-zinc-dark text-badge-zinc-dark',
+            outlineMuted: 'border-badge-zinc-muted text-badge-zinc-muted',
+            text: 'text-badge-label-primary [&_svg]:text-badge-zinc-strong before:bg-badge-zinc-strong',
+            textMuted: 'text-badge-label-primary [&_svg]:text-badge-zinc-muted before:bg-badge-zinc-muted',
+            textColor: 'text-badge-zinc-strong',
+            textColorMuted: 'text-badge-zinc-muted'
+        },
+        neutral: {
+            solid: 'bg-badge-neutral-strong text-badge-on-solid',
+            solidMuted: 'bg-badge-neutral-dark-alt text-badge-on-solid',
+            secondary: 'bg-badge-neutral-light text-badge-neutral-dark',
+            secondaryMuted: 'bg-badge-neutral-light text-badge-neutral-muted',
+            outline: 'border-badge-neutral-dark text-badge-neutral-dark',
+            outlineMuted: 'border-badge-neutral-muted text-badge-neutral-muted',
+            text: 'text-badge-label-primary [&_svg]:text-badge-neutral-strong before:bg-badge-neutral-strong',
+            textMuted: 'text-badge-label-primary [&_svg]:text-badge-neutral-muted before:bg-badge-neutral-muted',
+            textColor: 'text-badge-neutral-strong',
+            textColorMuted: 'text-badge-neutral-muted'
+        },
+        stone: {
+            solid: 'bg-badge-stone-strong text-badge-on-solid',
+            solidMuted: 'bg-badge-stone-dark-alt text-badge-on-solid',
+            secondary: 'bg-badge-stone-light text-badge-stone-dark',
+            secondaryMuted: 'bg-badge-stone-light text-badge-stone-muted',
+            outline: 'border-badge-stone-dark text-badge-stone-dark',
+            outlineMuted: 'border-badge-stone-muted text-badge-stone-muted',
+            text: 'text-badge-label-primary [&_svg]:text-badge-stone-strong before:bg-badge-stone-strong',
+            textMuted: 'text-badge-label-primary [&_svg]:text-badge-stone-muted before:bg-badge-stone-muted',
+            textColor: 'text-badge-stone-strong',
+            textColorMuted: 'text-badge-stone-muted'
+        },
+        red: {
+            solid: 'bg-badge-red-strong text-badge-on-solid',
+            secondary: 'bg-badge-red-light text-badge-red-dark',
+            outline: 'border-badge-red-dark text-badge-red-dark',
+            text: 'text-badge-label-primary [&_svg]:text-badge-red-strong before:bg-badge-red-strong',
+            textColor: 'text-badge-red-strong'
+        },
+        'w-orange': {
+            solid: 'bg-badge-w-orange-strong text-badge-on-solid',
+            secondary: 'bg-badge-w-orange-light text-badge-w-orange-dark',
+            outline: 'border-badge-w-orange-dark text-badge-w-orange-dark',
+            text: 'text-badge-label-primary [&_svg]:text-badge-w-orange-strong before:bg-badge-w-orange-strong',
+            textColor: 'text-badge-w-orange-strong'
+        },
+        amber: {
+            solid: 'bg-badge-amber-strong text-badge-on-solid',
+            secondary: 'bg-badge-amber-light text-badge-amber-dark',
+            outline: 'border-badge-amber-dark text-badge-amber-dark',
+            text: 'text-badge-label-primary [&_svg]:text-badge-amber-strong before:bg-badge-amber-strong',
+            textColor: 'text-badge-amber-strong'
+        },
+        yellow: {
+            solid: 'bg-badge-yellow-strong text-badge-on-solid',
+            secondary: 'bg-badge-yellow-light text-badge-yellow-dark',
+            outline: 'border-badge-yellow-dark text-badge-yellow-dark',
+            text: 'text-badge-label-primary [&_svg]:text-badge-yellow-strong before:bg-badge-yellow-strong',
+            textColor: 'text-badge-yellow-strong'
+        },
+        lime: {
+            solid: 'bg-badge-lime-strong text-badge-on-solid',
+            secondary: 'bg-badge-lime-light text-badge-lime-dark',
+            outline: 'border-badge-lime-dark text-badge-lime-dark',
+            text: 'text-badge-label-primary [&_svg]:text-badge-lime-strong before:bg-badge-lime-strong',
+            textColor: 'text-badge-lime-strong'
+        },
+        green: {
+            solid: 'bg-badge-green-strong text-badge-on-solid',
+            secondary: 'bg-badge-green-light text-badge-green-dark',
+            outline: 'border-badge-green-dark text-badge-green-dark',
+            text: 'text-badge-label-primary [&_svg]:text-badge-green-strong before:bg-badge-green-strong',
+            textColor: 'text-badge-green-strong'
+        },
+        emerald: {
+            solid: 'bg-badge-emerald-strong text-badge-on-solid',
+            secondary: 'bg-badge-emerald-light text-badge-emerald-dark',
+            outline: 'border-badge-emerald-dark text-badge-emerald-dark',
+            text: 'text-badge-label-primary [&_svg]:text-badge-emerald-strong before:bg-badge-emerald-strong',
+            textColor: 'text-badge-emerald-strong'
+        },
+        teal: {
+            solid: 'bg-badge-teal-strong text-badge-on-solid',
+            secondary: 'bg-badge-teal-light text-badge-teal-dark',
+            outline: 'border-badge-teal-dark text-badge-teal-dark',
+            text: 'text-badge-label-primary [&_svg]:text-badge-teal-strong before:bg-badge-teal-strong',
+            textColor: 'text-badge-teal-strong'
+        },
+        cyan: {
+            solid: 'bg-badge-cyan-strong text-badge-on-solid',
+            secondary: 'bg-badge-cyan-light text-badge-cyan-dark',
+            outline: 'border-badge-cyan-dark text-badge-cyan-dark',
+            text: 'text-badge-label-primary [&_svg]:text-badge-cyan-strong before:bg-badge-cyan-strong',
+            textColor: 'text-badge-cyan-strong'
+        },
+        sky: {
+            solid: 'bg-badge-sky-strong text-badge-on-solid',
+            secondary: 'bg-badge-sky-light text-badge-sky-dark',
+            outline: 'border-badge-sky-dark text-badge-sky-dark',
+            text: 'text-badge-label-primary [&_svg]:text-badge-sky-strong before:bg-badge-sky-strong',
+            textColor: 'text-badge-sky-strong'
+        },
+        blue: {
+            solid: 'bg-badge-blue-strong text-badge-on-solid',
+            secondary: 'bg-badge-blue-light text-badge-blue-dark',
+            outline: 'border-badge-blue-dark text-badge-blue-dark',
+            text: 'text-badge-label-primary [&_svg]:text-badge-blue-strong before:bg-badge-blue-strong',
+            textColor: 'text-badge-blue-strong'
+        },
+        indigo: {
+            solid: 'bg-badge-indigo-strong text-badge-on-solid',
+            secondary: 'bg-badge-indigo-light text-badge-indigo-dark',
+            outline: 'border-badge-indigo-dark text-badge-indigo-dark',
+            text: 'text-badge-label-primary [&_svg]:text-badge-indigo-strong before:bg-badge-indigo-strong',
+            textColor: 'text-badge-indigo-strong'
+        },
+        violet: {
+            solid: 'bg-badge-violet-strong text-badge-on-solid',
+            secondary: 'bg-badge-violet-light text-badge-violet-dark',
+            outline: 'border-badge-violet-dark text-badge-violet-dark',
+            text: 'text-badge-label-primary [&_svg]:text-badge-violet-strong before:bg-badge-violet-strong',
+            textColor: 'text-badge-violet-strong'
+        },
+        fuchsia: {
+            solid: 'bg-badge-fuchsia-strong text-badge-on-solid',
+            secondary: 'bg-badge-fuchsia-light text-badge-fuchsia-dark',
+            outline: 'border-badge-fuchsia-dark text-badge-fuchsia-dark',
+            text: 'text-badge-label-primary [&_svg]:text-badge-fuchsia-strong before:bg-badge-fuchsia-strong',
+            textColor: 'text-badge-fuchsia-strong'
+        },
+        pink: {
+            solid: 'bg-badge-pink-strong text-badge-on-solid',
+            secondary: 'bg-badge-pink-light text-badge-pink-dark',
+            outline: 'border-badge-pink-dark text-badge-pink-dark',
+            text: 'text-badge-label-primary [&_svg]:text-badge-pink-strong before:bg-badge-pink-strong',
+            textColor: 'text-badge-pink-strong'
+        },
+        rose: {
+            solid: 'bg-badge-rose-strong text-badge-on-solid',
+            secondary: 'bg-badge-rose-light text-badge-rose-dark',
+            outline: 'border-badge-rose-dark text-badge-rose-dark',
+            text: 'text-badge-label-primary [&_svg]:text-badge-rose-strong before:bg-badge-rose-strong',
+            textColor: 'text-badge-rose-strong'
+        }
+    };
+    const variants = [];
+    const createVariant = (type, color, className, muted = false)=>({
+            type,
+            color,
+            muted,
+            className
+        });
+    badgeColorsMuted.forEach((color)=>{
+        const classes = colorClassMap[color];
+        variants.push(createVariant('solid', color, classes.solid, false));
+        variants.push(createVariant('solid', color, classes.solidMuted ?? '', true));
+        variants.push(createVariant('secondary', color, classes.secondary, false));
+        variants.push(createVariant('secondary', color, classes.secondaryMuted ?? '', true));
+        variants.push(createVariant('outline', color, classes.outline, false));
+        variants.push(createVariant('outline', color, classes.outlineMuted ?? '', true));
+        variants.push(createVariant('text', color, classes.text, false));
+        variants.push(createVariant('text', color, classes.textMuted ?? '', true));
+        variants.push(createVariant('text-color', color, classes.textColor, false));
+        variants.push(createVariant('text-color', color, classes.textColorMuted ?? '', true));
+    });
+    const colorsWithoutMuted = [
+        BadgeColorEnum.Red,
+        BadgeColorEnum.WOrange,
+        BadgeColorEnum.Amber,
+        BadgeColorEnum.Yellow,
+        BadgeColorEnum.Lime,
+        BadgeColorEnum.Green,
+        BadgeColorEnum.Emerald,
+        BadgeColorEnum.Teal,
+        BadgeColorEnum.Cyan,
+        BadgeColorEnum.Sky,
+        BadgeColorEnum.Blue,
+        BadgeColorEnum.Indigo,
+        BadgeColorEnum.Violet,
+        BadgeColorEnum.Fuchsia,
+        BadgeColorEnum.Pink,
+        BadgeColorEnum.Rose
+    ];
+    colorsWithoutMuted.forEach((color)=>{
+        const classes = colorClassMap[color];
+        variants.push(createVariant('solid', color, classes.solid));
+        variants.push(createVariant('secondary', color, classes.secondary));
+        variants.push(createVariant('outline', color, classes.outline));
+        variants.push(createVariant('text', color, classes.text));
+        variants.push(createVariant('text-color', color, classes.textColor));
+    });
+    return variants;
+};
+export { badgeColorsMuted, generateBadgeVariants };

package/dist/components/Badge/index.d.ts

@@ -0,0 +1,2 @@
+export { Badge, type BadgeProps } from './Badge';
+export { badgeVariants } from './classes';

package/dist/components/Badge/index.js

@@ -0,0 +1,3 @@
+import { Badge } from "./Badge.js";
+import { badgeVariants } from "./classes.js";
+export { Badge, badgeVariants };

package/dist/components/Badge/types.d.ts

@@ -0,0 +1,3 @@
+import type { BadgeColorEnum, BadgeTypeEnum } from './constants';
+export type BadgeType = (typeof BadgeTypeEnum)[keyof typeof BadgeTypeEnum];
+export type BadgeColor = (typeof BadgeColorEnum)[keyof typeof BadgeColorEnum];

package/dist/components/Breadcrumbs/Breadcrumbs.d.ts

@@ -0,0 +1,9 @@
+import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
+export type BreadcrumbsProps = HTMLAttributes<HTMLElement> & {
+    ref?: Ref<HTMLElement>;
+    /** Additional CSS classes */
+    className?: string;
+    /** Child breadcrumb items and separators */
+    children?: ReactNode;
+};
+export declare const Breadcrumbs: FC<BreadcrumbsProps>;

package/dist/components/Breadcrumbs/Breadcrumbs.figma.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Breadcrumbs/Breadcrumbs.figma.js

@@ -0,0 +1,38 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import code_connect from "@figma/code-connect";
+import { CircleDashed } from "../../icons/index.js";
+import { Breadcrumbs } from "./Breadcrumbs.js";
+import { BreadcrumbsItem } from "./BreadcrumbsItem.js";
+const figmaNodeUrl = 'https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/wip-components?node-id=821-16083&t=NsOLklpMC14E4hYl-4';
+code_connect.connect(Breadcrumbs, figmaNodeUrl, {
+    example: ()=>/*#__PURE__*/ jsxs(Breadcrumbs, {
+            children: [
+                /*#__PURE__*/ jsxs(BreadcrumbsItem, {
+                    href: "#",
+                    children: [
+                        /*#__PURE__*/ jsx(CircleDashed, {
+                            size: "md"
+                        }),
+                        "Breadcrumb"
+                    ]
+                }),
+                /*#__PURE__*/ jsxs(BreadcrumbsItem, {
+                    href: "#",
+                    children: [
+                        "Breadcrumb",
+                        /*#__PURE__*/ jsx(CircleDashed, {
+                            size: "md"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsxs(BreadcrumbsItem, {
+                    children: [
+                        /*#__PURE__*/ jsx(CircleDashed, {
+                            size: "md"
+                        }),
+                        "Current"
+                    ]
+                })
+            ]
+        })
+});

package/dist/components/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,31 @@
+import { jsx } from "react/jsx-runtime";
+import { Children, cloneElement, isValidElement } from "react";
+import { cn } from "../../utils/cn.js";
+import { BreadcrumbsSeparator } from "./BreadcrumbsSeparator.js";
+let separatorId = 0;
+const Breadcrumbs = ({ className, children, ...props })=>{
+    const childrenArray = Children.toArray(children);
+    const childrenWithSeparators = [];
+    childrenArray.forEach((child, index)=>{
+        const isLastItem = index === childrenArray.length - 1;
+        const clonedChild = /*#__PURE__*/ isValidElement(child) ? /*#__PURE__*/ cloneElement(child, {
+            isCurrent: isLastItem
+        }) : child;
+        childrenWithSeparators.push(clonedChild);
+        if (index < childrenArray.length - 1) {
+            separatorId += 1;
+            childrenWithSeparators.push(/*#__PURE__*/ jsx(BreadcrumbsSeparator, {}, `separator-${separatorId}`));
+        }
+    });
+    return /*#__PURE__*/ jsx("nav", {
+        className: cn('flex items-center', className),
+        "aria-label": "Breadcrumb",
+        ...props,
+        children: /*#__PURE__*/ jsx("ol", {
+            className: "flex items-center gap-0",
+            children: childrenWithSeparators
+        })
+    });
+};
+Breadcrumbs.displayName = 'Breadcrumbs';
+export { Breadcrumbs };

package/dist/components/Breadcrumbs/BreadcrumbsEllipsis.d.ts

@@ -0,0 +1,18 @@
+import type { ButtonHTMLAttributes, FC, Ref } from 'react';
+export type BreadcrumbsEllipsisProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+    ref?: Ref<HTMLButtonElement>;
+    /** Additional CSS classes */
+    className?: string;
+};
+/**
+ * Ellipsis component for truncated breadcrumbs.
+ *
+ * Used to indicate that there are hidden breadcrumb levels between
+ * the visible ones. Can be clickable to reveal the hidden items.
+ *
+ * @example
+ * ```tsx
+ * <BreadcrumbsEllipsis onClick={showMoreItems} />
+ * ```
+ */
+export declare const BreadcrumbsEllipsis: FC<BreadcrumbsEllipsisProps>;

package/dist/components/Breadcrumbs/BreadcrumbsEllipsis.js

@@ -0,0 +1,22 @@
+import { jsx } from "react/jsx-runtime";
+import { Ellipsis } from "../../icons/index.js";
+import { cn } from "../../utils/cn.js";
+const BreadcrumbsEllipsis = ({ className, ...props })=>/*#__PURE__*/ jsx("li", {
+        children: /*#__PURE__*/ jsx("button", {
+            type: "button",
+            className: cn([
+                'flex items-center gap-4 min-h-[20px] px-4 py-0 rounded-6',
+                'text-sm leading-5 text-text-secondary transition-colors',
+                'bg-transparent hover:bg-states-primary-hover active:bg-states-primary-pressed',
+                'focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-focus-primary',
+                'cursor-pointer'
+            ], className),
+            "aria-label": "Show more breadcrumbs",
+            ...props,
+            children: /*#__PURE__*/ jsx(Ellipsis, {
+                size: "md"
+            })
+        })
+    });
+BreadcrumbsEllipsis.displayName = 'BreadcrumbsEllipsis';
+export { BreadcrumbsEllipsis };

package/dist/components/Breadcrumbs/BreadcrumbsItem.d.ts

@@ -0,0 +1,38 @@
+import type { FC, MouseEventHandler, ReactNode, Ref } from 'react';
+import { type VariantProps } from 'class-variance-authority';
+declare const breadcrumbsItemVariants: (props?: ({
+    isCurrent?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type BreadcrumbsItemProps = Omit<VariantProps<typeof breadcrumbsItemVariants>, 'isCurrent'> & {
+    ref?: Ref<HTMLButtonElement | HTMLAnchorElement>;
+    /** Additional CSS classes */
+    className?: string;
+    /** If provided, renders as a link instead of button */
+    href?: string;
+    /** Child content (text, icons, etc.) */
+    children?: ReactNode;
+    /** Click handler for buttons */
+    onClick?: MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;
+    /** ARIA label for accessibility */
+    'aria-label'?: string;
+    /** @internal - Whether this is the current/active page (set automatically by parent) */
+    isCurrent?: boolean;
+};
+/**
+ * Individual breadcrumb item component.
+ *
+ * Represents a single level in the navigation hierarchy. Can be clickable
+ * (for navigation) or static (for the current page).
+ *
+ * @example
+ * ```tsx
+ * <BreadcrumbsItem href="/products">Products</BreadcrumbsItem>
+ * <BreadcrumbsItem onClick={() => alert('clicked')}>Interactive</BreadcrumbsItem>
+ * <BreadcrumbsItem href="/home">
+ *   <Home size="md" />
+ *   Home
+ * </BreadcrumbsItem>
+ * ```
+ */
+export declare const BreadcrumbsItem: FC<BreadcrumbsItemProps>;
+export {};

package/dist/components/Breadcrumbs/BreadcrumbsItem.js

@@ -0,0 +1,51 @@
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "../../utils/cn.js";
+const breadcrumbsItemVariants = cva([
+    'flex items-center gap-4 min-h-[20px] px-4 py-0 rounded-6',
+    'text-sm leading-5 whitespace-nowrap transition-colors font-sans-display',
+    'focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-focus-primary',
+    'cursor-pointer'
+], {
+    variants: {
+        isCurrent: {
+            true: [
+                'text-text-primary font-medium',
+                'bg-transparent hover:bg-states-primary-hover active:bg-states-primary-pressed'
+            ],
+            false: [
+                'text-text-secondary font-normal',
+                'bg-transparent hover:bg-states-primary-hover active:bg-states-primary-pressed'
+            ]
+        }
+    },
+    defaultVariants: {
+        isCurrent: false
+    }
+});
+const BreadcrumbsItem = ({ className, isCurrent = false, href, children, onClick, 'aria-label': ariaLabel, ...props })=>{
+    const isLink = href && !isCurrent;
+    const commonClasses = cn(breadcrumbsItemVariants({
+        isCurrent
+    }), className);
+    return /*#__PURE__*/ jsx("li", {
+        children: isLink ? /*#__PURE__*/ jsx("a", {
+            href: href,
+            className: commonClasses,
+            "aria-label": ariaLabel,
+            ...props,
+            children: children
+        }) : /*#__PURE__*/ jsx("button", {
+            type: "button",
+            onClick: onClick,
+            className: commonClasses,
+            "aria-current": isCurrent ? 'page' : void 0,
+            tabIndex: 0,
+            "aria-label": ariaLabel,
+            ...props,
+            children: children
+        })
+    });
+};
+BreadcrumbsItem.displayName = 'BreadcrumbsItem';
+export { BreadcrumbsItem };