@lapismd/design-core 0.1.0

package/src/shared/shadcn/button/button.tokens.css

@@ -0,0 +1,17 @@
+/**
+ * Default button token bindings → theme tokens.
+ * Override --ui-button-* on :root or any ancestor (forms pattern).
+ * Do not rebind these names on [data-ui-component="button"] hosts — that
+ * blocks ancestor customization.
+ */
+:root {
+  --ui-button-background: var(--primary);
+  --ui-button-foreground: var(--primary-foreground);
+  --ui-button-border-color: transparent;
+  --ui-button-radius: calc(var(--radius) * 0.8);
+  --ui-button-focus-ring-color: var(--ring);
+  --ui-button-height: calc(var(--spacing) * 9);
+  --ui-button-padding-inline: calc(var(--spacing) * 2.5);
+  --ui-button-gap: calc(var(--spacing) * 1.5);
+  --ui-button-icon-size: calc(var(--spacing) * 4);
+}

package/src/shared/shadcn/button/button.tokens.ts

@@ -0,0 +1,14 @@
+export const buttonTokenNames = {
+  background: "--ui-button-background",
+  foreground: "--ui-button-foreground",
+  borderColor: "--ui-button-border-color",
+  radius: "--ui-button-radius",
+  focusRingColor: "--ui-button-focus-ring-color",
+  height: "--ui-button-height",
+  paddingInline: "--ui-button-padding-inline",
+  gap: "--ui-button-gap",
+  iconSize: "--ui-button-icon-size",
+} as const;
+
+export type ButtonToken =
+  (typeof buttonTokenNames)[keyof typeof buttonTokenNames];

package/src/shared/shadcn/button/examples/default.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  // @generated by ui-generator — do not edit
+
+  import { Button } from "../index.js";
+</script>
+
+<Button>Button</Button>

package/src/shared/shadcn/button/examples/destructive.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  // @generated by ui-generator — do not edit
+
+  import { Button } from "../index.js";
+</script>
+
+<Button variant="destructive">Destructive</Button>

package/src/shared/shadcn/button/examples/ghost.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  // @generated by ui-generator — do not edit
+
+  import { Button } from "../index.js";
+</script>
+
+<Button variant="ghost">Ghost</Button>

package/src/shared/shadcn/button/examples/icon.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  // @generated by ui-generator — do not edit
+
+  import CircleFadingArrowUpIcon from "@lucide/svelte/icons/circle-fading-arrow-up";
+  import { Button } from "../index.js";
+</script>
+
+<Button variant="outline" size="icon" aria-label="Submit">
+  <CircleFadingArrowUpIcon />
+</Button>

package/src/shared/shadcn/button/examples/link.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  // @generated by ui-generator — do not edit
+
+  import { Button } from "../index.js";
+</script>
+
+<Button variant="link">Link</Button>

package/src/shared/shadcn/button/examples/outline.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  // @generated by ui-generator — do not edit
+
+  import { Button } from "../index.js";
+</script>
+
+<Button variant="outline">Outline</Button>

package/src/shared/shadcn/button/examples/preview.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  // @generated by ui-generator — do not edit
+
+  import ArrowUpIcon from "@lucide/svelte/icons/arrow-up";
+  import { Button } from "../index.js";
+</script>
+
+<div class="flex flex-wrap items-center gap-2 md:flex-row">
+  <Button variant="outline">Button</Button>
+  <Button variant="outline" size="icon" aria-label="Submit">
+    <ArrowUpIcon />
+  </Button>
+</div>

package/src/shared/shadcn/button/examples/rounded.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  // @generated by ui-generator — do not edit
+
+  import ArrowUpIcon from "@lucide/svelte/icons/arrow-up";
+  import { Button } from "../index.js";
+</script>
+
+<div class="flex flex-col gap-8">
+  <Button variant="outline" size="icon" class="rounded-full">
+    <ArrowUpIcon />
+  </Button>
+</div>

package/src/shared/shadcn/button/examples/secondary.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  // @generated by ui-generator — do not edit
+
+  import { Button } from "../index.js";
+</script>
+
+<Button variant="secondary">Secondary</Button>

