@lapismd/design-core 0.1.0

package/src/shared/shadcn/drawer/drawer.docs.md

@@ -0,0 +1,98 @@
+<!-- Adapted from https://github.com/huntabyte/shadcn-svelte/blob/bf4f461d88526359d0e96e1950f637912bbeebe7/docs/content/components/drawer.md for the @lapismd/design-core native-CSS catalog. -->
+
+# Drawer
+
+A drawer component for Svelte.
+
+## About
+
+Drawer is built on top of [Vaul Svelte](https://vaul-svelte.com), which is a Svelte port of [Vaul](https://vaul.emilkowal.ski) by [Emil Kowalski](https://twitter.com/emilkowalski_).
+
+## Installation
+
+```bash
+pnpm ui:add drawer
+```
+
+## Usage
+
+```html
+<script lang="ts">
+  import * as Drawer from "@lapismd/design-core/shadcn/drawer";
+</script>
+```
+
+```html
+<Drawer.Root>
+  <Drawer.Trigger>Open</Drawer.Trigger>
+  <Drawer.Content>
+    <Drawer.Header>
+      <Drawer.Title>Are you sure absolutely sure?</Drawer.Title>
+      <Drawer.Description>This action cannot be undone.</Drawer.Description>
+    </Drawer.Header>
+    <Drawer.Footer>
+      <button>Submit</button>
+      <Drawer.Close>Cancel</Drawer.Close>
+    </Drawer.Footer>
+  </Drawer.Content>
+</Drawer.Root>
+```
+
+## Examples
+
+### Sides
+
+Use the `direction` prop to set the side of the drawer. Available options are `top`, `right`, `bottom`, and `left`.
+
+```html
+<script lang="ts">
+  import * as Drawer from "@lapismd/design-core/shadcn/drawer";
+  import { Button, buttonVariants } from "@lapismd/design-core/shadcn/button";
+  import { cn } from "../../../../lib/utils.js";
+
+  const DRAWER_SIDES = ["top", "right", "bottom", "left"] as const;
+</script>
+
+<div class="flex flex-wrap gap-2">
+  {#each DRAWER_SIDES as side (side)}
+    <Drawer.Root direction={side === "bottom" ? undefined : side}>
+      <Drawer.Trigger
+        class={cn(buttonVariants({ variant: "outline" }), "capitalize")}
+      >
+        {side}
+      </Drawer.Trigger>
+      <Drawer.Content
+        class="data-[vaul-drawer-direction=bottom]:max-h-[50vh] data-[vaul-drawer-direction=top]:max-h-[50vh]"
+      >
+        <Drawer.Header>
+          <Drawer.Title>Move Goal</Drawer.Title>
+          <Drawer.Description>Set your daily activity goal.</Drawer.Description>
+        </Drawer.Header>
+        <div class="no-scrollbar overflow-y-auto px-4">
+          {#each Array.from({ length: 10 }) as _, i (i)}
+            <p class="mb-4 leading-normal">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+              enim ad minim veniam, quis nostrud exercitation ullamco laboris
+              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+              reprehenderit in voluptate velit esse cillum dolore eu fugiat
+              nulla pariatur. Excepteur sint occaecat cupidatat non proident,
+              sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+          {/each}
+        </div>
+        <Drawer.Footer>
+          <Button>Submit</Button>
+          <Drawer.Close class={buttonVariants({ variant: "outline" })}>
+            Cancel
+          </Drawer.Close>
+        </Drawer.Footer>
+      </Drawer.Content>
+    </Drawer.Root>
+  {/each}
+</div>
+```
+
+### Responsive Dialog
+
+You can combine the `Dialog` and `Drawer` components to create a responsive dialog. This renders a `Dialog` on desktop and a `Drawer` on mobile.

package/src/shared/shadcn/drawer/drawer.provenance.json

@@ -0,0 +1,86 @@
+{
+  "schemaVersion": 1,
+  "component": "drawer",
+  "scope": "shared",
+  "upstream": {
+    "project": "shadcn-svelte",
+    "registry": "https://shadcn-svelte.com/registry",
+    "cliVersion": "1.4.2",
+    "item": "drawer",
+    "fetchedAt": "2026-08-06T21:55:40.869Z",
+    "sourceFiles": [
+      {
+        "path": "src/lib/components/ui/drawer/drawer-close.svelte",
+        "sha256": "2c791c60b4655e75868177d84ec3041ab9cea7d27d6b643008fd791f09f36db3"
+      },
+      {
+        "path": "src/lib/components/ui/drawer/drawer-content.svelte",
+        "sha256": "5f6a8bba35d913b31b9805d681753995a201ec2d20734f336e27e071de67005b"
+      },
+      {
+        "path": "src/lib/components/ui/drawer/drawer-description.svelte",
+        "sha256": "c708ad91ef30e89681b010ae989af5c97dea2ffd62899252e48052f6ebb0fa15"
+      },
+      {
+        "path": "src/lib/components/ui/drawer/drawer-footer.svelte",
+        "sha256": "0391d749272cf4409e7afc84111b21e5b024f40979ba951d88d0ea70423914c1"
+      },
+      {
+        "path": "src/lib/components/ui/drawer/drawer-header.svelte",
+        "sha256": "e83aa3379fea00c02794e0042a17f4753fd3cfe2673c52f874b5e98b3bb7c70a"
+      },
+      {
+        "path": "src/lib/components/ui/drawer/drawer-nested.svelte",
+        "sha256": "cdda5309195d2a31f9cc475fb0afd56e0284166d2ca2deeac049194a427387a8"
+      },
+      {
+        "path": "src/lib/components/ui/drawer/drawer-overlay.svelte",
+        "sha256": "1d86f475b6193da92ad5cb21d5df9d2a8ff9a8a0a99ca24e4740fc82fd9f5e28"
+      },
+      {
+        "path": "src/lib/components/ui/drawer/drawer-portal.svelte",
+        "sha256": "3d4d91d0253ae11043145b8d32e6c4cb523ebb024f40016225a1f3da12b61610"
+      },
+      {
+        "path": "src/lib/components/ui/drawer/drawer-title.svelte",
+        "sha256": "c2bc87bad3549894d5f481743c0b4bcc46f11fa21c6797a363fefe7ae543e43b"
+      },
+      {
+        "path": "src/lib/components/ui/drawer/drawer-trigger.svelte",
+        "sha256": "09077b24733d00adaed1f56c2769b5723f06058f83ba8b1159df12bbbffafcb7"
+      },
+      {
+        "path": "src/lib/components/ui/drawer/drawer.svelte",
+        "sha256": "caa374b5e5dc45a0a9f6e7b7b1023610a211f8f62296a044c408c9d54927c8ef"
+      },
+      {
+        "path": "src/lib/components/ui/drawer/index.ts",
+        "sha256": "ea52ceda738a11c1f3b047bdcf2d4e1b96cc52fdbdfdff9eac71956611c07c35"
+      }
+    ],
+    "docsUrl": "https://github.com/huntabyte/shadcn-svelte/blob/bf4f461d88526359d0e96e1950f637912bbeebe7/docs/content/components/drawer.md",
+    "docsFetchedAt": "2026-08-06T21:55:40.889Z",
+    "docsSha256": "6ffbfff7b8a5ae973592b7384510af0fb84c65b608c8fc33e60d4bad23a3b3c8",
+    "docsCommit": "bf4f461d88526359d0e96e1950f637912bbeebe7",
+    "docsRef": "shadcn-svelte@1.4.2",
+    "docsVendorPath": "vendor/shadcn-svelte-docs",
+    "examplesIncluded": ["Preview", "Sides"],
+    "examplesSkipped": [
+      {
+        "name": "Responsive Dialog",
+        "reason": "unsupported-hook",
+        "detail": "Example contains a bare bind: that is not valid Svelte"
+      }
+    ]
+  },
+  "converter": {
+    "version": "2.0.0",
+    "irSchemaVersion": 1,
+    "tokenSchemaVersion": 2
+  },
+  "recipe": {
+    "name": "drawer",
+    "version": 1,
+    "tier": "portal"
+  }
+}

package/src/shared/shadcn/drawer/drawer.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { Drawer as DrawerPrimitive } from "vaul-svelte";
+
+  let {
+    shouldScaleBackground = true,
+    open = $bindable(false),
+    activeSnapPoint = $bindable(null),
+    ...restProps
+  }: DrawerPrimitive.RootProps = $props();
+</script>
+
+<DrawerPrimitive.Root
+  {shouldScaleBackground}
+  bind:open
+  bind:activeSnapPoint
+  {...restProps}
+/>

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

@@ -0,0 +1,7 @@
+:root {
+  --ui-drawer-background: var(--popover);
+  --ui-drawer-foreground: var(--popover-foreground);
+  --ui-drawer-border-color: var(--border);
+  --ui-drawer-radius: calc(var(--radius) * 0.8);
+  --ui-drawer-focus-ring-color: var(--ring);
+}

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

@@ -0,0 +1,10 @@
+export const drawerTokenNames = {
+  background: "--ui-drawer-background",
+  foreground: "--ui-drawer-foreground",
+  borderColor: "--ui-drawer-border-color",
+  radius: "--ui-drawer-radius",
+  focusRingColor: "--ui-drawer-focus-ring-color",
+} as const;
+
+export type DrawerToken =
+  (typeof drawerTokenNames)[keyof typeof drawerTokenNames];

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

@@ -0,0 +1,71 @@
+<script lang="ts">
+  import * as Drawer from "../index.js";
+  import { Button } from "../../button/index.js";
+
+  let goal = $state(350);
+</script>
+
+<Drawer.Root>
+  <Drawer.Trigger>
+    {#snippet child({ props })}
+      <Button {...props} variant="outline">Open drawer</Button>
+    {/snippet}
+  </Drawer.Trigger>
+  <Drawer.Content>
+    <Drawer.Header>
+      <Drawer.Title>Move Goal</Drawer.Title>
+      <Drawer.Description>Set your daily activity goal.</Drawer.Description>
+    </Drawer.Header>
+    <div data-ui-part="drawer-preview-body">
+      <p data-ui-part="drawer-preview-value">{goal}</p>
+      <div data-ui-part="drawer-preview-actions">
+        <Button
+          variant="outline"
+          size="icon"
+          aria-label="Decrease"
+          onclick={() => (goal = Math.max(200, goal - 10))}
+        >
+          -
+        </Button>
+        <Button
+          variant="outline"
+          size="icon"
+          aria-label="Increase"
+          onclick={() => (goal = Math.min(400, goal + 10))}
+        >
+          +
+        </Button>
+      </div>
+    </div>
+    <Drawer.Footer>
+      <Button>Submit</Button>
+      <Drawer.Close>
+        {#snippet child({ props })}
+          <Button {...props} variant="outline">Cancel</Button>
+        {/snippet}
+      </Drawer.Close>
+    </Drawer.Footer>
+  </Drawer.Content>
+</Drawer.Root>
+
+<style>
+  :global([data-ui-part="drawer-preview-body"]) {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 1rem;
+  }
+
+  :global([data-ui-part="drawer-preview-value"]) {
+    margin: 0;
+    font-size: 2.5rem;
+    font-weight: 700;
+    letter-spacing: -0.03em;
+  }
+
+  :global([data-ui-part="drawer-preview-actions"]) {
+    display: flex;
+    gap: 0.5rem;
+  }
+</style>

package/src/shared/shadcn/drawer/examples/sides.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+  import * as Drawer from "../index.js";
+  import { Button } from "../../button/index.js";
+
+  const DRAWER_SIDES = ["top", "right", "bottom", "left"] as const;
+</script>
+
+<div data-ui-part="drawer-sides">
+  {#each DRAWER_SIDES as side (side)}
+    <Drawer.Root direction={side === "bottom" ? undefined : side}>
+      <Drawer.Trigger>
+        {#snippet child({ props })}
+          <Button {...props} variant="outline">{side}</Button>
+        {/snippet}
+      </Drawer.Trigger>
+      <Drawer.Content>
+        <Drawer.Header>
+          <Drawer.Title>Move Goal</Drawer.Title>
+          <Drawer.Description>Set your daily activity goal.</Drawer.Description>
+        </Drawer.Header>
+        <p data-ui-part="drawer-sides-body">
+          Drawer opened from the {side}.
+        </p>
+        <Drawer.Footer>
+          <Button>Submit</Button>
+          <Drawer.Close>
+            {#snippet child({ props })}
+              <Button {...props} variant="outline">Cancel</Button>
+            {/snippet}
+          </Drawer.Close>
+        </Drawer.Footer>
+      </Drawer.Content>
+    </Drawer.Root>
+  {/each}
+</div>
+
+<style>
+  :global([data-ui-part="drawer-sides"]) {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+
+  :global([data-ui-part="drawer-sides-body"]) {
+    margin: 0;
+    padding: 0 1rem 1rem;
+    font-size: 0.875rem;
+    line-height: 1.5;
+  }
+</style>

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

@@ -0,0 +1,40 @@
+import Close from "./drawer-close.svelte";
+import Content from "./drawer-content.svelte";
+import Description from "./drawer-description.svelte";
+import Footer from "./drawer-footer.svelte";
+import Header from "./drawer-header.svelte";
+import NestedRoot from "./drawer-nested.svelte";
+import Overlay from "./drawer-overlay.svelte";
+import Portal from "./drawer-portal.svelte";
+import Title from "./drawer-title.svelte";
+import Trigger from "./drawer-trigger.svelte";
+import Root from "./drawer.svelte";
+
+export {
+  Root,
+  NestedRoot,
+  Content,
+  Description,
+  Overlay,
+  Footer,
+  Header,
+  Title,
+  Trigger,
+  Portal,
+  Close,
+
+  //
+  Root as Drawer,
+  NestedRoot as DrawerNestedRoot,
+  Content as DrawerContent,
+  Description as DrawerDescription,
+  Overlay as DrawerOverlay,
+  Footer as DrawerFooter,
+  Header as DrawerHeader,
+  Title as DrawerTitle,
+  Trigger as DrawerTrigger,
+  Portal as DrawerPortal,
+  Close as DrawerClose,
+};
+
+export { drawerTokenNames, type DrawerToken } from "./drawer.tokens.js";

package/src/shared/shadcn/dropdown-menu/dropdown-menu-checkbox-group.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+  let {
+    ref = $bindable(null),
+    value = $bindable([]),
+    ...restProps
+  }: DropdownMenuPrimitive.CheckboxGroupProps = $props();
+</script>
+
+<DropdownMenuPrimitive.CheckboxGroup
+  bind:ref
+  bind:value
+  data-slot="dropdown-menu-checkbox-group"
+  {...restProps}
+/>