@spark-ui/components/dist/breadcrumb/index.js

Spark (Leboncoin design system) components.

"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/breadcrumb/index.ts
var breadcrumb_exports = {};
__export(breadcrumb_exports, {
  Breadcrumb: () => Breadcrumb2
});
module.exports = __toCommonJS(breadcrumb_exports);

// src/breadcrumb/Breadcrumb.tsx
var import_class_variance_authority = require("class-variance-authority");
var import_jsx_runtime = require("react/jsx-runtime");
var Breadcrumb = ({
  className,
  "aria-label": ariaLabel,
  ref,
  ...rest
}) => {
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    "nav",
    {
      "data-spark-component": "breadcrumb",
      ref,
      "aria-label": ariaLabel,
      className: (0, import_class_variance_authority.cx)("text-caption text-neutral", className),
      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ol", { className: (0, import_class_variance_authority.cx)("gap-sm flex flex-wrap items-center break-words"), ...rest })
    }
  );
};
Breadcrumb.displayName = "Breadcrumb.Breadcrumb";

// src/breadcrumb/BreadcrumbCurrentPage.tsx
var import_class_variance_authority2 = require("class-variance-authority");

// src/slot/Slot.tsx
var import_radix_ui = require("radix-ui");
var import_react = require("react");
var import_jsx_runtime2 = require("react/jsx-runtime");
var Slottable = import_radix_ui.Slot.Slottable;
var Slot = ({ ref, ...props }) => {
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_radix_ui.Slot.Root, { ref, ...props });
};

// src/breadcrumb/BreadcrumbCurrentPage.tsx
var import_jsx_runtime3 = require("react/jsx-runtime");
var CurrentPage = ({
  asChild = false,
  className,
  children,
  ...rest
}) => {
  const Component = asChild ? Slot : "span";
  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
    Component,
    {
      "data-spark-component": "breadcrumb-current-page",
      role: "link",
      "aria-disabled": true,
      "aria-current": "page",
      className: (0, import_class_variance_authority2.cx)(
        "inline! overflow-hidden font-bold text-ellipsis whitespace-nowrap text-current",
        className
      ),
      ...rest,
      children
    }
  );
};
CurrentPage.displayName = "Breadcrumb.CurrentPage";

// src/breadcrumb/BreadcrumbItem.tsx
var import_class_variance_authority3 = require("class-variance-authority");
var import_jsx_runtime4 = require("react/jsx-runtime");
var Item = ({ className, ...rest }) => {
  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
    "li",
    {
      "data-spark-component": "breadcrumb-item",
      className: (0, import_class_variance_authority3.cx)("min-w-none gap-sm inline-flex items-center", className),
      ...rest
    }
  );
};
Item.displayName = "Breadcrumb.Item";

// src/breadcrumb/BreadcrumbLink.tsx
var import_class_variance_authority5 = require("class-variance-authority");

// src/text-link/TextLink.tsx
var import_class_variance_authority4 = require("class-variance-authority");
var import_jsx_runtime5 = require("react/jsx-runtime");
var textLinkStyles = (0, import_class_variance_authority4.cva)(["inline-flex items-center focus-visible:u-outline"], {
  variants: {
    intent: {
      current: "text-current hover:opacity-dim-1",
      main: "text-main hover:text-main-hovered",
      support: "text-support hover:text-support-hovered",
      accent: "text-accent hover:text-accent-hovered",
      basic: "text-basic hover:text-basic-hovered",
      success: "text-success hover:text-success-hovered",
      alert: "text-alert hover:text-alert-hovered",
      danger: "text-error hover:text-error-hovered",
      info: "text-info hover:text-info-hovered",
      neutral: "text-neutral hover:text-neutral-hovered"
    },
    /** By default, TextLink inherits the current font weight. Use `bold` to highlight it. */
    bold: {
      true: "font-bold"
    },
    /**
     * Underline is enabled by default.
     * You can remove it, but be careful about a11y, as you should make obvious to users what is a link or not.
     */
    underline: {
      true: "underline",
      false: "hover:underline focus:underline"
    }
  },
  defaultVariants: {
    intent: "current",
    bold: false,
    underline: true
  }
});
var TextLink = ({
  asChild = false,
  bold = false,
  children,
  className,
  intent = "current",
  underline = true,
  ref,
  ...props
}) => {
  const Component = asChild ? Slot : "a";
  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
    Component,
    {
      ref,
      className: textLinkStyles({ className, bold, intent, underline }),
      ...props,
      children
    }
  );
};