package/src/shared/shadcn/button/examples/size.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  // @generated by ui-generator — do not edit
+
+  import ArrowUpRightIcon from "@lucide/svelte/icons/arrow-up-right";
+  import { Button } from "../index.js";
+</script>
+
+<div class="flex flex-col items-start gap-8 sm:flex-row">
+  <div class="flex items-start gap-2">
+    <Button size="sm" variant="outline">Small</Button>
+    <Button size="icon-sm" aria-label="Submit" variant="outline">
+      <ArrowUpRightIcon />
+    </Button>
+  </div>
+  <div class="flex items-start gap-2">
+    <Button variant="outline">Default</Button>
+    <Button size="icon" aria-label="Submit" variant="outline">
+      <ArrowUpRightIcon />
+    </Button>
+  </div>
+  <div class="flex items-start gap-2">
+    <Button variant="outline" size="lg">Large</Button>
+    <Button size="icon-lg" aria-label="Submit" variant="outline">
+      <ArrowUpRightIcon />
+    </Button>
+  </div>
+</div>

package/src/shared/shadcn/button/examples/spinner.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  // @generated by ui-generator — do not edit
+
+  import { Button } from "../index.js";
+  import { Spinner } from "../../spinner/index.js";
+</script>
+
+<Button size="sm" variant="outline" disabled>
+  <Spinner />
+  Submit
+</Button>

package/src/shared/shadcn/button/examples/with-icon.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  // @generated by ui-generator — do not edit
+
+  import IconGitBranch from "@lucide/svelte/icons/git-branch";
+  import { Button } from "../index.js";
+</script>
+
+<Button variant="outline" size="sm">
+  <IconGitBranch /> New Branch
+</Button>

package/src/shared/shadcn/button/index.ts

@@ -0,0 +1,22 @@
+import Root, {
+  type ButtonProps,
+  type ButtonSize,
+  type ButtonVariant,
+  buttonVariants,
+  BUTTON_VARIANTS,
+  BUTTON_SIZES,
+} from "./button.svelte";
+
+export {
+  Root,
+  type ButtonProps as Props,
+  Root as Button,
+  buttonVariants,
+  BUTTON_VARIANTS,
+  BUTTON_SIZES,
+  type ButtonProps,
+  type ButtonSize,
+  type ButtonVariant,
+};
+
+export { buttonTokenNames, type ButtonToken } from "./button.tokens.js";

package/src/shared/shadcn/button-group/button-group-separator.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import type { ComponentProps } from "svelte";
+  import { Separator } from "../separator/index.js";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    orientation = "vertical",
+    ...restProps
+  }: ComponentProps<typeof Separator> = $props();
+</script>
+
+<Separator
+  bind:ref
+  data-ui-part="button-group-separator"
+  data-slot="button-group-separator"
+  {orientation}
+  class={className}
+  {...restProps}
+/>

