@sableui/react 0.6.2 → 0.7.1

package/dist/components/empty-state/empty-state.js

@@ -0,0 +1,52 @@
+// src/components/empty-state/empty-state.tsx
+import { Icon } from "../../icon/index.js";
+import { cn } from "../../lib/cn.js";
+import { Card } from "../card/index.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function EmptyState({
+  icon,
+  title,
+  description,
+  action,
+  code,
+  tone = "neutral",
+  size = "md",
+  surface = "none",
+  className,
+  ...props
+}) {
+  const destructive = tone === "destructive";
+  const glyph = icon ?? (destructive && code == null ? /* @__PURE__ */ jsx(Icon, { name: "warning" }) : null);
+  const Title = size === "lg" ? "h2" : "p";
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    code != null ? /* @__PURE__ */ jsx("p", { className: "text-display-lg text-muted-foreground", children: code }) : null,
+    glyph != null ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "flex items-center justify-center text-3xl",
+          destructive ? "text-destructive" : "text-muted-foreground"
+        ),
+        children: glyph
+      }
+    ) : null,
+    /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center", size === "lg" ? "gap-2" : "gap-1"), children: [
+      /* @__PURE__ */ jsx(Title, { className: size === "lg" ? "text-heading-2" : "text-title-lg", children: title }),
+      description != null ? /* @__PURE__ */ jsx("p", { className: "max-w-md text-body-md text-muted-foreground", children: description }) : null
+    ] }),
+    action != null ? /* @__PURE__ */ jsx("div", { className: "mt-1", children: action }) : null
+  ] });
+  const layout = cn(
+    "flex flex-col items-center justify-center gap-4 text-center",
+    size === "lg" ? "px-6 py-20" : "px-6 py-12"
+  );
+  const a11y = destructive ? { role: "alert" } : {};
+  if (surface === "card") {
+    return /* @__PURE__ */ jsx(Card, { className: cn(layout, "p-[var(--card-p)]", className), ...a11y, ...props, children: body });
+  }
+  return /* @__PURE__ */ jsx("div", { className: cn(layout, className), ...a11y, ...props, children: body });
+}
+EmptyState.displayName = "EmptyState";
+export {
+  EmptyState
+};

package/dist/components/empty-state/empty-state.meta.js

