@pathscale/ui 0.1.0 → 1.2.0

package/dist/components/background/Background.d.ts

@@ -0,0 +1,5 @@
+import type { Component, JSX } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export type BackgroundProps = IComponentBaseProps & JSX.HTMLAttributes<HTMLDivElement>;
+declare const Background: Component<BackgroundProps>;
+export default Background;

package/dist/components/background/Background.js

@@ -0,0 +1,22 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
+const Background_Background = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "class",
+        "className"
+    ]);
+    const classes = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("bg-base-100 min-h-screen", local.class, local.className));
+    return (()=>{
+        var _el$ = _tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+            get ["class"] () {
+                return classes();
+            }
+        }, others), false, false);
+        return _el$;
+    })();
+};
+const Background = Background_Background;
+export { Background as default };

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

@@ -0,0 +1 @@
+export { default, type BackgroundProps } from "./Background";

package/dist/components/background/index.js

@@ -0,0 +1,3 @@
+import * as __WEBPACK_EXTERNAL_MODULE__Background_js_2c32b392__ from "./Background.js";
+var __webpack_exports__default = __WEBPACK_EXTERNAL_MODULE__Background_js_2c32b392__["default"];
+export { __webpack_exports__default as default };

package/dist/components/badge/Badge.css

@@ -0,0 +1,164 @@
+@layer components {
+  .badge {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    gap: 0.125rem;
+    font-weight: 500;
+
+    min-height: 1.75rem;
+    min-width: 1.75rem;
+    border-radius: 1.5rem;
+    font-size: 0.75rem;
+    line-height: 1.34;
+
+    --badge-bg: var(--color-default);
+    --badge-fg: var(--color-default-foreground);
+    --badge-border: var(--color-background);
+
+    background-color: var(--badge-bg);
+    color: var(--badge-fg);
+    border: 1px solid var(--badge-border);
+  }
+
+  .badge__label {
+    padding-inline: 0.125rem;
+  }
+
+  .badge-anchor {
+    position: relative;
+    display: inline-flex;
+    flex-shrink: 0;
+  }
+
+  .badge--lg {
+    min-height: 2rem;
+    min-width: 2rem;
+    border-radius: 1rem;
+    font-size: 0.875rem;
+    line-height: 1.43;
+  }
+
+  .badge--md {
+    /* Default size */
+  }
+
+  .badge--sm {
+    min-height: 1rem;
+    min-width: 1rem;
+    border-radius: 0.75rem;
+    font-size: 10px;
+    line-height: 1.34;
+  }
+
+  .badge--accent {
+    --badge-fg: var(--color-accent);
+  }
+
+  .badge--default {
+    --badge-fg: var(--color-default-foreground);
+  }
+
+  .badge--success {
+    --badge-fg: var(--color-success);
+  }
+
+  .badge--warning {
+    --badge-fg: var(--color-warning);
+  }
+
+  .badge--danger {
+    --badge-fg: var(--color-danger);
+  }
+
+  .badge--primary {
+    /* Compound variants handle tokens */
+  }
+
+  .badge--secondary {
+    /* Base behavior */
+  }
+
+  .badge--soft {
+    /* Compound variants handle tokens */
+  }
+
+  .badge--top-right {
+    position: absolute;
+    top: 0;
+    right: 0;
+    transform: translate(25%, -25%);
+  }
+
+  .badge--top-left {
+    position: absolute;
+    top: 0;
+    left: 0;
+    transform: translate(-25%, -25%);
+  }
+
+  .badge--bottom-right {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    transform: translate(25%, 25%);
+  }
+
+  .badge--bottom-left {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    transform: translate(-25%, 25%);
+  }
+
+  .badge--primary.badge--accent {
+    --badge-bg: var(--color-accent);
+    --badge-fg: var(--color-accent-foreground);
+  }
+
+  .badge--primary.badge--default {
+    --badge-bg: var(--color-default);
+    --badge-fg: var(--color-default-foreground);
+  }
+
+  .badge--primary.badge--success {
+    --badge-bg: var(--color-success);
+    --badge-fg: var(--color-success-foreground);
+  }
+
+  .badge--primary.badge--warning {
+    --badge-bg: var(--color-warning);
+    --badge-fg: var(--color-warning-foreground);
+  }
+
+  .badge--primary.badge--danger {
+    --badge-bg: var(--color-danger);
+    --badge-fg: var(--color-danger-foreground);
+  }
+
+  .badge--soft.badge--accent {
+    --badge-bg: var(--color-accent-soft);
+    --badge-fg: var(--color-accent-soft-foreground);
+  }
+
+  .badge--soft.badge--default {
+    --badge-bg: var(--color-default);
+    --badge-fg: var(--color-default-foreground);
+  }
+
+  .badge--soft.badge--success {
+    --badge-bg: var(--color-success-soft);
+    --badge-fg: var(--color-success-soft-foreground);
+  }
+
+  .badge--soft.badge--warning {
+    --badge-bg: var(--color-warning-soft);
+    --badge-fg: var(--color-warning-soft-foreground);
+  }
+
+  .badge--soft.badge--danger {
+    --badge-bg: var(--color-danger-soft);
+    --badge-fg: var(--color-danger-soft-foreground);
+  }
+}

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

