@lapismd/design-core 0.1.0

package/src/shared/shadcn/toggle-group/toggle-group-item.svelte

@@ -0,0 +1,164 @@
+<script lang="ts">
+  import { ToggleGroup as ToggleGroupPrimitive } from "bits-ui";
+  import { getToggleGroupCtx } from "./toggle-group.svelte";
+  import { type ToggleVariants } from "../toggle/index.js";
+
+  let {
+    ref = $bindable(null),
+    value = $bindable(),
+    class: className,
+    size,
+    variant,
+    ...restProps
+  }: ToggleGroupPrimitive.ItemProps & ToggleVariants = $props();
+
+  const ctx = getToggleGroupCtx();
+</script>
+
+<ToggleGroupPrimitive.Item
+  bind:ref
+  data-ui-component="toggle-group"
+  data-ui-part="toggle-group-item"
+  data-slot="toggle-group-item"
+  data-variant={ctx.variant || variant}
+  data-size={ctx.size || size}
+  data-spacing={ctx.spacing}
+  class={className}
+  {value}
+  {...restProps}
+/>
+
+<style>
+  /* Item chrome mirrors Toggle — conversion only extracted group layout rules. */
+  :global {
+    [data-ui-component="toggle-group"][data-ui-part="toggle-group-item"] {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: var(--spacing);
+      border-radius: calc(var(--radius) * 0.8);
+      background-color: transparent;
+      font-size: var(--text-sm);
+      line-height: var(--tw-leading, var(--text-sm--line-height));
+      font-weight: var(--font-weight-medium);
+      white-space: nowrap;
+      transition-property: color, box-shadow, background-color;
+      transition-timing-function: var(
+        --tw-ease,
+        var(--default-transition-timing-function)
+      );
+      transition-duration: var(
+        --tw-duration,
+        var(--default-transition-duration)
+      );
+      outline-style: none;
+    }
+
+    [data-ui-component="toggle-group"][data-ui-part="toggle-group-item"][data-size="sm"] {
+      height: calc(var(--spacing) * 8);
+      min-width: calc(var(--spacing) * 8);
+      padding-inline: calc(var(--spacing) * 2.5);
+    }
+
+    [data-ui-component="toggle-group"][data-ui-part="toggle-group-item"][data-size="default"],
+    [data-ui-component="toggle-group"][data-ui-part="toggle-group-item"]:not(
+        [data-size]
+      ) {
+      height: calc(var(--spacing) * 9);
+      min-width: calc(var(--spacing) * 9);
+      padding-inline: calc(var(--spacing) * 2.5);
+    }
+
+    [data-ui-component="toggle-group"][data-ui-part="toggle-group-item"][data-size="lg"] {
+      height: calc(var(--spacing) * 10);
+      min-width: calc(var(--spacing) * 10);
+      padding-inline: calc(var(--spacing) * 2.5);
+    }
+
+    [data-ui-component="toggle-group"][data-ui-part="toggle-group-item"][data-variant="outline"] {
+      border-style: var(--tw-border-style, solid);
+      border-width: 1px;
+      border-color: var(--input);
+      box-shadow:
+        var(--tw-inset-shadow, 0 0 #0000),
+        var(--tw-inset-ring-shadow, 0 0 #0000),
+        var(--tw-ring-offset-shadow, 0 0 #0000),
+        var(--tw-ring-shadow, 0 0 #0000),
+        0 1px 2px 0 var(--tw-shadow-color, #0000000d);
+    }
+
+    /* Joined outline group when spacing is 0 (default upstream look). */
+    [data-ui-component="toggle-group"][data-ui-part="toggle-group"][data-spacing="0"][data-variant="outline"] {
+      box-shadow:
+        var(--tw-inset-shadow, 0 0 #0000),
+        var(--tw-inset-ring-shadow, 0 0 #0000),
+        var(--tw-ring-offset-shadow, 0 0 #0000),
+        var(--tw-ring-shadow, 0 0 #0000),
+        0 1px 2px 0 var(--tw-shadow-color, #0000000d);
+    }
+
+    [data-ui-component="toggle-group"][data-ui-part="toggle-group"][data-spacing="0"]
+      > [data-ui-part="toggle-group-item"] {
+      border-radius: 0;
+      box-shadow: none;
+    }
+
+    [data-ui-component="toggle-group"][data-ui-part="toggle-group"][data-spacing="0"][data-orientation="horizontal"]
+      > [data-ui-part="toggle-group-item"][data-variant="outline"] {
+      border-left-width: 0;
+    }
+
+    [data-ui-component="toggle-group"][data-ui-part="toggle-group"][data-spacing="0"][data-orientation="horizontal"]
+      > [data-ui-part="toggle-group-item"][data-variant="outline"]:first-child {
+      border-left-width: 1px;
+      border-top-left-radius: calc(var(--radius) * 0.8);
+      border-bottom-left-radius: calc(var(--radius) * 0.8);
+    }
+
+    [data-ui-component="toggle-group"][data-ui-part="toggle-group"][data-spacing="0"][data-orientation="horizontal"]
+      > [data-ui-part="toggle-group-item"]:last-child {
+      border-top-right-radius: calc(var(--radius) * 0.8);
+      border-bottom-right-radius: calc(var(--radius) * 0.8);
+    }
+
+    @media (hover: hover) {
+      [data-ui-component="toggle-group"][data-ui-part="toggle-group-item"]:hover,
+      [data-ui-component="toggle-group"][data-ui-part="toggle-group-item"][data-variant="outline"]:hover {
+        background-color: var(--muted);
+        color: var(--foreground);
+      }
+    }
+
+    [data-ui-component="toggle-group"][data-ui-part="toggle-group-item"]:focus-visible {
+      border-color: var(--ui-toggle-group-focus-ring-color, var(--ring));
+      --tw-ring-color: var(--ui-toggle-group-focus-ring-color, var(--ring));
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0
+        calc(3px + var(--tw-ring-offset-width, 0px))
+        var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow, 0 0 #0000),
+        var(--tw-inset-ring-shadow, 0 0 #0000),
+        var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow),
+        var(--tw-shadow, 0 0 #0000);
+    }
+
+    [data-ui-component="toggle-group"][data-ui-part="toggle-group-item"]:disabled {
+      pointer-events: none;
+      opacity: 0.5;
+    }
+
+    [data-ui-component="toggle-group"][data-ui-part="toggle-group-item"][data-state="on"] {
+      background-color: var(--muted);
+    }
+
+    [data-ui-component="toggle-group"][data-ui-part="toggle-group-item"] svg {
+      pointer-events: none;
+      flex-shrink: 0;
+    }
+
+    [data-ui-component="toggle-group"][data-ui-part="toggle-group-item"]
+      svg:not([class*="size-"]) {
+      width: calc(var(--spacing) * 4);
+      height: calc(var(--spacing) * 4);
+    }
+  }
+</style>

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

@@ -0,0 +1,178 @@
+## Installation
+
+```bash
+pnpm ui:add toggle-group
+```
+
+## Usage
+
+```html
+<script lang="ts">
+  import * as ToggleGroup from "@lapismd/design-core/shadcn/toggle-group";
+</script>
+```
+
+```html
+<ToggleGroup.Root type="single">
+  <ToggleGroup.Item value="a">A</ToggleGroup.Item>
+  <ToggleGroup.Item value="b">B</ToggleGroup.Item>
+  <ToggleGroup.Item value="c">C</ToggleGroup.Item>
+</ToggleGroup.Root>
+```
+
+## Examples
+
+### Outline
+
+```html
+<script lang="ts">
+  import BoldIcon from "@lucide/svelte/icons/bold";
+  import ItalicIcon from "@lucide/svelte/icons/italic";
+  import UnderlineIcon from "@lucide/svelte/icons/underline";
+  import * as ToggleGroup from "@lapismd/design-core/shadcn/toggle-group";
+</script>
+
+<ToggleGroup.Root variant="outline" type="multiple">
+  <ToggleGroup.Item value="bold" aria-label="Toggle bold">
+    <BoldIcon class="size-4" />
+  </ToggleGroup.Item>
+  <ToggleGroup.Item value="italic" aria-label="Toggle italic">
+    <ItalicIcon class="size-4" />
+  </ToggleGroup.Item>
+  <ToggleGroup.Item value="strikethrough" aria-label="Toggle strikethrough">
+    <UnderlineIcon class="size-4" />
+  </ToggleGroup.Item>
+</ToggleGroup.Root>
+```
+
+### Single
+
+```html
+<script lang="ts">
+  import BoldIcon from "@lucide/svelte/icons/bold";
+  import ItalicIcon from "@lucide/svelte/icons/italic";
+  import UnderlineIcon from "@lucide/svelte/icons/underline";
+  import * as ToggleGroup from "@lapismd/design-core/shadcn/toggle-group";
+</script>
+
+<ToggleGroup.Root type="single">
+  <ToggleGroup.Item value="bold" aria-label="Toggle bold">
+    <BoldIcon class="size-4" />
+  </ToggleGroup.Item>
+  <ToggleGroup.Item value="italic" aria-label="Toggle italic">
+    <ItalicIcon class="size-4" />
+  </ToggleGroup.Item>
+  <ToggleGroup.Item value="strikethrough" aria-label="Toggle strikethrough">
+    <UnderlineIcon class="size-4" />
+  </ToggleGroup.Item>
+</ToggleGroup.Root>
+```
+
+### Small
+
+```html
+<script lang="ts">
+  import BoldIcon from "@lucide/svelte/icons/bold";
+  import ItalicIcon from "@lucide/svelte/icons/italic";
+  import UnderlineIcon from "@lucide/svelte/icons/underline";
+  import * as ToggleGroup from "@lapismd/design-core/shadcn/toggle-group";
+</script>
+
+<ToggleGroup.Root size="sm" type="single">
+  <ToggleGroup.Item value="bold" aria-label="Toggle bold">
+    <BoldIcon class="size-4" />
+  </ToggleGroup.Item>
+  <ToggleGroup.Item value="italic" aria-label="Toggle italic">
+    <ItalicIcon class="size-4" />
+  </ToggleGroup.Item>
+  <ToggleGroup.Item value="strikethrough" aria-label="Toggle strikethrough">
+    <UnderlineIcon class="size-4" />
+  </ToggleGroup.Item>
+</ToggleGroup.Root>
+```
+
+### Large
+
+```html
+<script lang="ts">
+  import BoldIcon from "@lucide/svelte/icons/bold";
+  import ItalicIcon from "@lucide/svelte/icons/italic";
+  import UnderlineIcon from "@lucide/svelte/icons/underline";
+  import * as ToggleGroup from "@lapismd/design-core/shadcn/toggle-group";
+</script>
+
+<ToggleGroup.Root size="lg" type="multiple">
+  <ToggleGroup.Item value="bold" aria-label="Toggle bold">
+    <BoldIcon class="size-4" />
+  </ToggleGroup.Item>
+  <ToggleGroup.Item value="italic" aria-label="Toggle italic">
+    <ItalicIcon class="size-4" />
+  </ToggleGroup.Item>
+  <ToggleGroup.Item value="strikethrough" aria-label="Toggle strikethrough">
+    <UnderlineIcon class="size-4" />
+  </ToggleGroup.Item>
+</ToggleGroup.Root>
+```
+
+### Disabled
+
+```html
+<script lang="ts">
+  import BoldIcon from "@lucide/svelte/icons/bold";
+  import ItalicIcon from "@lucide/svelte/icons/italic";
+  import UnderlineIcon from "@lucide/svelte/icons/underline";
+  import * as ToggleGroup from "@lapismd/design-core/shadcn/toggle-group";
+</script>
+
+<ToggleGroup.Root disabled type="single">
+  <ToggleGroup.Item value="bold" aria-label="Toggle bold">
+    <BoldIcon class="size-4" />
+  </ToggleGroup.Item>
+  <ToggleGroup.Item value="italic" aria-label="Toggle italic">
+    <ItalicIcon class="size-4" />
+  </ToggleGroup.Item>
+  <ToggleGroup.Item value="strikethrough" aria-label="Toggle strikethrough">
+    <UnderlineIcon class="size-4" />
+  </ToggleGroup.Item>
+</ToggleGroup.Root>
+```
+
+### Spacing
+
+Use `spacing={2}` to add spacing between toggle group items.
+
+```html
+<script lang="ts">
+  import * as ToggleGroup from "@lapismd/design-core/shadcn/toggle-group";
+  import BookmarkIcon from "@lucide/svelte/icons/bookmark";
+  import HeartIcon from "@lucide/svelte/icons/heart";
+  import StarIcon from "@lucide/svelte/icons/star";
+</script>
+
+<ToggleGroup.Root type="multiple" variant="outline" spacing="{2}" size="sm">
+  <ToggleGroup.Item
+    value="star"
+    aria-label="Toggle star"
+    class="data-[state=on]:bg-transparent data-[state=on]:*:[svg]:fill-yellow-500 data-[state=on]:*:[svg]:stroke-yellow-500"
+  >
+    <StarIcon />
+    Star
+  </ToggleGroup.Item>
+  <ToggleGroup.Item
+    value="heart"
+    aria-label="Toggle heart"
+    class="data-[state=on]:bg-transparent data-[state=on]:*:[svg]:fill-red-500 data-[state=on]:*:[svg]:stroke-red-500"
+  >
+    <HeartIcon />
+    Heart
+  </ToggleGroup.Item>
+  <ToggleGroup.Item
+    value="bookmark"
+    aria-label="Toggle bookmark"
+    class="data-[state=on]:bg-transparent data-[state=on]:*:[svg]:fill-blue-500 data-[state=on]:*:[svg]:stroke-blue-500"
+  >
+    <BookmarkIcon />
+    Bookmark
+  </ToggleGroup.Item>
+</ToggleGroup.Root>
+```

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

@@ -0,0 +1,184 @@
+<!-- Adapted from https://github.com/huntabyte/shadcn-svelte/blob/bf4f461d88526359d0e96e1950f637912bbeebe7/docs/content/components/toggle-group.md for the @lapismd/design-core native-CSS catalog. -->
+
+# Toggle Group
+
+A set of two-state buttons that can be toggled on or off.
+
+## Installation
+
+```bash
+pnpm ui:add toggle-group
+```
+
+## Usage
+
+```html
+<script lang="ts">
+  import * as ToggleGroup from "@lapismd/design-core/shadcn/toggle-group";
+</script>
+```
+
+```html
+<ToggleGroup.Root type="single">
+  <ToggleGroup.Item value="a">A</ToggleGroup.Item>
+  <ToggleGroup.Item value="b">B</ToggleGroup.Item>
+  <ToggleGroup.Item value="c">C</ToggleGroup.Item>
+</ToggleGroup.Root>
+```
+
+## Examples
+
+### Outline
+
+```html
+<script lang="ts">
+  import BoldIcon from "@lucide/svelte/icons/bold";
+  import ItalicIcon from "@lucide/svelte/icons/italic";
+  import UnderlineIcon from "@lucide/svelte/icons/underline";
+  import * as ToggleGroup from "@lapismd/design-core/shadcn/toggle-group";
+</script>
+
+<ToggleGroup.Root variant="outline" type="multiple">
+  <ToggleGroup.Item value="bold" aria-label="Toggle bold">
+    <BoldIcon class="size-4" />
+  </ToggleGroup.Item>
+  <ToggleGroup.Item value="italic" aria-label="Toggle italic">
+    <ItalicIcon class="size-4" />
+  </ToggleGroup.Item>
+  <ToggleGroup.Item value="strikethrough" aria-label="Toggle strikethrough">
+    <UnderlineIcon class="size-4" />
+  </ToggleGroup.Item>
+</ToggleGroup.Root>
+```
+
+### Single
+
+```html
+<script lang="ts">
+  import BoldIcon from "@lucide/svelte/icons/bold";
+  import ItalicIcon from "@lucide/svelte/icons/italic";
+  import UnderlineIcon from "@lucide/svelte/icons/underline";
+  import * as ToggleGroup from "@lapismd/design-core/shadcn/toggle-group";
+</script>
+
+<ToggleGroup.Root type="single">
+  <ToggleGroup.Item value="bold" aria-label="Toggle bold">
+    <BoldIcon class="size-4" />
+  </ToggleGroup.Item>
+  <ToggleGroup.Item value="italic" aria-label="Toggle italic">
+    <ItalicIcon class="size-4" />
+  </ToggleGroup.Item>
+  <ToggleGroup.Item value="strikethrough" aria-label="Toggle strikethrough">
+    <UnderlineIcon class="size-4" />
+  </ToggleGroup.Item>
+</ToggleGroup.Root>
+```
+
+### Small
+
+```html
+<script lang="ts">
+  import BoldIcon from "@lucide/svelte/icons/bold";
+  import ItalicIcon from "@lucide/svelte/icons/italic";
+  import UnderlineIcon from "@lucide/svelte/icons/underline";
+  import * as ToggleGroup from "@lapismd/design-core/shadcn/toggle-group";
+</script>
+
+<ToggleGroup.Root size="sm" type="single">
+  <ToggleGroup.Item value="bold" aria-label="Toggle bold">
+    <BoldIcon class="size-4" />
+  </ToggleGroup.Item>
+  <ToggleGroup.Item value="italic" aria-label="Toggle italic">
+    <ItalicIcon class="size-4" />
+  </ToggleGroup.Item>
+  <ToggleGroup.Item value="strikethrough" aria-label="Toggle strikethrough">
+    <UnderlineIcon class="size-4" />
+  </ToggleGroup.Item>
+</ToggleGroup.Root>
+```
+
+### Large
+
+```html
+<script lang="ts">
+  import BoldIcon from "@lucide/svelte/icons/bold";
+  import ItalicIcon from "@lucide/svelte/icons/italic";
+  import UnderlineIcon from "@lucide/svelte/icons/underline";
+  import * as ToggleGroup from "@lapismd/design-core/shadcn/toggle-group";
+</script>
+
+<ToggleGroup.Root size="lg" type="multiple">
+  <ToggleGroup.Item value="bold" aria-label="Toggle bold">
+    <BoldIcon class="size-4" />
+  </ToggleGroup.Item>
+  <ToggleGroup.Item value="italic" aria-label="Toggle italic">
+    <ItalicIcon class="size-4" />
+  </ToggleGroup.Item>
+  <ToggleGroup.Item value="strikethrough" aria-label="Toggle strikethrough">
+    <UnderlineIcon class="size-4" />
+  </ToggleGroup.Item>
+</ToggleGroup.Root>
+```
+
+### Disabled
+
+```html
+<script lang="ts">
+  import BoldIcon from "@lucide/svelte/icons/bold";
+  import ItalicIcon from "@lucide/svelte/icons/italic";
+  import UnderlineIcon from "@lucide/svelte/icons/underline";
+  import * as ToggleGroup from "@lapismd/design-core/shadcn/toggle-group";
+</script>
+
+<ToggleGroup.Root disabled type="single">
+  <ToggleGroup.Item value="bold" aria-label="Toggle bold">
+    <BoldIcon class="size-4" />
+  </ToggleGroup.Item>
+  <ToggleGroup.Item value="italic" aria-label="Toggle italic">
+    <ItalicIcon class="size-4" />
+  </ToggleGroup.Item>
+  <ToggleGroup.Item value="strikethrough" aria-label="Toggle strikethrough">
+    <UnderlineIcon class="size-4" />
+  </ToggleGroup.Item>
+</ToggleGroup.Root>
+```
+
+### Spacing
+
+Use `spacing={2}` to add spacing between toggle group items.
+
+```html
+<script lang="ts">
+  import * as ToggleGroup from "@lapismd/design-core/shadcn/toggle-group";
+  import BookmarkIcon from "@lucide/svelte/icons/bookmark";
+  import HeartIcon from "@lucide/svelte/icons/heart";
+  import StarIcon from "@lucide/svelte/icons/star";
+</script>
+
+<ToggleGroup.Root type="multiple" variant="outline" spacing="{2}" size="sm">
+  <ToggleGroup.Item
+    value="star"
+    aria-label="Toggle star"
+    class="data-[state=on]:bg-transparent data-[state=on]:*:[svg]:fill-yellow-500 data-[state=on]:*:[svg]:stroke-yellow-500"
+  >
+    <StarIcon />
+    Star
+  </ToggleGroup.Item>
+  <ToggleGroup.Item
+    value="heart"
+    aria-label="Toggle heart"
+    class="data-[state=on]:bg-transparent data-[state=on]:*:[svg]:fill-red-500 data-[state=on]:*:[svg]:stroke-red-500"
+  >
+    <HeartIcon />
+    Heart
+  </ToggleGroup.Item>
+  <ToggleGroup.Item
+    value="bookmark"
+    aria-label="Toggle bookmark"
+    class="data-[state=on]:bg-transparent data-[state=on]:*:[svg]:fill-blue-500 data-[state=on]:*:[svg]:stroke-blue-500"
+  >
+    <BookmarkIcon />
+    Bookmark
+  </ToggleGroup.Item>
+</ToggleGroup.Root>
+```

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

@@ -0,0 +1,52 @@
+{
+  "schemaVersion": 1,
+  "component": "toggle-group",
+  "scope": "shared",
+  "upstream": {
+    "project": "shadcn-svelte",
+    "registry": "https://shadcn-svelte.com/registry",
+    "cliVersion": "1.4.2",
+    "item": "toggle-group",
+    "fetchedAt": "2026-07-19T16:37:05.818Z",
+    "sourceFiles": [
+      {
+        "path": "src/lib/components/ui/toggle-group/index.ts",
+        "sha256": "a21e3fda6b8242165a26b680ef36f47da12d5cdf9733c35c35ff14cd640f8718"
+      },
+      {
+        "path": "src/lib/components/ui/toggle-group/toggle-group-item.svelte",
+        "sha256": "d9c547c56500f99c0024e84ae0683681ba15724fbca512447750d22d22941dd0"
+      },
+      {
+        "path": "src/lib/components/ui/toggle-group/toggle-group.svelte",
+        "sha256": "47f1617e209d910fc547d81ad60049931efc1bd92f0cf12bd0adc03dea342d42"
+      }
+    ],
+    "docsUrl": "https://github.com/huntabyte/shadcn-svelte/blob/bf4f461d88526359d0e96e1950f637912bbeebe7/docs/content/components/toggle-group.md",
+    "docsFetchedAt": "2026-07-22T09:57:18.268Z",
+    "docsSha256": "9509e28900c11ce9d33fe30ac4a5d834b1d1059c539eb1b4fcfd3e52d602b855",
+    "examplesIncluded": [
+      "Spacing",
+      "Outline",
+      "Single",
+      "Small",
+      "Large",
+      "Disabled",
+      "Spacing"
+    ],
+    "examplesSkipped": [],
+    "docsCommit": "bf4f461d88526359d0e96e1950f637912bbeebe7",
+    "docsRef": "shadcn-svelte@1.4.2",
+    "docsVendorPath": "vendor/shadcn-svelte-docs"
+  },
+  "converter": {
+    "version": "2.0.0",
+    "irSchemaVersion": 1,
+    "tokenSchemaVersion": 2
+  },
+  "recipe": {
+    "name": "toggle-group",
+    "version": 1,
+    "tier": "lightCompound"
+  }
+}