@@ -0,0 +1,158 @@
+// src/components/empty-state/empty-state.meta.ts
+var emptyStateMeta = {
+  name: "EmptyState",
+  summary: 'The centered empty / error block: optional icon or error code, title, description and an action. tone="destructive" makes it an announced error, size="lg" a page-level state, surface="card" a self-contained card.',
+  keywords: [
+    "empty",
+    "zero state",
+    "blank slate",
+    "no results",
+    "placeholder",
+    "onboarding",
+    "no data"
+  ],
+  usage: {
+    description: "Use EmptyState when a content area has no items, no search results, or no first-time setup yet. The title should name the empty condition and the description/action should give the user a next step.",
+    bestPractices: [
+      {
+        guidance: "do",
+        description: 'Explain what is empty in plain language, such as "No posts yet" or "No matching collectors".'
+      },
+      {
+        guidance: "do",
+        description: "Offer one next step when the user can recover, create, clear filters, or start setup."
+      },
+      {
+        guidance: "do",
+        description: "Keep the icon decorative and make the title carry the meaning."
+      },
+      {
+        guidance: "do",
+        description: `For a search or filter result, name the query back to the user and offer the way out, such as "No results for 'quarterly'" with a Clear filters action. An empty result that does not say what was searched leaves the user unsure whether the query or the data was wrong.`
+      },
+      {
+        guidance: "dont",
+        description: 'Use generic copy like "No data"; it gives users and agents no useful path forward.'
+      },
+      {
+        guidance: "dont",
+        description: "Park anything the user needs permanently here, such as setup instructions, billing notices, or keyboard shortcuts. An empty state is the one surface guaranteed to disappear the moment content exists, so information that matters after the first item is lost exactly when the user has learned enough to want it."
+      },
+      {
+        guidance: "dont",
+        description: `Use it for a field's validation error \u2014 that is Field error messaging. Reserve tone="destructive" for a view or block that failed to load.`
+      }
+    ],
+    anatomy: [
+      {
+        name: "Icon",
+        required: false,
+        description: "A decorative cue that reinforces the empty condition."
+      },
+      {
+        name: "Title",
+        required: true,
+        description: "The short message naming what is empty."
+      },
+      {
+        name: "Description",
+        required: false,
+        description: "Supporting copy that explains why the state exists or what to try next."
+      },
+      {
+        name: "Action",
+        required: false,
+        description: "One clear button or link that moves the user forward."
+      }
+    ]
+  },
+  related: {
+    components: ["Button", "Icon", "Card", "Banner", "DataTable"],
+    patterns: ["FeedPage", "ListDetailPage", "DashboardPage"]
+  },
+  status: "stable",
+  props: [
+    {
+      name: "icon",
+      type: "ReactNode",
+      description: "Optional glyph above the title \u2014 an `<Icon />` takes the muted ink at 3xl; an image or illustration renders as given."
+    },
+    {
+      name: "title",
+      type: "ReactNode",
+      description: "The headline. Short and direct."
+    },
+    {
+      name: "description",
+      type: "ReactNode",
+      description: "Optional supporting line beneath the title."
+    },
+    {
+      name: "action",
+      type: "ReactNode",
+      description: "Optional action below the copy \u2014 typically a `<Button />`."
+    },
+    {
+      name: "code",
+      type: "ReactNode",
+      description: "A large figure above the title, such as an error code (404)."
+    },
+    {
+      name: "tone",
+      type: '"neutral" | "destructive"',
+      default: '"neutral"',
+      description: 'destructive is an error state: a destructive icon (a warning by default) and role="alert" so it is announced.'
+    },
+    {
+      name: "size",
+      type: '"md" | "lg"',
+      default: '"md"',
+      description: "lg is page-level: the title is an h2 and the block takes more room. md sits in a panel, list or card."
+    },
+    {
+      name: "surface",
+      type: '"none" | "card"',
+      default: '"none"',
+      description: "card draws it as a Card, for an error or empty block standing on its own in a page."
+    }
+  ],
+  variants: {
+    tone: ["neutral", "destructive"],
+    size: ["md", "lg"],
+    surface: ["none", "card"]
+  },
+  tokensUsed: ["muted", "muted-foreground", "foreground", "destructive"],
+  a11y: [
+    "Decorative icons should not carry meaning the title doesn't already convey.",
+    "Pair with an actionable next step so the zero-state is a path forward, not a dead end."
+  ],
+  examples: [
+    {
+      label: "With icon and action",
+      code: '<EmptyState icon={<Icon name="info" />} title="No posts yet" description="Create your first." action={<Button>New post</Button>} />'
+    },
+    {
+      label: "No search results",
+      code: '<EmptyState icon={<Icon name="search" />} title="No matching posts" description="Try a different keyword or clear your filters." action={<Button variant="secondary">Clear filters</Button>} />'
+    },
+    {
+      label: "First-run setup",
+      code: '<EmptyState surface="card" icon={<Icon name="sparkles" />} title="Start your collection" description="Create a first edition, import an existing drop, or invite collaborators." action={<Row gap={1}><Button>Create edition</Button><Button variant="ghost">Import</Button></Row>} />'
+    },
+    {
+      label: "Page-level error",
+      code: '<EmptyState tone="destructive" size="lg" code="404" title="Page not found" description="The page you are looking for has moved or never existed." action={<Button>Go home</Button>} />'
+    },
+    {
+      label: "Error card",
+      code: '<EmptyState tone="destructive" surface="card" title="Could not load this edition" description="Check your connection and try again." action={<Button variant="secondary">Retry</Button>} />'
+    },
+    {
+      label: "Empty table body",
+      code: '<DataTable data={[]} columns={[{ key: "name", header: "Collector" }, { key: "status", header: "Status" }]} empty={<EmptyState title="No collectors yet" description="Collectors appear here after the first mint." />} />'
+    }
+  ]
+};
+export {
+  emptyStateMeta
+};

package/dist/components/empty-state/index.js

@@ -0,0 +1,7 @@
+// src/components/empty-state/index.ts
+import { EmptyState } from "./empty-state.js";
+import { emptyStateMeta } from "./empty-state.meta.js";
+export {
+  EmptyState,
+  emptyStateMeta
+};

package/dist/components/entity/entity.js