@@ -0,0 +1,26 @@
+import { type JSX } from "solid-js";
+import "./Badge.css";
+interface BadgeAnchorProps extends JSX.HTMLAttributes<HTMLSpanElement> {
+    class?: string;
+    children: JSX.Element;
+}
+declare const BadgeAnchor: (props: BadgeAnchorProps) => JSX.Element;
+type BadgeColor = "default" | "accent" | "success" | "warning" | "danger";
+type BadgeVariant = "primary" | "secondary" | "soft";
+type BadgeSize = "sm" | "md" | "lg";
+type BadgePlacement = "top-right" | "top-left" | "bottom-right" | "bottom-left";
+interface BadgeRootProps extends Omit<JSX.HTMLAttributes<HTMLSpanElement>, "color"> {
+    class?: string;
+    children?: JSX.Element;
+    color?: BadgeColor;
+    variant?: BadgeVariant;
+    size?: BadgeSize;
+    placement?: BadgePlacement;
+}
+declare const BadgeRoot: (props: BadgeRootProps) => JSX.Element;
+interface BadgeLabelProps extends JSX.HTMLAttributes<HTMLSpanElement> {
+    class?: string;
+}
+declare const BadgeLabel: (props: BadgeLabelProps) => JSX.Element;
+export { BadgeRoot, BadgeLabel, BadgeAnchor };
+export type { BadgeRootProps, BadgeLabelProps, BadgeAnchorProps };

package/dist/components/badge/Badge.js