package/src/shared/shadcn/button-group/button-group-text.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import { type WithElementRef } from "../../../lib/utils.js";
+  import type { HTMLAttributes } from "svelte/elements";
+  import type { Snippet } from "svelte";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    child,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    child?: Snippet<[{ props: Record<string, unknown> }]>;
+  } = $props();
+
+  const mergedProps = $derived({
+    ...restProps,
+    class: className,
+    "data-ui-component": "button-group",
+    "data-ui-part": "button-group-text",
+    "data-slot": "button-group-text",
+  });
+</script>
+
+{#if child}
+  {@render child({ props: mergedProps })}
+{:else}
+  <div
+    data-ui-component="button-group"
+    data-ui-part="button-group-text"
+    bind:this={ref}
+    {...mergedProps}
+  >
+    {@render mergedProps.children?.()}
+  </div>
+{/if}

package/src/shared/shadcn/button-group/button-group.docs-body.md

@@ -0,0 +1,426 @@
+## Installation
+
+```bash
+pnpm ui:add button-group
+```
+
+## Usage
+
+```html
+<script lang="ts">
+  import * as ButtonGroup from "@lapismd/design-core/shadcn/button-group";
+</script>
+```
+
+```html
+<ButtonGroup.Root>
+  <button>Button 1</button>
+  <button>Button 2</button>
+</ButtonGroup.Root>
+```
+
+## Accessibility
+
+- The `ButtonGroup` component has the `role` attribute set to `group`.
+- Use `tabindex` to navigate between the buttons in the group.
+- Use `aria-label` or `aria-labelledby` to label the button group.
+
+```html
+<ButtonGroup aria-label="Button group">
+  <button>Button 1</button>
+  <button>Button 2</button>
+</ButtonGroup>
+```
+
+## ButtonGroup vs ToggleGroup
+
+- Use the `ButtonGroup` component when you want to group buttons that perform an action.
+- Use the `ToggleGroup` component when you want to group buttons that toggle a state.
+
+## Examples
+
+### Orientation
+
+Set the `orientation` prop to change the button group layout.
+
+```html
+<script lang="ts">
+  import Minus from "@lucide/svelte/icons/minus";
+  import Plus from "@lucide/svelte/icons/plus";
+  import { Button } from "@lapismd/design-core/shadcn/button";
+  import * as ButtonGroup from "@lapismd/design-core/shadcn/button-group";
+</script>
+
+<ButtonGroup.Root
+  orientation="vertical"
+  aria-label="Media controls"
+  class="h-fit"
+>
+  <button variant="outline" size="icon">
+    <Plus />
+  </button>
+  <button variant="outline" size="icon">
+    <Minus />
+  </button>
+</ButtonGroup.Root>
+```
+
+### Size
+
+Control the size of buttons using the `size` prop on individual buttons.
+
+```html
+<script lang="ts">
+  import Plus from "@lucide/svelte/icons/plus";
+  import { Button } from "@lapismd/design-core/shadcn/button";
+  import * as ButtonGroup from "@lapismd/design-core/shadcn/button-group";
+</script>
+
+<div class="flex flex-col items-start gap-8">
+  <ButtonGroup.Root>
+    <button variant="outline" size="sm">Small</button>
+    <button variant="outline" size="sm">Button</button>
+    <button variant="outline" size="sm">Group</button>
+    <button variant="outline" size="icon-sm">
+      <Plus />
+    </button>
+  </ButtonGroup.Root>
+  <ButtonGroup.Root>
+    <button variant="outline">Default</button>
+    <button variant="outline">Button</button>
+    <button variant="outline">Group</button>
+    <button variant="outline" size="icon">
+      <Plus />
+    </button>
+  </ButtonGroup.Root>
+  <ButtonGroup.Root>
+    <button variant="outline" size="lg">Large</button>
+    <button variant="outline" size="lg">Button</button>
+    <button variant="outline" size="lg">Group</button>
+    <button variant="outline" size="icon-lg">
+      <Plus />
+    </button>
+  </ButtonGroup.Root>
+</div>
+```
+
+### Nested
+
+Nest `ButtonGroup` components to create button groups with spacing.
+
+```html
+<script lang="ts">
+  import ArrowLeft from "@lucide/svelte/icons/arrow-left";
+  import ArrowRight from "@lucide/svelte/icons/arrow-right";
+  import { Button } from "@lapismd/design-core/shadcn/button";
+  import * as ButtonGroup from "@lapismd/design-core/shadcn/button-group";
+</script>
+
+<ButtonGroup.Root>
+  <ButtonGroup.Root>
+    <button variant="outline" size="sm">1</button>
+    <button variant="outline" size="sm">2</button>
+    <button variant="outline" size="sm">3</button>
+    <button variant="outline" size="sm">4</button>
+    <button variant="outline" size="sm">5</button>
+  </ButtonGroup.Root>
+  <ButtonGroup.Root>
+    <button variant="outline" size="icon-sm" aria-label="Previous">
+      <ArrowLeft />
+    </button>
+    <button variant="outline" size="icon-sm" aria-label="Next">
+      <ArrowRight />
+    </button>
+  </ButtonGroup.Root>
+</ButtonGroup.Root>
+```
+
+### Separator
+
+The `ButtonGroupSeparator` component visually divides buttons within a group.
+
+Buttons with variant `outline` do not need a separator since they have a border. For other variants, a separator is recommended to improve the visual hierarchy.
+
+```html
+<script lang="ts">
+  import { Button } from "@lapismd/design-core/shadcn/button";
+  import * as ButtonGroup from "@lapismd/design-core/shadcn/button-group";
+</script>
+
+<ButtonGroup.Root>
+  <button variant="secondary" size="sm">Copy</button>
+  <ButtonGroup.Separator />
+  <button variant="secondary" size="sm">Paste</button>
+</ButtonGroup.Root>
+```
+
+### Split
+
+Create a split button group by adding two buttons separated by a `ButtonGroupSeparator`.
+
+```html
+<script lang="ts">
+  import Plus from "@lucide/svelte/icons/plus";
+  import { Button } from "@lapismd/design-core/shadcn/button";
+  import * as ButtonGroup from "@lapismd/design-core/shadcn/button-group";
+</script>
+
+<ButtonGroup.Root>
+  <button variant="secondary">Button</button>
+  <ButtonGroup.Separator />
+  <button variant="secondary" size="icon">
+    <Plus />
+  </button>
+</ButtonGroup.Root>
+```
+
+### Input
+
+Wrap an `Input` component with buttons.
+
+```html
+<script lang="ts">
+  import Search from "@lucide/svelte/icons/search";
+  import { Button } from "@lapismd/design-core/shadcn/button";
+  import * as ButtonGroup from "@lapismd/design-core/shadcn/button-group";
+  import { Input } from "@lapismd/design-core/shadcn/input";
+</script>
+
+<ButtonGroup.Root>
+  <input placeholder="Search..." />
+  <button variant="outline" size="icon" aria-label="Search">
+    <search />
+  </button>
+</ButtonGroup.Root>
+```
+
+### Input Group
+
+Wrap an `InputGroup` component to create complex input layouts.
+
+```html
+<script lang="ts">
+  import AudioLines from "@lucide/svelte/icons/audio-lines";
+  import Plus from "@lucide/svelte/icons/plus";
+  import { Button } from "@lapismd/design-core/shadcn/button";
+  import * as ButtonGroup from "@lapismd/design-core/shadcn/button-group";
+  import * as InputGroup from "@lapismd/design-core/shadcn/input-group";
+  import * as Tooltip from "@lapismd/design-core/shadcn/tooltip";
+
+  let voiceEnabled = $state(false);
+</script>
+
+<Tooltip.Provider delayDuration={0}>
+<ButtonGroup.Root class="[--radius:9999rem]">
+  <ButtonGroup.Root>
+    <Button variant="outline" size="icon">
+      <Plus />
+    </Button>
+  </ButtonGroup.Root>
+  <ButtonGroup.Root class="flex-1">
+    <InputGroup.Root>
+      <InputGroup.Input
+        placeholder={voiceEnabled
+          ? "Record and send audio..."
+          : "Send a message..."}
+        disabled={voiceEnabled}
+      />
+      <InputGroup.Addon align="inline-end">
+        <Tooltip.Root>
+          <Tooltip.Trigger>
+            {#snippet child({ props })}
+              <InputGroup.Button
+                {...props}
+                onclick={() => (voiceEnabled = !voiceEnabled)}
+                size="icon-xs"
+                data-active={voiceEnabled}
+                class="data-[active=true]:bg-orange-100 data-[active=true]:text-orange-700 dark:data-[active=true]:bg-orange-800 dark:data-[active=true]:text-orange-100"
+                aria-pressed={voiceEnabled}
+              >
+                <AudioLines />
+              </InputGroup.Button>
+            {/snippet}
+          </Tooltip.Trigger>
+          <Tooltip.Content>Voice Mode</Tooltip.Content>
+        </Tooltip.Root>
+      </InputGroup.Addon>
+    </InputGroup.Root>
+  </ButtonGroup.Root>
+</ButtonGroup.Root>
+</Tooltip.Provider>
+```
+
+### Dropdown Menu
+
+Create a split button group with a `DropdownMenu` component.
+
+```html
+<script lang="ts">
+  import AlertTriangle from "@lucide/svelte/icons/alert-triangle";
+  import ChevronDown from "@lucide/svelte/icons/chevron-down";
+  import CopyIcon from "@lucide/svelte/icons/copy";
+  import CheckIcon from "@lucide/svelte/icons/check";
+  import Share from "@lucide/svelte/icons/share";
+  import Trash from "@lucide/svelte/icons/trash";
+  import UserRoundX from "@lucide/svelte/icons/user-round-x";
+  import VolumeOff from "@lucide/svelte/icons/volume-off";
+  import { Button } from "@lapismd/design-core/shadcn/button";
+  import * as ButtonGroup from "@lapismd/design-core/shadcn/button-group";
+  import * as DropdownMenu from "@lapismd/design-core/shadcn/dropdown-menu";
+</script>
+
+<ButtonGroup.Root>
+  <button variant="outline">Follow</button>
+  <DropdownMenu.Root>
+    <DropdownMenu.Trigger>
+      {#snippet child({ props })}
+      <button {...props} variant="outline" class="!ps-2">
+        <ChevronDown />
+      </button>
+      {/snippet}
+    </DropdownMenu.Trigger>
+    <DropdownMenu.Content align="end" class="[--radius:1rem]">
+      <DropdownMenu.Group>
+        <DropdownMenu.Item>
+          <VolumeOff />
+          Mute Conversation
+        </DropdownMenu.Item>
+        <DropdownMenu.Item>
+          <CheckIcon />
+          Mark as Read
+        </DropdownMenu.Item>
+        <DropdownMenu.Item>
+          <AlertTriangle />
+          Report Conversation
+        </DropdownMenu.Item>
+        <DropdownMenu.Item>
+          <UserRoundX />
+          Block User
+        </DropdownMenu.Item>
+        <DropdownMenu.Item>
+          <Share />
+          Share Conversation
+        </DropdownMenu.Item>
+        <DropdownMenu.Item>
+          <CopyIcon />
+          Copy Conversation
+        </DropdownMenu.Item>
+      </DropdownMenu.Group>
+      <DropdownMenu.Separator />
+      <DropdownMenu.Group>
+        <DropdownMenu.Item variant="destructive">
+          <Trash />
+          Delete Conversation
+        </DropdownMenu.Item>
+      </DropdownMenu.Group>
+    </DropdownMenu.Content>
+  </DropdownMenu.Root>
+</ButtonGroup.Root>
+```
+
+### Select
+
+Pair with a `Select` component.
+
+```html
+<script lang="ts">
+  import ArrowRight from "@lucide/svelte/icons/arrow-right";
+  import { Button } from "@lapismd/design-core/shadcn/button";
+  import * as ButtonGroup from "@lapismd/design-core/shadcn/button-group";
+  import { Input } from "@lapismd/design-core/shadcn/input";
+  import * as Select from "@lapismd/design-core/shadcn/select";
+
+  const CURRENCIES = [
+    {
+      value: "$",
+      label: "US Dollar",
+    },
+    {
+      value: "€",
+      label: "Euro",
+    },
+    {
+      value: "£",
+      label: "British Pound",
+    },
+  ];
+
+  let currency = $state("$");
+</script>
+
+<ButtonGroup.Root>
+  <ButtonGroup.Root>
+    <Select.Root type="single" bind:value="{currency}">
+      <Select.Trigger class="font-mono"> {currency} </Select.Trigger>
+      <Select.Content class="min-w-24">
+        {#each CURRENCIES as currencyOption (currencyOption.value)}
+        <Select.Item value="{currencyOption.value}">
+          {currencyOption.value}
+          <span class="text-muted-foreground">{currencyOption.label}</span>
+        </Select.Item>
+        {/each}
+      </Select.Content>
+    </Select.Root>
+    <input placeholder="10.00" pattern="[0-9]*" />
+  </ButtonGroup.Root>
+  <ButtonGroup.Root>
+    <button aria-label="Send" size="icon" variant="outline">
+      <ArrowRight />
+    </button>
+  </ButtonGroup.Root>
+</ButtonGroup.Root>
+```
+
+### Popover
+
+Use with a `Popover` component.
+
+```html
+<script lang="ts">
+  import Bot from "@lucide/svelte/icons/bot";
+  import ChevronDown from "@lucide/svelte/icons/chevron-down";
+  import { Button } from "@lapismd/design-core/shadcn/button";
+  import * as ButtonGroup from "@lapismd/design-core/shadcn/button-group";
+  import * as Popover from "@lapismd/design-core/shadcn/popover";
+  import { Separator } from "@lapismd/design-core/shadcn/separator";
+  import { Textarea } from "@lapismd/design-core/shadcn/textarea";
+</script>
+
+<ButtonGroup.Root>
+  <button variant="outline" size="sm">
+    <Bot />
+    Copilot
+  </button>
+  <Popover.Root>
+    <Popover.Trigger>
+      {#snippet child({ props })}
+      <button
+        {...props}
+        variant="outline"
+        size="icon-sm"
+        aria-label="Open Popover"
+      >
+        <ChevronDown />
+      </button>
+      {/snippet}
+    </Popover.Trigger>
+    <Popover.Content align="end" class="rounded-xl p-0 text-sm">
+      <div class="px-4 py-3">
+        <div class="text-sm font-medium">Agent Tasks</div>
+      </div>
+      <Separator />
+      <div class="p-4 text-sm *:[p:not(:last-child)]:mb-2">
+        <textarea
+          placeholder="Describe your task in natural language."
+          class="mb-4 resize-none"
+        />
+        <p class="font-medium">Start a new task with Copilot</p>
+        <p class="text-muted-foreground">
+          Describe your task in natural language. Copilot will work in the
+          background and open a pull request for your review.
+        </p>
+      </div>
+    </Popover.Content>
+  </Popover.Root>
+</ButtonGroup.Root>
+```