@spark-ui/components 10.0.0

package/dist/breadcrumb/index.mjs

@@ -0,0 +1,149 @@
+import {
+  TextLink
+} from "../chunk-K7VP7DH3.mjs";
+import {
+  Icon
+} from "../chunk-AESXFMCC.mjs";
+import "../chunk-NBZKMCHF.mjs";
+import {
+  Slot
+} from "../chunk-4F5DOL57.mjs";
+
+// src/breadcrumb/Breadcrumb.tsx
+import { cx } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+var Breadcrumb = ({
+  className,
+  "aria-label": ariaLabel,
+  ref,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      "data-spark-component": "breadcrumb",
+      ref,
+      "aria-label": ariaLabel,
+      className: cx("text-caption text-neutral", className),
+      children: /* @__PURE__ */ jsx("ol", { className: cx("gap-sm flex flex-wrap items-center break-words"), ...rest })
+    }
+  );
+};
+Breadcrumb.displayName = "Breadcrumb.Breadcrumb";
+
+// src/breadcrumb/BreadcrumbCurrentPage.tsx
+import { cx as cx2 } from "class-variance-authority";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var CurrentPage = ({
+  asChild = false,
+  className,
+  children,
+  ...rest
+}) => {
+  const Component = asChild ? Slot : "span";
+  return /* @__PURE__ */ jsx2(
+    Component,
+    {
+      "data-spark-component": "breadcrumb-current-page",
+      role: "link",
+      "aria-disabled": true,
+      "aria-current": "page",
+      className: cx2(
+        "inline! overflow-hidden font-bold text-ellipsis whitespace-nowrap text-current",
+        className
+      ),
+      ...rest,
+      children
+    }
+  );
+};
+CurrentPage.displayName = "Breadcrumb.CurrentPage";
+
+// src/breadcrumb/BreadcrumbItem.tsx
+import { cx as cx3 } from "class-variance-authority";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Item = ({ className, ...rest }) => {
+  return /* @__PURE__ */ jsx3(
+    "li",
+    {
+      "data-spark-component": "breadcrumb-item",
+      className: cx3("min-w-none gap-sm inline-flex items-center", className),
+      ...rest
+    }
+  );
+};
+Item.displayName = "Breadcrumb.Item";
+
+// src/breadcrumb/BreadcrumbLink.tsx
+import { cx as cx4 } from "class-variance-authority";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var Link = ({
+  asChild = false,
+  className,
+  bold = true,
+  intent = "current",
+  underline = true,
+  href,
+  ref,
+  ...rest
+}) => {
+  const Component = asChild ? Slot : TextLink;
+  return /* @__PURE__ */ jsx4(
+    Component,
+    {
+      "data-spark-component": "breadcrumb-link",
+      href,
+      ref,
+      className: cx4("inline! overflow-hidden text-ellipsis whitespace-nowrap", className),
+      bold,
+      intent,
+      underline,
+      ...rest
+    }
+  );
+};
+Link.displayName = "Breadcrumb.Link";
+
+// src/breadcrumb/BreadcrumbSeparator.tsx
+import { ArrowVerticalRight } from "@spark-ui/icons/ArrowVerticalRight";
+import { cx as cx5 } from "class-variance-authority";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var Separator = ({
+  asChild = false,
+  className,
+  children,
+  ref,
+  ...rest
+}) => {
+  const Component = asChild ? Slot : "li";
+  return /* @__PURE__ */ jsx5(
+    Component,
+    {
+      role: "presentation",
+      "aria-hidden": true,
+      "data-spark-component": "breadcrumb-separator",
+      ref,
+      className: cx5("gap-sm inline-flex items-center", className),
+      ...rest,
+      children: children ?? /* @__PURE__ */ jsx5(Icon, { children: /* @__PURE__ */ jsx5(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";
+export {
+  Breadcrumb2 as Breadcrumb
+};
+//# sourceMappingURL=index.mjs.map

package/dist/breadcrumb/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/breadcrumb/Breadcrumb.tsx","../../src/breadcrumb/BreadcrumbCurrentPage.tsx","../../src/breadcrumb/BreadcrumbItem.tsx","../../src/breadcrumb/BreadcrumbLink.tsx","../../src/breadcrumb/BreadcrumbSeparator.tsx","../../src/breadcrumb/index.ts"],"sourcesContent":["import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nexport interface BreadcrumbProps extends ComponentPropsWithoutRef<'nav'> {\n  className?: string\n  ['aria-label']: string\n  ref?: Ref<HTMLElement>\n}\n\nexport const Breadcrumb = ({\n  className,\n  'aria-label': ariaLabel,\n  ref,\n  ...rest\n}: BreadcrumbProps) => {\n  return (\n    <nav\n      data-spark-component=\"breadcrumb\"\n      ref={ref}\n      aria-label={ariaLabel}\n      className={cx('text-caption text-neutral', className)}\n    >\n      <ol className={cx('gap-sm flex flex-wrap items-center break-words')} {...rest} />\n    </nav>\n  )\n}\n\nBreadcrumb.displayName = 'Breadcrumb.Breadcrumb'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nimport { Slot } from '../slot'\nimport { TextLink } from '../text-link'\n\nexport interface CurrentPageProps extends ComponentPropsWithoutRef<typeof TextLink> {\n  asChild?: boolean\n  className?: string\n  ref?: Ref<HTMLAnchorElement>\n}\n\nexport const CurrentPage = ({\n  asChild = false,\n  className,\n  children,\n  ...rest\n}: CurrentPageProps) => {\n  const Component = asChild ? Slot : 'span'\n\n  return (\n    <Component\n      data-spark-component=\"breadcrumb-current-page\"\n      role=\"link\"\n      aria-disabled\n      aria-current=\"page\"\n      className={cx(\n        'inline! overflow-hidden font-bold text-ellipsis whitespace-nowrap text-current',\n        className\n      )}\n      {...rest}\n    >\n      {children}\n    </Component>\n  )\n}\n\nCurrentPage.displayName = 'Breadcrumb.CurrentPage'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nexport interface ItemProps extends ComponentPropsWithoutRef<'li'> {\n  className?: string\n  ref?: Ref<HTMLLIElement>\n}\n\nexport const Item = ({ className, ...rest }: ItemProps) => {\n  return (\n    <li\n      data-spark-component=\"breadcrumb-item\"\n      className={cx('min-w-none gap-sm inline-flex items-center', className)}\n      {...rest}\n    />\n  )\n}\n\nItem.displayName = 'Breadcrumb.Item'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nimport { Slot } from '../slot'\nimport { TextLink } from '../text-link'\n\nexport interface LinkProps extends ComponentPropsWithoutRef<typeof TextLink> {\n  asChild?: boolean\n  className?: string\n  href?: string\n  ref?: Ref<HTMLAnchorElement>\n}\n\nexport const Link = ({\n  asChild = false,\n  className,\n  bold = true,\n  intent = 'current',\n  underline = true,\n  href,\n  ref,\n  ...rest\n}: LinkProps) => {\n  const Component = asChild ? Slot : TextLink\n\n  return (\n    <Component\n      data-spark-component=\"breadcrumb-link\"\n      href={href}\n      ref={ref}\n      className={cx('inline! overflow-hidden text-ellipsis whitespace-nowrap', className)}\n      bold={bold}\n      intent={intent}\n      underline={underline}\n      {...rest}\n    />\n  )\n}\n\nLink.displayName = 'Breadcrumb.Link'\n","import { ArrowVerticalRight } from '@spark-ui/icons/ArrowVerticalRight'\nimport { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { Slot } from '../slot'\n\nexport interface SeparatorProps extends ComponentPropsWithoutRef<'li'> {\n  asChild?: boolean\n  className?: string\n  ref?: Ref<HTMLLIElement>\n}\n\nexport const Separator = ({\n  asChild = false,\n  className,\n  children,\n  ref,\n  ...rest\n}: SeparatorProps) => {\n  const Component = asChild ? Slot : 'li'\n\n  return (\n    <Component\n      role=\"presentation\"\n      aria-hidden\n      data-spark-component=\"breadcrumb-separator\"\n      ref={ref}\n      className={cx('gap-sm inline-flex items-center', className)}\n      {...rest}\n    >\n      {children ?? (\n        <Icon>\n          <ArrowVerticalRight />\n        </Icon>\n      )}\n    </Component>\n  )\n}\n\nSeparator.displayName = 'Breadcrumb.Separator'\n","import { Breadcrumb as Root } from './Breadcrumb'\nimport { CurrentPage } from './BreadcrumbCurrentPage'\nimport { Item } from './BreadcrumbItem'\nimport { Link } from './BreadcrumbLink'\nimport { Separator } from './BreadcrumbSeparator'\n\nexport const Breadcrumb: typeof Root & {\n  Item: typeof Item\n  Link: typeof Link\n  CurrentPage: typeof CurrentPage\n  Separator: typeof Separator\n} = Object.assign(Root, {\n  Item,\n  Link,\n  CurrentPage,\n  Separator,\n})\n\nBreadcrumb.displayName = 'Breadcrumb'\nItem.displayName = 'Breadcrumb.Item'\nLink.displayName = 'Breadcrumb.Link'\nCurrentPage.displayName = 'Breadcrumb.CurrentPage'\nSeparator.displayName = 'Breadcrumb.Separator'\n\nexport type { BreadcrumbProps } from './Breadcrumb'\n"],"mappings":";;;;;;;;;;;;AAAA,SAAS,UAAU;AAsBb;AAbC,IAAM,aAAa,CAAC;AAAA,EACzB;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA,GAAG;AACL,MAAuB;AACrB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,wBAAqB;AAAA,MACrB;AAAA,MACA,cAAY;AAAA,MACZ,WAAW,GAAG,6BAA6B,SAAS;AAAA,MAEpD,8BAAC,QAAG,WAAW,GAAG,gDAAgD,GAAI,GAAG,MAAM;AAAA;AAAA,EACjF;AAEJ;AAEA,WAAW,cAAc;;;AC3BzB,SAAS,MAAAA,WAAU;AAqBf,gBAAAC,YAAA;AATG,IAAM,cAAc,CAAC;AAAA,EAC1B,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAwB;AACtB,QAAM,YAAY,UAAU,OAAO;AAEnC,SACE,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACC,wBAAqB;AAAA,MACrB,MAAK;AAAA,MACL,iBAAa;AAAA,MACb,gBAAa;AAAA,MACb,WAAWC;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;AAEA,YAAY,cAAc;;;ACrC1B,SAAS,MAAAC,WAAU;AAUf,gBAAAC,YAAA;AAFG,IAAM,OAAO,CAAC,EAAE,WAAW,GAAG,KAAK,MAAiB;AACzD,SACE,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACC,wBAAqB;AAAA,MACrB,WAAWD,IAAG,8CAA8C,SAAS;AAAA,MACpE,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,KAAK,cAAc;;;AClBnB,SAAS,MAAAE,WAAU;AA0Bf,gBAAAC,YAAA;AAbG,IAAM,OAAO,CAAC;AAAA,EACnB,UAAU;AAAA,EACV;AAAA,EACA,OAAO;AAAA,EACP,SAAS;AAAA,EACT,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAiB;AACf,QAAM,YAAY,UAAU,OAAO;AAEnC,SACE,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACC,wBAAqB;AAAA,MACrB;AAAA,MACA;AAAA,MACA,WAAWC,IAAG,2DAA2D,SAAS;AAAA,MAClF;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,KAAK,cAAc;;;ACvCnB,SAAS,0BAA0B;AACnC,SAAS,MAAAC,WAAU;AAgCT,gBAAAC,YAAA;AApBH,IAAM,YAAY,CAAC;AAAA,EACxB,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAsB;AACpB,QAAM,YAAY,UAAU,OAAO;AAEnC,SACE,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,eAAW;AAAA,MACX,wBAAqB;AAAA,MACrB;AAAA,MACA,WAAWC,IAAG,mCAAmC,SAAS;AAAA,MACzD,GAAG;AAAA,MAEH,sBACC,gBAAAD,KAAC,QACC,0BAAAA,KAAC,sBAAmB,GACtB;AAAA;AAAA,EAEJ;AAEJ;AAEA,UAAU,cAAc;;;AClCjB,IAAME,cAKT,OAAO,OAAO,YAAM;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAEDA,YAAW,cAAc;AACzB,KAAK,cAAc;AACnB,KAAK,cAAc;AACnB,YAAY,cAAc;AAC1B,UAAU,cAAc;","names":["cx","jsx","cx","cx","jsx","cx","jsx","cx","cx","jsx","cx","Breadcrumb"]}

package/dist/button/index.d.mts

@@ -0,0 +1,40 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentPropsWithoutRef, Ref } from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+
+declare const buttonStyles: (props?: ({
+    design?: "filled" | "ghost" | "outlined" | "tinted" | "contrast" | null | undefined;
+    intent?: "main" | "alert" | "support" | "accent" | "basic" | "success" | "info" | "neutral" | "danger" | "surface" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+    shape?: "square" | "rounded" | "pill" | null | undefined;
+    disabled?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type ButtonStylesProps = VariantProps<typeof buttonStyles>;
+
+interface ButtonProps extends Omit<ComponentPropsWithoutRef<'button'>, 'disabled'>, ButtonStylesProps {
+    /**
+     * Change the component to the HTML tag or custom component of the only child.
+     */
+    asChild?: boolean;
+    /**
+     * Display a spinner to indicate to the user that the button is loading something after they interacted with it.
+     */
+    isLoading?: boolean;
+    /**
+     * If your loading state should only display a spinner, it's better to specify a label for it (a11y).
+     */
+    loadingLabel?: string;
+    /**
+     * If your loading state should also display a label, you can use this prop instead of `loadingLabel`.
+     * **Please note that using this can result in layout shifting when the Button goes from loading state to normal state.**
+     */
+    loadingText?: string;
+    ref?: Ref<HTMLButtonElement>;
+}
+declare const Button: {
+    ({ children, design, disabled, intent, isLoading, loadingLabel, loadingText, shape, size, asChild, className, ref, ...others }: ButtonProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+export { Button, type ButtonProps };

package/dist/button/index.d.ts

@@ -0,0 +1,40 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentPropsWithoutRef, Ref } from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+
+declare const buttonStyles: (props?: ({
+    design?: "filled" | "ghost" | "outlined" | "tinted" | "contrast" | null | undefined;
+    intent?: "main" | "alert" | "support" | "accent" | "basic" | "success" | "info" | "neutral" | "danger" | "surface" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+    shape?: "square" | "rounded" | "pill" | null | undefined;
+    disabled?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type ButtonStylesProps = VariantProps<typeof buttonStyles>;
+
+interface ButtonProps extends Omit<ComponentPropsWithoutRef<'button'>, 'disabled'>, ButtonStylesProps {
+    /**
+     * Change the component to the HTML tag or custom component of the only child.
+     */
+    asChild?: boolean;
+    /**
+     * Display a spinner to indicate to the user that the button is loading something after they interacted with it.
+     */
+    isLoading?: boolean;
+    /**
+     * If your loading state should only display a spinner, it's better to specify a label for it (a11y).
+     */
+    loadingLabel?: string;
+    /**
+     * If your loading state should also display a label, you can use this prop instead of `loadingLabel`.
+     * **Please note that using this can result in layout shifting when the Button goes from loading state to normal state.**
+     */
+    loadingText?: string;
+    ref?: Ref<HTMLButtonElement>;
+}
+declare const Button: {
+    ({ children, design, disabled, intent, isLoading, loadingLabel, loadingText, shape, size, asChild, className, ref, ...others }: ButtonProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+export { Button, type ButtonProps };