@@ -0,0 +1,98 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+import "./Badge.css";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span data-slot=badge-label>");
+const BadgeAnchor = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class"
+    ]);
+    return (()=>{
+        var _el$ = _tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("badge-anchor", local.class);
+            },
+            "data-slot": "badge-anchor"
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.children);
+        return _el$;
+    })();
+};
+const BADGE_SIZE_CLASS = {
+    sm: "badge--sm",
+    md: "badge--md",
+    lg: "badge--lg"
+};
+const BADGE_COLOR_CLASS = {
+    default: "badge--default",
+    accent: "badge--accent",
+    success: "badge--success",
+    warning: "badge--warning",
+    danger: "badge--danger"
+};
+const BADGE_VARIANT_CLASS = {
+    primary: "badge--primary",
+    secondary: "badge--secondary",
+    soft: "badge--soft"
+};
+const BADGE_PLACEMENT_CLASS = {
+    "top-right": "badge--top-right",
+    "top-left": "badge--top-left",
+    "bottom-right": "badge--bottom-right",
+    "bottom-left": "badge--bottom-left"
+};
+const BadgeRoot = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "color",
+        "variant",
+        "size",
+        "placement"
+    ]);
+    const classes = ()=>{
+        const size = local.size ?? "md";
+        const color = local.color ?? "default";
+        const variant = local.variant ?? "primary";
+        const placement = local.placement ?? "top-right";
+        return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)((0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)("badge", BADGE_SIZE_CLASS[size], BADGE_COLOR_CLASS[color], BADGE_VARIANT_CLASS[variant], BADGE_PLACEMENT_CLASS[placement], local.class));
+    };
+    const badgeChildren = ()=>{
+        const c = local.children;
+        if ("string" == typeof c || "number" == typeof c) return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(BadgeLabel, {
+            children: c
+        });
+        return c;
+    };
+    return (()=>{
+        var _el$2 = _tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            get ["class"] () {
+                return classes();
+            },
+            "data-slot": "badge"
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, badgeChildren);
+        return _el$2;
+    })();
+};
+const BadgeLabel = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class"
+    ]);
+    return (()=>{
+        var _el$3 = _tmpl$2();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$3, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("badge__label", local.class);
+            }
+        }, others), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, ()=>local.children);
+        return _el$3;
+    })();
+};
+export { BadgeAnchor, BadgeLabel, BadgeRoot };

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

@@ -0,0 +1,9 @@
+import { BadgeAnchor, BadgeLabel, BadgeRoot } from "./Badge";
+declare const Badge: ((props: import("./Badge").BadgeRootProps) => import("solid-js").JSX.Element) & {
+    Anchor: (props: import("./Badge").BadgeAnchorProps) => import("solid-js").JSX.Element;
+    Label: (props: import("./Badge").BadgeLabelProps) => import("solid-js").JSX.Element;
+    Root: (props: import("./Badge").BadgeRootProps) => import("solid-js").JSX.Element;
+};
+export default Badge;
+export { Badge, BadgeRoot, BadgeLabel, BadgeAnchor };
+export type { BadgeRootProps, BadgeRootProps as BadgeProps, BadgeLabelProps, BadgeAnchorProps, } from "./Badge";

package/dist/components/badge/index.js

@@ -0,0 +1,11 @@
+import * as __WEBPACK_EXTERNAL_MODULE__Badge_js_cb369ee9__ from "./Badge.js";
+const Badge = Object.assign(__WEBPACK_EXTERNAL_MODULE__Badge_js_cb369ee9__.BadgeRoot, {
+    Anchor: __WEBPACK_EXTERNAL_MODULE__Badge_js_cb369ee9__.BadgeAnchor,
+    Label: __WEBPACK_EXTERNAL_MODULE__Badge_js_cb369ee9__.BadgeLabel,
+    Root: __WEBPACK_EXTERNAL_MODULE__Badge_js_cb369ee9__.BadgeRoot
+});
+const badge = Badge;
+var __webpack_exports__BadgeAnchor = __WEBPACK_EXTERNAL_MODULE__Badge_js_cb369ee9__.BadgeAnchor;
+var __webpack_exports__BadgeLabel = __WEBPACK_EXTERNAL_MODULE__Badge_js_cb369ee9__.BadgeLabel;
+var __webpack_exports__BadgeRoot = __WEBPACK_EXTERNAL_MODULE__Badge_js_cb369ee9__.BadgeRoot;
+export { Badge, badge as default, __webpack_exports__BadgeAnchor as BadgeAnchor, __webpack_exports__BadgeLabel as BadgeLabel, __webpack_exports__BadgeRoot as BadgeRoot };

package/dist/components/bottom-sheet/BottomSheet.d.ts

@@ -0,0 +1,11 @@
+import { type Component } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export interface BottomSheetProps extends IComponentBaseProps {
+    isOpen: boolean;
+    onClose: () => void;
+    children?: import("solid-js").JSX.Element;
+    closeOnOverlayClick?: boolean;
+    closeOnSwipeDown?: boolean;
+}
+declare const BottomSheet: Component<BottomSheetProps>;
+export default BottomSheet;