@@ -0,0 +1,70 @@
+// src/components/entity/entity.tsx
+import { cn } from "../../lib/cn.js";
+import { entityVariants } from "./entity.variants.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function Entity({
+  leading,
+  title,
+  subtitle,
+  action,
+  density,
+  className,
+  interactive,
+  onSelect,
+  selected,
+  ...props
+}) {
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    leading != null ? /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center", children: leading }) : null,
+    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+      /* @__PURE__ */ jsx("span", { className: "truncate text-title-sm text-foreground", children: title }),
+      subtitle != null ? /* @__PURE__ */ jsx("span", { className: "truncate text-body-sm text-muted-foreground", children: subtitle }) : null
+    ] })
+  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        entityVariants({ density }),
+        // Hover and selected fills are steps off the surface the row sits on
+        // (sable-surface-interactive), so a selected row reads on a card, a
+        // well or a popover alike — and stays filled while hovered, which a
+        // fixed hover:bg-muted/50 used to override.
+        interactive && "sable-surface-interactive relative rounded-[var(--entity-radius,var(--radius-md))] motion-interactive",
+        className
+      ),
+      "data-selected": interactive && selected ? "" : void 0,
+      ...props,
+      children: [
+        interactive ? (
+          // design-lint-disable-next-line raw-button -- the whole row is the hit target (stretched ::after); a row has its own anatomy, not a Button's height/padding
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onSelect,
+              "aria-current": selected ? "true" : void 0,
+              className: "flex min-w-0 flex-1 cursor-pointer items-center gap-3 text-start outline-none motion-interactive after:absolute after:inset-0 after:rounded-[var(--entity-radius,var(--radius-md))] focus-visible:after:ring-2 focus-visible:after:ring-ring",
+              children: body
+            }
+          )
+        ) : body,
+        action != null ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "flex shrink-0 items-center",
+              // Above the stretched hit area, so the action keeps its own clicks.
+              interactive && "relative z-10"
+            ),
+            children: action
+          }
+        ) : null
+      ]
+    }
+  );
+}
+Entity.displayName = "Entity";
+export {
+  Entity
+};

package/dist/components/entity/entity.meta.js

@@ -0,0 +1,108 @@
+// src/components/entity/entity.meta.ts
+var entityMeta = {
+  name: "Entity",
+  summary: "A list-row record: leading visual + title/subtitle column + trailing action, with truncating text. Presentational by default (no hover); `interactive` rows gain the hover highlight, focus ring, and keyboard activation, and `selected` marks the current one. Compact/comfortable density.",
+  status: "stable",
+  keywords: [
+    "entity",
+    "identity",
+    "object",
+    "avatar row"
+  ],
+  usage: {
+    description: "Use Entity to show a compact identity block for a person, organization, file, project, or other object.",
+    bestPractices: [
+      {
+        guidance: "do",
+        description: "Use a clear title and one or two useful metadata lines."
+      },
+      {
+        guidance: "do",
+        description: "Pair with Avatar or Badge (dot for a status) when identity needs state or type."
+      },
+      {
+        guidance: "do",
+        description: "For a list, stack Entity rows directly in a column; each row owns its padding. For a list in a card, put the rows in CardList, which insets them to the card's own padding and divides them, so the rows line up with the card's header instead of being tuned by hand with px-* classes."
+      },
+      {
+        guidance: "dont",
+        description: "Do not use Entity for long descriptions, editable fields, or full card content."
+      },
+      {
+        guidance: "dont",
+        description: "Do not make the whole row a link when it also carries a trailing action. Nesting an interactive element inside a link is invalid, and the action becomes unreachable by keyboard."
+      }
+    ]
+  },
+  related: {
+    components: ["Avatar", "Badge"]
+  },
+  props: [
+    {
+      name: "leading",
+      type: "ReactNode",
+      description: "Leading visual \u2014 typically an Avatar or an Icon."
+    },
+    {
+      name: "title",
+      type: "ReactNode",
+      description: "Primary line (text-title-sm, truncated). Required."
+    },
+    {
+      name: "subtitle",
+      type: "ReactNode",
+      description: "Secondary line (text-body-sm muted, truncated)."
+    },
+    {
+      name: "action",
+      type: "ReactNode",
+      description: "Trailing slot \u2014 typically a ghost icon Button or a StatusDot."
+    },
+    {
+      name: "interactive",
+      type: "boolean",
+      default: "false",
+      description: "Make the whole row a target: the leading visual and text become a native <button> whose hit area stretches over the row (focus ring, Enter/Space). The action stays outside it. Requires onSelect."
+    },
+    {
+      name: "onSelect",
+      type: "() => void",
+      description: "Activation handler for an interactive row (fired on click and Enter/Space). Required when interactive."
+    },
+    {
+      name: "selected",
+      type: "boolean",
+      default: "false",
+      description: `Interactive rows only: the current row of a selectable list (the record open in a list\u2013detail view). Sets aria-current="true" on the row's button and paints the selected fill, a step off the surface the row sits on, which holds on hover.`
+    },
+    {
+      name: "density",
+      type: '"compact" | "comfortable"',
+      default: '"compact"',
+      description: "Row padding: compact (12px \xD7 10px, the default) or comfortable (16px \xD7 12px), on the spacing scale. The insets read --entity-px / --entity-py first, which CardList sets from the card's own padding so rows in a card line up with its header."
+    }
+  ],
+  variants: {
+    density: ["compact", "comfortable"]
+  },
+  tokensUsed: ["accent", "accent-foreground", "foreground", "muted-foreground", "ring"],
+  a11y: [
+    "Default rows are presentational layout; semantics come from the content you place in title/subtitle/action.",
+    "interactive rows render a real <button> around the leading visual and text, with its ::after stretched over the whole row \u2014 native focus, a focus-visible ring, and Enter/Space. The action slot sits outside that button and above the overlay, so a Button there stays valid HTML and keeps its own clicks.",
+    "Give any interactive action an accessible label (e.g. aria-label on a ghost icon Button).",
+    'A selected row announces aria-current="true" on its button, so the current record is spoken, not only shown by its fill.'
+  ],
+  examples: [
+    {
+      label: "Person row",
+      code: '<Entity leading={<Avatar fallback="AM" />} title="Alex Morgan" subtitle="@alex" action={<Button variant="ghost" size="icon" aria-label="More"><Icon name="ellipsis" /></Button>} />'
+    },
+    {
+      label: "Interactive (selectable) row",
+      code: '<Entity interactive onSelect={() => selectUser(user)} leading={<Avatar fallback="AM" />} title="Alex Morgan" subtitle="@alex" />'
+    }
+  ]
+};
+export {
+  entityMeta
+};

