@alexgorbatchev/shadcn 0.0.19 → 0.0.21

package/dist/options/types.d.ts

@@ -3,3 +3,8 @@ export interface INamedOption {
     id: string;
     name: string;
 }
+/** A display label paired with its submitted value. */
+export interface ILabelValue {
+    label: string;
+    value: string;
+}

package/dist/theme.css

@@ -488,43 +488,42 @@
 }
 
 /* Pointer-following border highlight and surface glow. useCardSpotlight writes --card-spotlight-x/y while the
-   pointer is inside the card; without them both gradients sit off-screen and the frame shows the plain border. */
+   pointer is inside the card; without them both gradients sit off-screen and the frame shows the plain border.
+   Forced colors compute gradient backgrounds to none and force border-color, leaving the native system border. */
 @utility card-spotlight {
-  @media (forced-colors: none) {
-    position: relative;
-    isolation: isolate;
-    border-color: transparent;
-    background-image:
-      linear-gradient(var(--card), var(--card)),
-      radial-gradient(
-        240px circle at var(--card-spotlight-x, -999px) var(--card-spotlight-y, -999px),
-        color-mix(in oklab, var(--primary) 75%, transparent),
-        transparent 70%
-      ),
-      linear-gradient(var(--border), var(--border));
-    background-origin: border-box;
-    background-clip: padding-box, border-box, border-box;
-
-    &::before {
-      content: "";
-      position: absolute;
-      inset: 0;
-      z-index: -1;
-      border-radius: inherit;
-      pointer-events: none;
-      background: radial-gradient(
-        420px circle at var(--card-spotlight-x, -999px) var(--card-spotlight-y, -999px),
-        color-mix(in oklab, var(--primary) 9%, transparent),
-        transparent 45%
-      );
-      opacity: 0;
-      transition: opacity 350ms ease-out;
-    }
+  position: relative;
+  isolation: isolate;
+  border-color: transparent;
+  background-image:
+    linear-gradient(var(--card), var(--card)),
+    radial-gradient(
+      240px circle at var(--card-spotlight-x, -999px) var(--card-spotlight-y, -999px),
+      color-mix(in oklab, var(--primary) 75%, transparent),
+      transparent 70%
+    ),
+    linear-gradient(var(--border), var(--border));
+  background-origin: border-box;
+  background-clip: padding-box, border-box, border-box;
+
+  &::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    border-radius: inherit;
+    pointer-events: none;
+    background: radial-gradient(
+      420px circle at var(--card-spotlight-x, -999px) var(--card-spotlight-y, -999px),
+      color-mix(in oklab, var(--primary) 9%, transparent),
+      transparent 45%
+    );
+    opacity: 0;
+    transition: opacity 350ms ease-out;
+  }
 
-    @media (hover: hover) {
-      &:hover::before {
-        opacity: 1;
-      }
+  @media (hover: hover) {
+    &:hover::before {
+      opacity: 1;
     }
   }
 }

package/dist/utils/observeScrollGuards.d.ts

@@ -0,0 +1,4 @@
+type ReportViolation = (error: Error) => void;
+/** Observe the current document, including portals. Descendant scroll viewports remain independent. */
+export declare function observeScrollGuards(ownerDocument: Document, reportViolation?: ReportViolation): () => void;
+export {};

package/llms/components/actions/Button.md

@@ -0,0 +1,433 @@
+# Button
+
+Story: @alexgorbatchev/shadcn/components/actions/Button
+Source: src/components/stories/actions/Button.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/actions/Button.stories.tsx)
+
+## Public imports
+
+```tsx
+import { Button, buttonVariants, Spinner } from "@alexgorbatchev/shadcn";
+```
+
+## Supporting imports
+
+```tsx
+import { ArrowRightIcon, BookmarkIcon } from "lucide-react";
+```
+
+## Default component
+
+```tsx
+Button
+```
+
+## Story controls
+
+```tsx
+{
+    variant: {
+        control: "select",
+        options: ["default", "outline", "secondary", "ghost", "destructive", "success", "warning", "link"],
+    },
+    size: {
+        control: "select",
+        options: ["default", "content", "xs", "sm", "lg", "icon", "icon-xs", "icon-sm", "icon-lg"],
+    },
+    density: { control: "select", options: ["compact", "comfortable"] },
+}
+```
+
+## Default args
+
+```tsx
+{ children: "Save changes", onClick: fn() }
+```
+
+## Examples
+
+Storybook CSF excerpts. Default args and render apply unless overridden. Local helpers, fixtures, decorators, and providers may be required; these are reference excerpts, not standalone consumer modules. Interaction tests are omitted.
+
+### Default
+
+```tsx
+{}
+```
+
+### HoverPrimaryLight
+
+```tsx
+{
+    globals: { theme: "light", density: "comfortable" }
+}
+```
+
+### Outline
+
+```tsx
+{
+    args: { variant: "outline" }
+}
+```
+
+### Secondary
+
+```tsx
+{
+    args: { variant: "secondary" }
+}
+```
+
+### Ghost
+
+```tsx
+{
+    args: { variant: "ghost" }
+}
+```
+
+### Destructive
+
+```tsx
+{
+    args: { variant: "destructive" }
+}
+```
+
+### Success
+
+```tsx
+{
+    args: { variant: "success" }
+}
+```
+
+### Warning
+
+```tsx
+{
+    args: { variant: "warning" }
+}
+```
+
+### Link
+
+```tsx
+{
+    args: { variant: "link" }
+}
+```
+
+### Disabled
+
+```tsx
+{
+    args: { disabled: true }
+}
+```
+
+### WithIcon
+
+```tsx
+{
+    args: {
+        children: (<>
+        Next
+        <ArrowRightIcon data-icon="inline-end"/>
+      </>),
+    }
+}
+```
+
+### Loading
+
+```tsx
+{
+    args: {
+        disabled: true,
+        children: (<>
+        <Spinner data-icon="inline-start"/>
+        Saving
+      </>),
+    }
+}
+```
+
+### SizeXs
+
+```tsx
+{
+    args: { size: "xs" }
+}
+```
+
+### SizeSm
+
+```tsx
+{
+    args: { size: "sm" }
+}
+```
+
+### SizeLg
+
+```tsx
+{
+    args: { size: "lg" }
+}
+```
+
+### Icon
+
+```tsx
+{
+    args: { size: "icon", "aria-label": "Next page", children: <ArrowRightIcon /> }
+}
+```
+
+### IconXs
+
+```tsx
+{
+    args: { size: "icon-xs", "aria-label": "Next page", children: <ArrowRightIcon /> }
+}
+```
+
+### IconSm
+
+```tsx
+{
+    args: { size: "icon-sm", "aria-label": "Next page", children: <ArrowRightIcon /> }
+}
+```
+
+### IconLg
+
+```tsx
+{
+    args: { size: "icon-lg", "aria-label": "Next page", children: <ArrowRightIcon /> }
+}
+```
+
+### StateCallback
+
+```tsx
+{
+    args: { className: fn(() => "font-normal") }
+}
+```
+
+### FocusableDisabled
+
+```tsx
+{
+    args: { disabled: true, focusableWhenDisabled: true, className: fn(() => "font-normal") }
+}
+```
+
+### RightToLeftIcons
+
+```tsx
+{
+    render: (args) => (<div className="flex flex-wrap gap-4">
+      <Button {...args} dir="ltr" aria-label="Leading LTR">
+        <BookmarkIcon data-icon="inline-start"/>
+        <span>Save</span>
+      </Button>
+      <Button {...args} dir="rtl" aria-label="Leading RTL">
+        <BookmarkIcon data-icon="inline-start"/>
+        <span>Save</span>
+      </Button>
+      <Button {...args} dir="ltr" aria-label="Trailing LTR">
+        <span>Save</span>
+        <BookmarkIcon data-icon="inline-end"/>
+      </Button>
+      <Button {...args} dir="rtl" aria-label="Trailing RTL">
+        <span>Save</span>
+        <BookmarkIcon data-icon="inline-end"/>
+      </Button>
+    </div>)
+}
+```
+
+### ExtraSmallRightToLeftIcons
+
+```tsx
+{
+    render: (args) => (<div className="flex flex-wrap gap-4">
+      <Button {...args} dir="ltr" aria-label="Leading LTR">
+        <BookmarkIcon data-icon="inline-start"/>
+        <span>Save</span>
+      </Button>
+      <Button {...args} dir="rtl" aria-label="Leading RTL">
+        <BookmarkIcon data-icon="inline-start"/>
+        <span>Save</span>
+      </Button>
+      <Button {...args} dir="ltr" aria-label="Trailing LTR">
+        <span>Save</span>
+        <BookmarkIcon data-icon="inline-end"/>
+      </Button>
+      <Button {...args} dir="rtl" aria-label="Trailing RTL">
+        <span>Save</span>
+        <BookmarkIcon data-icon="inline-end"/>
+      </Button>
+    </div>),
+    args: { size: "xs" }
+}
+```
+
+### SmallRightToLeftIcons
+
+```tsx
+{
+    render: (args) => (<div className="flex flex-wrap gap-4">
+      <Button {...args} dir="ltr" aria-label="Leading LTR">
+        <BookmarkIcon data-icon="inline-start"/>
+        <span>Save</span>
+      </Button>
+      <Button {...args} dir="rtl" aria-label="Leading RTL">
+        <BookmarkIcon data-icon="inline-start"/>
+        <span>Save</span>
+      </Button>
+      <Button {...args} dir="ltr" aria-label="Trailing LTR">
+        <span>Save</span>
+        <BookmarkIcon data-icon="inline-end"/>
+      </Button>
+      <Button {...args} dir="rtl" aria-label="Trailing RTL">
+        <span>Save</span>
+        <BookmarkIcon data-icon="inline-end"/>
+      </Button>
+    </div>),
+    args: { size: "sm" }
+}
+```
+
+### LargeRightToLeftIcons
+
+```tsx
+{
+    render: (args) => (<div className="flex flex-wrap gap-4">
+      <Button {...args} dir="ltr" aria-label="Leading LTR">
+        <BookmarkIcon data-icon="inline-start"/>
+        <span>Save</span>
+      </Button>
+      <Button {...args} dir="rtl" aria-label="Leading RTL">
+        <BookmarkIcon data-icon="inline-start"/>
+        <span>Save</span>
+      </Button>
+      <Button {...args} dir="ltr" aria-label="Trailing LTR">
+        <span>Save</span>
+        <BookmarkIcon data-icon="inline-end"/>
+      </Button>
+      <Button {...args} dir="rtl" aria-label="Trailing RTL">
+        <span>Save</span>
+        <BookmarkIcon data-icon="inline-end"/>
+      </Button>
+    </div>),
+    args: { size: "lg" }
+}
+```
+
+### CompactRightToLeftIcons
+
+```tsx
+{
+    render: (args) => (<div className="flex flex-wrap gap-4">
+      <Button {...args} dir="ltr" aria-label="Leading LTR">
+        <BookmarkIcon data-icon="inline-start"/>
+        <span>Save</span>
+      </Button>
+      <Button {...args} dir="rtl" aria-label="Leading RTL">
+        <BookmarkIcon data-icon="inline-start"/>
+        <span>Save</span>
+      </Button>
+      <Button {...args} dir="ltr" aria-label="Trailing LTR">
+        <span>Save</span>
+        <BookmarkIcon data-icon="inline-end"/>
+      </Button>
+      <Button {...args} dir="rtl" aria-label="Trailing RTL">
+        <span>Save</span>
+        <BookmarkIcon data-icon="inline-end"/>
+      </Button>
+    </div>),
+    args: { density: "compact" }
+}
+```
+
+### Rounded
+
+```tsx
+{
+    args: { className: "rounded-full" }
+}
+```
+
+### AsLink
+
+```tsx
+{
+    render: () => (<a href="#login" className={buttonVariants({ variant: "outline" })} onClick={(event) => {
+            event.preventDefault();
+            onLogin();
+        }}>
+      Login
+    </a>)
+}
+```
+
+### StartAligned
+
+```tsx
+{
+    args: { align: "start", className: "w-64", children: "Start aligned" }
+}
+```
+
+### Inline
+
+```tsx
+{
+    args: { variant: "link", size: "inline", align: "start", children: "Track title" }
+}
+```
+
+### EndAligned
+
+```tsx
+{
+    args: { align: "end", className: "w-64", children: "End aligned" }
+}
+```
+
+### TruncatedLabel
+
+```tsx
+{
+    args: { truncate: true, children: "A very long track title that must fit its container" },
+    decorators: [
+        (Story) => (<div className="w-36">
+        <Story />
+      </div>),
+    ]
+}
+```
+
+### ContentHeight
+
+```tsx
+{
+    args: { size: "content", variant: "outline", align: "start", fullWidth: true },
+    decorators: [
+        (Story) => (<section aria-label="Choice area" className="w-96">
+        <Story />
+      </section>),
+    ],
+    render: (args) => (<Button {...args}>
+      <span className="flex flex-col items-start">
+        <span>Use selected context</span>
+        <span>Include the current page and annotations</span>
+      </span>
+    </Button>)
+}
+```