package/dist/components/bottom-sheet/BottomSheet.js

@@ -0,0 +1,109 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
+import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div><div class=p-4><div class="w-12 h-1 bg-base-content/30 rounded-full mx-auto mb-4">');
+const BottomSheet = (props)=>{
+    const merged = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.mergeProps)({
+        closeOnOverlayClick: true,
+        closeOnSwipeDown: true
+    }, props);
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(merged, [
+        "isOpen",
+        "onClose",
+        "children",
+        "dataTheme",
+        "class",
+        "className",
+        "style",
+        "closeOnOverlayClick",
+        "closeOnSwipeDown"
+    ]);
+    const [isDragging, setIsDragging] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(false);
+    const [startY, setStartY] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(0);
+    const [currentY, setCurrentY] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(0);
+    let sheetRef;
+    let overlayRef;
+    const handleTouchStart = (e)=>{
+        if (!local.closeOnSwipeDown) return;
+        const touchY = e.touches[0].clientY;
+        const sheetTop = sheetRef?.getBoundingClientRect().top || 0;
+        if (touchY - sheetTop < 50) {
+            setIsDragging(true);
+            setStartY(touchY);
+            setCurrentY(touchY);
+        }
+    };
+    const handleTouchMove = (e)=>{
+        if (!isDragging()) return;
+        const deltaY = e.touches[0].clientY - startY();
+        const newY = Math.max(0, deltaY);
+        setCurrentY(e.touches[0].clientY);
+        if (sheetRef) sheetRef.style.transform = `translateY(${newY}px)`;
+        e.preventDefault();
+    };
+    const handleTouchEnd = ()=>{
+        if (!isDragging()) return;
+        setIsDragging(false);
+        const deltaY = currentY() - startY();
+        if (deltaY > 100) local.onClose();
+        else if (sheetRef) sheetRef.style.transform = "translateY(0)";
+    };
+    const handleOverlayClick = (e)=>{
+        if (local.closeOnOverlayClick && e.target === overlayRef) local.onClose();
+    };
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onMount)(()=>{
+        if (sheetRef && local.closeOnSwipeDown) {
+            sheetRef.addEventListener("touchstart", handleTouchStart, {
+                passive: true
+            });
+            sheetRef.addEventListener("touchmove", handleTouchMove, {
+                passive: false
+            });
+            sheetRef.addEventListener("touchend", handleTouchEnd, {
+                passive: true
+            });
+        }
+    });
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
+        if (sheetRef) {
+            sheetRef.removeEventListener("touchstart", handleTouchStart);
+            sheetRef.removeEventListener("touchmove", handleTouchMove);
+            sheetRef.removeEventListener("touchend", handleTouchEnd);
+        }
+    });
+    return [
+        (()=>{
+            var _el$ = _tmpl$();
+            _el$.$$click = handleOverlayClick;
+            var _ref$ = overlayRef;
+            "function" == typeof _ref$ ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$, _el$) : overlayRef = _el$;
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)("fixed inset-0 bg-base-100 bg-opacity-60 z-40 transition-opacity duration-200", local.isOpen ? "opacity-100" : "opacity-0 pointer-events-none")));
+            return _el$;
+        })(),
+        (()=>{
+            var _el$2 = _tmpl$2(), _el$3 = _el$2.firstChild;
+            _el$3.firstChild;
+            var _ref$2 = sheetRef;
+            "function" == typeof _ref$2 ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$2, _el$2) : sheetRef = _el$2;
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+                get ["class"] () {
+                    return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)((0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)("bg-base-300 text-base-content fixed bottom-0 left-0 right-0 rounded-t-2xl shadow-lg z-50 transition-transform duration-300 ease-out", local.isOpen ? "translate-y-0" : "translate-y-full"), local.class, local.className);
+                },
+                get style () {
+                    return {
+                        transform: isDragging() ? `translateY(${Math.max(0, currentY() - startY())}px)` : void 0,
+                        ...local.style
+                    };
+                }
+            }, others), false, true);
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, ()=>local.children, null);
+            return _el$2;
+        })()
+    ];
+};
+const bottom_sheet_BottomSheet = BottomSheet;
+(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.delegateEvents)([
+    "click"
+]);
+export { bottom_sheet_BottomSheet as default };

