@spark-ui/components 10.13.0 → 10.14.1

package/dist/alert-dialog/index.mjs

@@ -2,9 +2,9 @@ import {
   Dialog
 } from "../chunk-5VKP2RR6.mjs";
 import "../chunk-MKN2Y3W6.mjs";
+import "../chunk-UMUMFMFB.mjs";
 import "../chunk-3PTXYZYN.mjs";
 import "../chunk-GAK4SC2F.mjs";
-import "../chunk-UMUMFMFB.mjs";
 import "../chunk-KEGAAGJW.mjs";
 import "../chunk-6QCEPQ3U.mjs";
 

package/dist/avatar/index.mjs

@@ -1,11 +1,11 @@
 import {
   IconButton
 } from "../chunk-MKN2Y3W6.mjs";
-import "../chunk-3PTXYZYN.mjs";
-import "../chunk-GAK4SC2F.mjs";
 import {
   Icon
 } from "../chunk-UMUMFMFB.mjs";
+import "../chunk-3PTXYZYN.mjs";
+import "../chunk-GAK4SC2F.mjs";
 import "../chunk-KEGAAGJW.mjs";
 import {
   Slot

package/dist/card/index.d.mts

@@ -0,0 +1,61 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import { ComponentProps } from 'react';
+
+declare const backdropStyles: (props?: ({
+    animation?: "none" | "slideRight" | null | undefined;
+    intent?: "main" | "support" | "accent" | "basic" | "success" | "alert" | "danger" | "info" | "neutral" | "surface" | "surfaceInverse" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type BackdropStylesProps = VariantProps<typeof backdropStyles>;
+interface BackdropProps extends BackdropStylesProps {
+    className?: string;
+}
+declare const Backdrop: {
+    ({ intent, animation, ...props }: BackdropProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+declare const cardStyles: (props?: ({
+    design?: "filled" | "outlined" | "tinted" | null | undefined;
+    hasBackdrop?: boolean | null | undefined;
+    intent?: "main" | "support" | "accent" | "basic" | "success" | "alert" | "danger" | "info" | "neutral" | "surface" | "surfaceInverse" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type CardStylesProps = VariantProps<typeof cardStyles>;
+
+interface CardProps extends ComponentProps<'div'>, CardStylesProps {
+    /**
+     * Change the component to the HTML tag or custom component of the only child.
+     */
+    asChild?: boolean;
+    /**
+     * Whether the card should have an inset padding.
+     */
+    inset?: boolean;
+}
+declare const Card$1: {
+    ({ children, design, intent, inset, asChild, className, ref, ...props }: CardProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface ContentProps extends ComponentProps<'div'> {
+    /**
+     * Change the component to the HTML tag or custom component of the only child.
+     */
+    asChild?: boolean;
+    /**
+     * Whether the card should have an inset padding.
+     */
+    inset?: boolean;
+}
+declare const Content: {
+    ({ children, inset, asChild, className, ref, ...props }: ContentProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+declare const Card: typeof Card$1 & {
+    Content: typeof Content;
+    Backdrop: typeof Backdrop;
+};
+
+export { Card, type CardProps };

package/dist/card/index.d.ts

@@ -0,0 +1,61 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import { ComponentProps } from 'react';
+
+declare const backdropStyles: (props?: ({
+    animation?: "none" | "slideRight" | null | undefined;
+    intent?: "main" | "support" | "accent" | "basic" | "success" | "alert" | "danger" | "info" | "neutral" | "surface" | "surfaceInverse" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type BackdropStylesProps = VariantProps<typeof backdropStyles>;
+interface BackdropProps extends BackdropStylesProps {
+    className?: string;
+}
+declare const Backdrop: {
+    ({ intent, animation, ...props }: BackdropProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+declare const cardStyles: (props?: ({
+    design?: "filled" | "outlined" | "tinted" | null | undefined;
+    hasBackdrop?: boolean | null | undefined;
+    intent?: "main" | "support" | "accent" | "basic" | "success" | "alert" | "danger" | "info" | "neutral" | "surface" | "surfaceInverse" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type CardStylesProps = VariantProps<typeof cardStyles>;
+
+interface CardProps extends ComponentProps<'div'>, CardStylesProps {
+    /**
+     * Change the component to the HTML tag or custom component of the only child.
+     */
+    asChild?: boolean;
+    /**
+     * Whether the card should have an inset padding.
+     */
+    inset?: boolean;
+}
+declare const Card$1: {
+    ({ children, design, intent, inset, asChild, className, ref, ...props }: CardProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface ContentProps extends ComponentProps<'div'> {
+    /**
+     * Change the component to the HTML tag or custom component of the only child.
+     */
+    asChild?: boolean;
+    /**
+     * Whether the card should have an inset padding.
+     */
+    inset?: boolean;
+}
+declare const Content: {
+    ({ children, inset, asChild, className, ref, ...props }: ContentProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+declare const Card: typeof Card$1 & {
+    Content: typeof Content;
+    Backdrop: typeof Backdrop;
+};
+
+export { Card, type CardProps };

package/dist/card/index.js

@@ -0,0 +1,502 @@
+"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/card/index.ts
+var card_exports = {};
+__export(card_exports, {
+  Card: () => Card2
+});
+module.exports = __toCommonJS(card_exports);
+
+// src/card/Backdrop.tsx
+var import_internal_utils = require("@spark-ui/internal-utils");
+var import_class_variance_authority = require("class-variance-authority");
+var import_jsx_runtime = require("react/jsx-runtime");
+var backdropStyles = (0, import_class_variance_authority.cva)(
+  [
+    "default:bg-surface default:bg-gradient-to-r absolute inset-x-0 top-0",
+    "h-sz-16",
+    "default:rounded-t-lg",
+    "bg-[length:200%_100%]"
+  ],
+  {
+    variants: {
+      animation: {
+        none: "",
+        slideRight: "animate-slide-bg-right"
+      },
+      intent: (0, import_internal_utils.makeVariants)({
+        main: ["default:from-main/dim-4 default:via-main/dim-2 default:to-main/dim-4"],
+        support: ["default:from-support/dim-4 default:via-support/dim-2 default:to-support/dim-4"],
+        accent: ["default:from-accent/dim-4 default:via-accent/dim-2 default:to-accent/dim-4"],
+        basic: ["default:from-basic/dim-4 default:via-basic/dim-2 default:to-basic/dim-4"],
+        success: ["default:from-success/dim-4 default:via-success/dim-2 default:to-success/dim-4"],
+        alert: ["default:from-alert/dim-4 default:via-alert/dim-2 default:to-alert/dim-4"],
+        danger: ["default:from-error/dim-4 default:via-error/dim-2 default:to-error/dim-4"],
+        info: ["default:from-info/dim-4 default:via-info/dim-2 default:to-info/dim-4"],
+        neutral: ["default:from-neutral/dim-4 default:via-neutral/dim-2 default:to-neutral/dim-4"],
+        surface: ["default:from-outline/dim-4 default:via-outline/dim-2 default:to-outline/dim-4"],
+        surfaceInverse: [
+          "default:from-surface/dim-4 default:via-surface/dim-2 default:to-surface/dim-4"
+        ]
+      })
+    },
+    defaultVariants: {
+      intent: "main",
+      animation: "none"
+    }
+  }
+);
+var Backdrop = ({ intent = "main", animation = "none", ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: backdropStyles({ intent, animation }), ...props });
+};
+Backdrop.displayName = "Card.Backdrop";
+
+// 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/card/Card.styles.tsx
+var import_internal_utils2 = require("@spark-ui/internal-utils");
+var import_class_variance_authority2 = require("class-variance-authority");
+var cardStyles = (0, import_class_variance_authority2.cva)(
+  [
+    "group relative bg-clip-padding default:rounded-lg focus-visible:u-outline",
+    "disabled:opacity-dim-3 disabled:cursor-not-allowed"
+  ],
+  {
+    variants: {
+      design: {
+        filled: [],
+        outlined: ["border-sm"],
+        tinted: []
+      },
+      hasBackdrop: {
+        true: ["pt-md"]
+      },
+      /**
+       * Color scheme of the button.
+       */
+      intent: (0, import_internal_utils2.makeVariants)({
+        main: [],
+        support: [],
+        accent: [],
+        basic: [],
+        success: [],
+        alert: [],
+        danger: [],
+        info: [],
+        neutral: [],
+        surface: [],
+        surfaceInverse: []
+      })
+    },
+    compoundVariants: [
+      // OUTLINED
+      { intent: "main", design: "outlined", class: (0, import_internal_utils2.tw)(["border-main"]) },
+      { intent: "support", design: "outlined", class: (0, import_internal_utils2.tw)(["border-support"]) },
+      { intent: "accent", design: "outlined", class: (0, import_internal_utils2.tw)(["border-accent"]) },
+      { intent: "basic", design: "outlined", class: (0, import_internal_utils2.tw)(["border-basic"]) },
+      { intent: "success", design: "outlined", class: (0, import_internal_utils2.tw)(["border-success"]) },
+      { intent: "alert", design: "outlined", class: (0, import_internal_utils2.tw)(["border-alert"]) },
+      { intent: "danger", design: "outlined", class: (0, import_internal_utils2.tw)(["border-error"]) },
+      { intent: "info", design: "outlined", class: (0, import_internal_utils2.tw)(["border-info"]) },
+      { intent: "neutral", design: "outlined", class: (0, import_internal_utils2.tw)(["border-neutral"]) },
+      { intent: "surface", design: "outlined", class: (0, import_internal_utils2.tw)(["border-outline"]) }
+    ],
+    defaultVariants: {
+      design: "filled",
+      intent: "surface"
+    }
+  }
+);
+
+// src/card/context.tsx
+var import_react2 = require("react");
+var CardContext = (0, import_react2.createContext)(void 0);
+var useCardContext = () => {
+  const context = (0, import_react2.useContext)(CardContext);
+  if (!context) {
+    throw new Error("useCardContext must be used within a Card component");
+  }
+  return context;
+};
+
+// src/card/utils.ts
+var import_react3 = require("react");
+var MOUSE_EVENTS = [
+  "onClick",
+  "onMouseDown",
+  "onMouseUp",
+  "onMouseEnter",
+  "onMouseLeave",
+  "onMouseMove",
+  "onMouseOver",
+  "onMouseOut",
+  "onDoubleClick",
+  "onContextMenu"
+];
+var hasBackdrop = (children) => {
+  let backdropFound = false;
+  const searchForBackdrop = (node) => {
+    if (backdropFound) return;
+    import_react3.Children.forEach(node, (child) => {
+      if (backdropFound) return;
+      if ((0, import_react3.isValidElement)(child)) {
+        const isBackdropComponent = typeof child.type === "function" && child.type.displayName === "Card.Backdrop";
+        if (isBackdropComponent) {
+          backdropFound = true;
+          return;
+        }
+        const hasChildren = child.props && typeof child.props === "object" && "children" in child.props;
+        if (hasChildren) {
+          const childChildren = child.props.children;
+          if (childChildren !== void 0 && childChildren !== null) {
+            searchForBackdrop(childChildren);
+          }
+        }
+      }
+    });
+  };
+  searchForBackdrop(children);
+  return backdropFound;
+};
+var isInteractive = (children, asChild, props) => {
+  const hasMouseEventHandlers = MOUSE_EVENTS.some((event) => event in props);
+  if (hasMouseEventHandlers) {
+    return true;
+  }
+  if (!asChild) {
+    return false;
+  }
+  const child = import_react3.Children.only(children);
+  if (!(0, import_react3.isValidElement)(child)) {
+    return false;
+  }
+  const interactiveElements = ["a", "button"];
+  const isInteractiveElement = typeof child.type === "string" && interactiveElements.includes(child.type);
+  if (isInteractiveElement) {
+    return true;
+  }
+  const childProps = child.props;
+  const hasChildEventHandlers = MOUSE_EVENTS.some((event) => event in childProps);
+  return hasChildEventHandlers;
+};
+
+// src/card/Card.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Card = ({
+  children,
+  design = "filled",
+  intent = "surface",
+  inset = false,
+  asChild,
+  className,
+  ref,
+  ...props
+}) => {
+  const Component = asChild ? Slot : "div";
+  const backdropDetected = hasBackdrop(children);
+  const interactiveDetected = isInteractive(children, asChild, props);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    CardContext.Provider,
+    {
+      value: {
+        design,
+        intent,
+        hasBackdrop: backdropDetected,
+        inset,
+        isInteractive: interactiveDetected
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        Component,
+        {
+          "data-spark-component": "card",
+          "data-interactive": interactiveDetected,
+          ref,
+          className: cardStyles({
+            className,
+            design,
+            intent,
+            hasBackdrop: backdropDetected
+          }),
+          ...props,
+          children
+        }
+      )
+    }
+  );
+};
+Card.displayName = "Card";
+
+// src/card/Content.styles.tsx
+var import_internal_utils3 = require("@spark-ui/internal-utils");
+var import_class_variance_authority3 = require("class-variance-authority");
+var contentStyles = (0, import_class_variance_authority3.cva)(
+  [
+    "relative h-full default:rounded-lg w-full focus-visible:u-outline",
+    "default:transition-colors default:duration-200 ease-linear"
+  ],
+  {
+    variants: {
+      inset: {
+        false: ["default:p-lg"]
+      },
+      design: {
+        filled: [],
+        outlined: [
+          "default:bg-surface group-focus:bg-surface-hovered group-not-disabled:group-data-[interactive=true]:group-hover:bg-surface-hovered"
+        ],
+        tinted: []
+      },
+      hasBackdrop: {
+        true: ["rounded-t-[16px_8px] "]
+      },
+      intent: (0, import_internal_utils3.makeVariants)({
+        main: [],
+        support: [],
+        accent: [],
+        basic: [],
+        success: [],
+        alert: [],
+        danger: [],
+        info: [],
+        neutral: [],
+        surface: [],
+        surfaceInverse: []
+      })
+    },
+    compoundVariants: [
+      // FILLED
+      {
+        intent: "main",
+        design: "filled",
+        class: (0, import_internal_utils3.tw)([
+          "bg-main text-on-main group-focus:bg-main-hovered",
+          "group-not-disabled:group-data-[interactive=true]:group-hover:bg-main-hovered"
+        ])
+      },
+      {
+        intent: "support",
+        design: "filled",
+        class: (0, import_internal_utils3.tw)([
+          "bg-support text-on-support group-focus:bg-support-hovered",
+          "group-not-disabled:group-data-[interactive=true]:group-hover:bg-support-hovered"
+        ])
+      },
+      {
+        intent: "accent",
+        design: "filled",
+        class: (0, import_internal_utils3.tw)([
+          "bg-accent text-on-accent group-focus:bg-accent-hovered",
+          "group-not-disabled:group-data-[interactive=true]:group-hover:bg-accent-hovered"
+        ])
+      },
+      {
+        intent: "basic",
+        design: "filled",
+        class: (0, import_internal_utils3.tw)([
+          "bg-basic text-on-basic group-focus:bg-basic-hovered",
+          "group-not-disabled:group-data-[interactive=true]:group-hover:bg-basic-hovered"
+        ])
+      },
+      {
+        intent: "success",
+        design: "filled",
+        class: (0, import_internal_utils3.tw)([
+          "bg-success text-on-success group-focus:bg-success-hovered",
+          "group-not-disabled:group-data-[interactive=true]:group-hover:bg-success-hovered"
+        ])
+      },
+      {
+        intent: "alert",
+        design: "filled",
+        class: (0, import_internal_utils3.tw)([
+          "bg-alert text-on-alert group-focus:bg-alert-hovered",
+          "group-not-disabled:group-data-[interactive=true]:group-hover:bg-alert-hovered"
+        ])
+      },
+      {
+        intent: "danger",
+        design: "filled",
+        class: (0, import_internal_utils3.tw)([
+          "text-on-error bg-error group-focus:bg-error-hovered",
+          "group-not-disabled:group-data-[interactive=true]:group-hover:bg-error-hovered"
+        ])
+      },
+      {
+        intent: "info",
+        design: "filled",
+        class: (0, import_internal_utils3.tw)([
+          "text-on-error bg-info group-focus:bg-info-hovered",
+          "group-not-disabled:group-data-[interactive=true]:group-hover:bg-info-hovered"
+        ])
+      },
+      {
+        intent: "neutral",
+        design: "filled",
+        class: (0, import_internal_utils3.tw)([
+          "bg-neutral text-on-neutral group-focus:bg-neutral-hovered",
+          "group-not-disabled:group-data-[interactive=true]:group-hover:bg-neutral-hovered"
+        ])
+      },
+      {
+        intent: "surface",
+        design: "filled",
+        class: (0, import_internal_utils3.tw)([
+          "bg-surface text-on-surface group-focus:bg-surface-hovered",
+          "group-not-disabled:group-data-[interactive=true]:group-hover:bg-surface-hovered"
+        ])
+      },
+      // OUTLINED
+      /**
+       * Outlined styles are handled by the Card component (parent)
+       */
+      // TINTED
+      {
+        intent: "main",
+        design: "tinted",
+        class: (0, import_internal_utils3.tw)([
+          "bg-main-container text-on-main-container group-focus:bg-main-container-hovered",
+          "group-not-disabled:group-data-[interactive=true]:group-hover:bg-main-container-hovered"
+        ])
+      },
+      {
+        intent: "support",
+        design: "tinted",
+        class: (0, import_internal_utils3.tw)([
+          "bg-support-container text-on-support-container group-focus:bg-support-container-hovered",
+          "group-not-disabled:group-data-[interactive=true]:group-hover:bg-support-container-hovered"
+        ])
+      },
+      {
+        intent: "accent",
+        design: "tinted",
+        class: (0, import_internal_utils3.tw)([
+          "bg-accent-container text-on-accent-container group-focus:bg-accent-container-hovered",
+          "group-not-disabled:group-data-[interactive=true]:group-hover:bg-accent-container-hovered"
+        ])
+      },
+      {
+        intent: "basic",
+        design: "tinted",
+        class: (0, import_internal_utils3.tw)([
+          "bg-basic-container text-on-basic-container group-focus:bg-basic-container-hovered"
+        ])
+      },
+      {
+        intent: "success",
+        design: "tinted",
+        class: (0, import_internal_utils3.tw)([
+          "bg-success-container text-on-success-container group-focus:bg-success-container-hovered",
+          "group-not-disabled:group-data-[interactive=true]:group-hover:bg-success-container-hovered"
+        ])
+      },
+      {
+        intent: "alert",
+        design: "tinted",
+        class: (0, import_internal_utils3.tw)([
+          "bg-alert-container text-on-alert-container group-focus:bg-alert-container-hovered",
+          "group-not-disabled:group-data-[interactive=true]:group-hover:bg-alert-container-hovered"
+        ])
+      },
+      {
+        intent: "danger",
+        design: "tinted",
+        class: (0, import_internal_utils3.tw)([
+          "bg-error-container text-on-error-container group-focus:bg-error-container-hovered",
+          "group-not-disabled:group-data-[interactive=true]:group-hover:bg-error-container-hovered"
+        ])
+      },
+      {
+        intent: "info",
+        design: "tinted",
+        class: (0, import_internal_utils3.tw)([
+          "bg-info-container text-on-info-container group-focus:bg-info-container-hovered",
+          "group-not-disabled:group-data-[interactive=true]:group-hover:bg-info-container-hovered"
+        ])
+      },
+      {
+        intent: "neutral",
+        design: "tinted",
+        class: (0, import_internal_utils3.tw)([
+          "bg-neutral-container text-on-neutral-container group-focus:bg-neutral-container-hovered",
+          "group-not-disabled:group-data-[interactive=true]:group-hover:bg-neutral-container-hovered"
+        ])
+      },
+      {
+        intent: "surface",
+        design: "tinted",
+        class: (0, import_internal_utils3.tw)([
+          "bg-surface text-on-surface group-focus:bg-surface-hovered",
+          "group-not-disabled:group-data-[interactive=true]:group-hover:bg-surface-hovered"
+        ])
+      }
+    ],
+    defaultVariants: {
+      design: "filled",
+      intent: "surface",
+      inset: false,
+      hasBackdrop: true
+    }
+  }
+);
+
+// src/card/Content.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var Content = ({ children, inset, asChild, className, ref, ...props }) => {
+  const Component = asChild ? Slot : "div";
+  const { design, intent, hasBackdrop: hasBackdrop2 } = useCardContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    Component,
+    {
+      "data-spark-component": "card-content",
+      ref,
+      className: contentStyles({
+        className,
+        design,
+        intent,
+        inset,
+        hasBackdrop: hasBackdrop2
+      }),
+      ...props,
+      children
+    }
+  );
+};
+Content.displayName = "Content";
+
+// src/card/index.ts
+var Card2 = Object.assign(Card, {
+  Content,
+  Backdrop
+});
+Card2.displayName = "Card";
+Content.displayName = "Card.Content";
+Backdrop.displayName = "Card.Backdrop";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Card
+});
+//# sourceMappingURL=index.js.map