package/dist/components/entity/entity.variants.js

@@ -0,0 +1,16 @@
+// src/components/entity/entity.variants.ts
+import { cva } from "class-variance-authority";
+var entityVariants = cva("flex items-center gap-3", {
+  variants: {
+    density: {
+      compact: "px-[var(--entity-px,--spacing(3))] py-[var(--entity-py,--spacing(2.5))]",
+      comfortable: "px-[var(--entity-px,--spacing(4))] py-[var(--entity-py,--spacing(3))]"
+    }
+  },
+  defaultVariants: {
+    density: "compact"
+  }
+});
+export {
+  entityVariants
+};

package/dist/components/entity/index.js

@@ -0,0 +1,7 @@
+// src/components/entity/index.ts
+import { Entity } from "./entity.js";
+import { entityMeta } from "./entity.meta.js";
+export {
+  Entity,
+  entityMeta
+};

package/dist/components/feedback/feedback.js

@@ -0,0 +1,93 @@
+"use client";
+
+// src/components/feedback/feedback.tsx
+import { useId, useState } from "react";
+import { cn } from "../../lib/cn.js";
+import { Button } from "../button/index.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../popover/index.js";
+import { Textarea } from "../textarea/index.js";
+import { Toggle, ToggleGroup } from "../toggle/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_RATINGS = [
+  { value: "bad", label: "\u{1F641}" },
+  { value: "ok", label: "\u{1F610}" },
+  { value: "good", label: "\u{1F642}" }
+];
+function Feedback({
+  label = "Feedback",
+  heading = "Send feedback",
+  placeholder = "What can we improve?",
+  submitLabel = "Send",
+  ratings = DEFAULT_RATINGS,
+  onSubmit,
+  className,
+  ...props
+}) {
+  const [open, setOpen] = useState(false);
+  const [rating, setRating] = useState(void 0);
+  const [message, setMessage] = useState("");
+  const headingId = useId();
+  function reset() {
+    setRating(void 0);
+    setMessage("");
+  }
+  function handleSubmit(event) {
+    event.preventDefault();
+    if (!rating && message.trim() === "") return;
+    onSubmit?.({ rating, message });
+    reset();
+    setOpen(false);
+  }
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(
+      PopoverTrigger,
+      {
+        render: /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "sm", children: label })
+      }
+    ),
+    /* @__PURE__ */ jsx(PopoverContent, { className: "w-80", children: /* @__PURE__ */ jsxs(
+      "form",
+      {
+        className: cn("flex flex-col gap-3", className),
+        "aria-labelledby": headingId,
+        onSubmit: handleSubmit,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("p", { id: headingId, className: "text-title-sm text-popover-foreground", children: heading }),
+          /* @__PURE__ */ jsx(
+            ToggleGroup,
+            {
+              value: rating ? [rating] : [],
+              onValueChange: (value) => setRating(value[0]),
+              "aria-label": "Rating",
+              children: ratings.map((option) => /* @__PURE__ */ jsx(
+                Toggle,
+                {
+                  value: option.value,
+                  "aria-label": option.value,
+                  className: "flex-1 text-base",
+                  children: option.label
+                },
+                option.value
+              ))
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Textarea,
+            {
+              value: message,
+              onChange: (event) => setMessage(event.target.value),
+              placeholder,
+              "aria-label": placeholder
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "flex items-center justify-end gap-2", children: /* @__PURE__ */ jsx(Button, { type: "submit", size: "sm", disabled: !rating && message.trim() === "", children: submitLabel }) })
+        ]
+      }
+    ) })
+  ] });
+}
+Feedback.displayName = "Feedback";
+export {
+  Feedback
+};