// src/breadcrumb/BreadcrumbLink.tsx
var import_jsx_runtime6 = require("react/jsx-runtime");
var Link = ({
  asChild = false,
  className,
  bold = true,
  intent = "current",
  underline = true,
  href,
  ref,
  ...rest
}) => {
  const Component = asChild ? Slot : TextLink;
  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
    Component,
    {
      "data-spark-component": "breadcrumb-link",
      href,
      ref,
      className: (0, import_class_variance_authority5.cx)("inline! overflow-hidden text-ellipsis whitespace-nowrap", className),
      bold,
      intent,
      underline,
      ...rest
    }
  );
};
Link.displayName = "Breadcrumb.Link";

// src/breadcrumb/BreadcrumbSeparator.tsx
var import_ArrowVerticalRight = require("@spark-ui/icons/ArrowVerticalRight");
var import_class_variance_authority7 = require("class-variance-authority");

// src/icon/Icon.tsx
var import_react2 = require("react");

// src/visually-hidden/VisuallyHidden.tsx
var import_jsx_runtime7 = require("react/jsx-runtime");
var VisuallyHidden = ({ asChild = false, ref, ...props }) => {
  const Component = asChild ? Slot : "span";
  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
    Component,
    {
      ...props,
      ref,
      style: {
        // See: https://github.com/twbs/bootstrap/blob/main/scss/mixins/_visually-hidden.scss
        position: "absolute",
        border: 0,
        width: 1,
        height: 1,
        padding: 0,
        margin: -1,
        overflow: "hidden",
        clip: "rect(0, 0, 0, 0)",
        whiteSpace: "nowrap",
        wordWrap: "normal",
        ...props.style
      }
    }
  );
};
VisuallyHidden.displayName = "VisuallyHidden";

// src/icon/Icon.styles.tsx
var import_internal_utils = require("@spark-ui/internal-utils");
var import_class_variance_authority6 = require("class-variance-authority");
var iconStyles = (0, import_class_variance_authority6.cva)(["fill-current shrink-0"], {
  variants: {
    /**
     * Color scheme of the icon.
     */
    intent: (0, import_internal_utils.makeVariants)({
      current: ["text-current"],
      main: ["text-main"],
      support: ["text-support"],
      accent: ["text-accent"],
      basic: ["text-basic"],
      success: ["text-success"],
      alert: ["text-alert"],
      error: ["text-error"],
      info: ["text-info"],
      neutral: ["text-neutral"]
    }),
    /**
     * Sets the size of the icon.
     */
    size: (0, import_internal_utils.makeVariants)({
      current: ["u-current-font-size"],
      sm: ["w-sz-16", "h-sz-16"],
      md: ["w-sz-24", "h-sz-24"],
      lg: ["w-sz-32", "h-sz-32"],
      xl: ["w-sz-40", "h-sz-40"]
    })
  }
});

// src/icon/Icon.tsx
var import_jsx_runtime8 = require("react/jsx-runtime");
var Icon = ({
  label,
  className,
  size = "current",
  intent = "current",
  children,
  ...others
}) => {
  const child = import_react2.Children.only(children);
  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
    (0, import_react2.cloneElement)(child, {
      className: iconStyles({ className, size, intent }),
      "data-spark-component": "icon",
      "aria-hidden": "true",
      focusable: "false",
      ...others
    }),
    label && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(VisuallyHidden, { children: label })
  ] });
};
Icon.displayName = "Icon";

// src/breadcrumb/BreadcrumbSeparator.tsx
var import_jsx_runtime9 = require("react/jsx-runtime");
var Separator = ({
  asChild = false,
  className,
  children,
  ref,
  ...rest
}) => {
  const Component = asChild ? Slot : "li";
  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
    Component,
    {
      role: "presentation",
      "aria-hidden": true,
      "data-spark-component": "breadcrumb-separator",
      ref,
      className: (0, import_class_variance_authority7.cx)("gap-sm inline-flex items-center", className),
      ...rest,
      children: children ?? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_ArrowVerticalRight.ArrowVerticalRight, {}) })
    }
  );
};
Separator.displayName = "Breadcrumb.Separator";

// src/breadcrumb/index.ts
var Breadcrumb2 = Object.assign(Breadcrumb, {
  Item,
  Link,
  CurrentPage,
  Separator
});
Breadcrumb2.displayName = "Breadcrumb";
Item.displayName = "Breadcrumb.Item";
Link.displayName = "Breadcrumb.Link";
CurrentPage.displayName = "Breadcrumb.CurrentPage";
Separator.displayName = "Breadcrumb.Separator";
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  Breadcrumb
});
//# sourceMappingURL=index.js.map