package/dist/components/bottom-sheet/index.d.ts

@@ -0,0 +1,2 @@
+export type { BottomSheetProps } from "./BottomSheet";
+export { default } from "./BottomSheet";

package/dist/components/bottom-sheet/index.js

@@ -0,0 +1,3 @@
+import * as __WEBPACK_EXTERNAL_MODULE__BottomSheet_js_ce8f00a0__ from "./BottomSheet.js";
+var __webpack_exports__default = __WEBPACK_EXTERNAL_MODULE__BottomSheet_js_ce8f00a0__["default"];
+export { __webpack_exports__default as default };

package/dist/components/breadcrumbs/Breadcrumbs.css

@@ -0,0 +1,63 @@
+@layer components {
+  /* -------------------------------------------------------------------------------------------------
+   * Root
+   * -----------------------------------------------------------------------------------------------*/
+  .breadcrumbs {
+    display: flex;
+    align-items: center;
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Item
+   * -----------------------------------------------------------------------------------------------*/
+  .breadcrumbs__item {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    gap: 0.25rem;
+    padding: 0 0.125rem;
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Link
+   * -----------------------------------------------------------------------------------------------*/
+  .breadcrumbs__link {
+    position: relative;
+    padding: 0 0.125rem;
+    font-size: 0.875rem;
+    font-weight: 500;
+    line-height: 1.25rem;
+    color: color-mix(in oklab, var(--color-base-content) 62%, transparent);
+    text-decoration: none;
+  }
+
+  a.breadcrumbs__link:hover {
+    text-decoration: underline;
+  }
+
+  .breadcrumbs__link[data-current="true"] {
+    color: var(--color-base-content);
+  }
+
+  a.breadcrumbs__link:focus-visible {
+    outline: 2px solid var(--color-accent);
+    outline-offset: 2px;
+    border-radius: var(--radius-field, 0.25rem);
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Separator
+   * -----------------------------------------------------------------------------------------------*/
+  .breadcrumbs__separator {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: color-mix(in oklab, var(--color-base-content) 40%, transparent);
+    margin: 0 0.125rem;
+  }
+
+  [dir="rtl"] .breadcrumbs__separator {
+    transform: rotate(180deg);
+  }
+}

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

@@ -0,0 +1,20 @@
+import "./Breadcrumbs.css";
+import { type Component, type JSX, type ParentComponent } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export type BreadcrumbsRootProps = Omit<JSX.HTMLAttributes<HTMLElement>, "children"> & IComponentBaseProps & {
+    children: JSX.Element;
+    separator?: JSX.Element;
+};
+export type BreadcrumbsItemProps = Omit<JSX.HTMLAttributes<HTMLLIElement>, "children"> & IComponentBaseProps & {
+    children: JSX.Element;
+    href?: string;
+    isCurrent?: boolean;
+};
+declare const BreadcrumbsRoot: ParentComponent<BreadcrumbsRootProps>;
+declare const BreadcrumbsItem: Component<BreadcrumbsItemProps>;
+declare const Breadcrumbs: ParentComponent<BreadcrumbsRootProps> & {
+    Root: ParentComponent<BreadcrumbsRootProps>;
+    Item: Component<BreadcrumbsItemProps>;
+};
+export default Breadcrumbs;
+export { BreadcrumbsRoot, BreadcrumbsItem };