package/dist/components/feedback/feedback.meta.js

@@ -0,0 +1,109 @@
+// src/components/feedback/feedback.meta.ts
+var feedbackMeta = {
+  name: "Feedback",
+  summary: "A compact feedback popover. Composes Popover + Textarea + Button + Toggle into a rating row plus a message field; submitting reports the rating + message and closes the popover.",
+  status: "stable",
+  keywords: [
+    "feedback",
+    "sentiment",
+    "rating",
+    "prompt"
+  ],
+  usage: {
+    description: "Use Feedback to collect lightweight sentiment, usefulness, or quality signals from users.",
+    bestPractices: [
+      {
+        guidance: "do",
+        description: "Ask for feedback at a moment when the user has enough context to answer."
+      },
+      {
+        guidance: "do",
+        description: "Keep the prompt short and optional unless feedback is required by the workflow."
+      },
+      {
+        guidance: "dont",
+        description: "Do not use Feedback for errors, alerts, or required support forms."
+      },
+      {
+        guidance: "dont",
+        description: "Do not require the message field. Most feedback is a rating with no comment, and forcing prose is how a feedback control stops being used."
+      }
+    ]
+  },
+  related: {
+    components: [
+      "Toast",
+      "Banner",
+      "Form"
+    ]
+  },
+  props: [
+    {
+      name: "label",
+      type: "string",
+      default: '"Feedback"',
+      description: "Trigger button text."
+    },
+    {
+      name: "heading",
+      type: "string",
+      default: '"Send feedback"',
+      description: "Heading shown above the rating row."
+    },
+    {
+      name: "placeholder",
+      type: "string",
+      default: '"What can we improve?"',
+      description: "Placeholder for the message field."
+    },
+    {
+      name: "submitLabel",
+      type: "string",
+      default: '"Send"',
+      description: "Submit button text."
+    },
+    {
+      name: "ratings",
+      type: "FeedbackRating[]",
+      default: "\u{1F641} / \u{1F610} / \u{1F642}",
+      description: "The rating options shown as a row of toggles. Each is { value, label }."
+    },
+    {
+      name: "onSubmit",
+      type: "(data: { rating?: string; message: string }) => void",
+      description: "Called with the selected rating + message when the form is submitted."
+    }
+  ],
+  tokensUsed: [
+    "popover",
+    "popover-foreground",
+    "border",
+    "input",
+    "card",
+    "foreground",
+    "muted-foreground",
+    "accent",
+    "accent-foreground",
+    "ring"
+  ],
+  a11y: [
+    "Trigger opens the popover on press; Base UI manages focus into the form and restores it to the trigger on close.",
+    "The rating row is a Base UI ToggleGroup with arrow-key roving focus; each toggle carries an aria-label.",
+    'The form is named by its heading (aria-labelledby), so it is announced as "Send feedback" rather than an unnamed form.',
+    "The message field carries an aria-label matching its placeholder.",
+    "Submit is disabled until there is a rating or a non-whitespace message. Either alone is a complete answer."
+  ],
+  examples: [
+    {
+      label: "Basic",
+      code: "<Feedback onSubmit={({ rating, message }) => console.log(rating, message)} />"
+    },
+    {
+      label: "Custom labels",
+      code: '<Feedback label="Tell us" submitLabel="Send it" placeholder="Describe the issue\u2026" />'
+    }
+  ]
+};
+export {
+  feedbackMeta
+};

package/dist/components/feedback/index.js

@@ -0,0 +1,7 @@
+// src/components/feedback/index.ts
+import { Feedback } from "./feedback.js";
+import { feedbackMeta } from "./feedback.meta.js";
+export {
+  Feedback,
+  feedbackMeta
+};