@lapismd/design-core 0.1.0

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

@@ -0,0 +1,432 @@
+<!-- Adapted from https://github.com/huntabyte/shadcn-svelte/blob/bf4f461d88526359d0e96e1950f637912bbeebe7/docs/content/components/button-group.md for the @lapismd/design-core native-CSS catalog. -->
+
+# Button Group
+
+A container that groups related buttons together with consistent styling.
+
+## 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>
+```

package/src/shared/shadcn/button-group/button-group.provenance.json

@@ -0,0 +1,60 @@
+{
+  "schemaVersion": 1,
+  "component": "button-group",
+  "scope": "shared",
+  "upstream": {
+    "project": "shadcn-svelte",
+    "registry": "https://shadcn-svelte.com/registry",
+    "cliVersion": "1.4.2",
+    "item": "button-group",
+    "fetchedAt": "2026-07-23T17:57:23.475Z",
+    "sourceFiles": [
+      {
+        "path": "src/lib/components/ui/button-group/button-group-separator.svelte",
+        "sha256": "899e1e8fb9b4b95da2c6772189747bfe20df6e2eb4fce2144d94c15481764eec"
+      },
+      {
+        "path": "src/lib/components/ui/button-group/button-group-text.svelte",
+        "sha256": "3d49b288e1df6075785620f72aa7d5a76420403bd77edd5226825b2c012a6d17"
+      },
+      {
+        "path": "src/lib/components/ui/button-group/button-group.svelte",
+        "sha256": "362d71ed14b865bc8510e7b15ff53aff996bf40775812dd9d931fbd977ae7934"
+      },
+      {
+        "path": "src/lib/components/ui/button-group/index.ts",
+        "sha256": "17f980162e046ccc19d4804aec14a7c29370eb50ab40ce78a954c0d37c7b66d3"
+      }
+    ],
+    "docsUrl": "https://github.com/huntabyte/shadcn-svelte/blob/bf4f461d88526359d0e96e1950f637912bbeebe7/docs/content/components/button-group.md",
+    "docsFetchedAt": "2026-07-23T17:57:23.485Z",
+    "docsSha256": "cc0c0fbda17fefa06285a2a0d2db856dd01175f24364dbda87e478ef5ae089f9",
+    "docsCommit": "bf4f461d88526359d0e96e1950f637912bbeebe7",
+    "docsRef": "shadcn-svelte@1.4.2",
+    "docsVendorPath": "vendor/shadcn-svelte-docs",
+    "examplesIncluded": [
+      "Preview",
+      "Orientation",
+      "Size",
+      "Nested",
+      "Separator",
+      "Split",
+      "Input",
+      "Input Group",
+      "Dropdown Menu",
+      "Select",
+      "Popover"
+    ],
+    "examplesSkipped": []
+  },
+  "converter": {
+    "version": "2.0.0",
+    "irSchemaVersion": 1,
+    "tokenSchemaVersion": 2
+  },
+  "recipe": {
+    "name": "button-group",
+    "version": 1,
+    "tier": "lightCompound"
+  }
+}