@lapismd/design-core 0.1.0

package/src/shared/shadcn/input/input.docs-body.md

@@ -0,0 +1,83 @@
+## Installation
+
+```bash
+pnpm ui:add input
+```
+
+## Usage
+
+```html
+<script lang="ts">
+  import { Input } from "@lapismd/design-core/shadcn/input";
+</script>
+```
+
+```html
+<input />
+```
+
+## Examples
+
+### Default
+
+```html
+<script lang="ts">
+  import { Input } from "@lapismd/design-core/shadcn/input";
+</script>
+
+<input type="email" placeholder="Email" class="max-w-xs" />
+```
+
+### File
+
+```html
+<script lang="ts">
+  import { Input } from "@lapismd/design-core/shadcn/input";
+  import { Label } from "@lapismd/design-core/shadcn/label";
+</script>
+
+<div class="grid w-full max-w-sm items-center gap-1.5">
+  <label for="picture">Picture</label>
+  <input id="picture" type="file" />
+</div>
+```
+
+### Disabled
+
+```html
+<script lang="ts">
+  import { Input } from "@lapismd/design-core/shadcn/input";
+</script>
+
+<input disabled type="email" placeholder="Email" class="max-w-sm" />
+```
+
+### With Label
+
+```html
+<script lang="ts">
+  import { Input } from "@lapismd/design-core/shadcn/input";
+  import { Label } from "@lapismd/design-core/shadcn/label";
+
+  const id = $props.id();
+</script>
+
+<div class="flex w-full max-w-sm flex-col gap-1.5">
+  <label for="email-{id}">Email</label>
+  <input type="email" id="email-{id}" placeholder="Email" />
+</div>
+```
+
+### With Button
+
+```html
+<script lang="ts">
+  import { Button } from "@lapismd/design-core/shadcn/button";
+  import { Input } from "@lapismd/design-core/shadcn/input";
+</script>
+
+<div class="flex w-full max-w-sm items-center gap-2">
+  <input type="email" placeholder="Email" />
+  <button type="submit" variant="outline">Subscribe</button>
+</div>
+```

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

@@ -0,0 +1,89 @@
+<!-- Adapted from https://github.com/huntabyte/shadcn-svelte/blob/bf4f461d88526359d0e96e1950f637912bbeebe7/docs/content/components/input.md for the @lapismd/design-core native-CSS catalog. -->
+
+# Input
+
+Displays a form input field or a component that looks like an input field.
+
+## Installation
+
+```bash
+pnpm ui:add input
+```
+
+## Usage
+
+```html
+<script lang="ts">
+  import { Input } from "@lapismd/design-core/shadcn/input";
+</script>
+```
+
+```html
+<input />
+```
+
+## Examples
+
+### Default
+
+```html
+<script lang="ts">
+  import { Input } from "@lapismd/design-core/shadcn/input";
+</script>
+
+<input type="email" placeholder="Email" class="max-w-xs" />
+```
+
+### File
+
+```html
+<script lang="ts">
+  import { Input } from "@lapismd/design-core/shadcn/input";
+  import { Label } from "@lapismd/design-core/shadcn/label";
+</script>
+
+<div class="grid w-full max-w-sm items-center gap-1.5">
+  <label for="picture">Picture</label>
+  <input id="picture" type="file" />
+</div>
+```
+
+### Disabled
+
+```html
+<script lang="ts">
+  import { Input } from "@lapismd/design-core/shadcn/input";
+</script>
+
+<input disabled type="email" placeholder="Email" class="max-w-sm" />
+```
+
+### With Label
+
+```html
+<script lang="ts">
+  import { Input } from "@lapismd/design-core/shadcn/input";
+  import { Label } from "@lapismd/design-core/shadcn/label";
+
+  const id = $props.id();
+</script>
+
+<div class="flex w-full max-w-sm flex-col gap-1.5">
+  <label for="email-{id}">Email</label>
+  <input type="email" id="email-{id}" placeholder="Email" />
+</div>
+```
+
+### With Button
+
+```html
+<script lang="ts">
+  import { Button } from "@lapismd/design-core/shadcn/button";
+  import { Input } from "@lapismd/design-core/shadcn/input";
+</script>
+
+<div class="flex w-full max-w-sm items-center gap-2">
+  <input type="email" placeholder="Email" />
+  <button type="submit" variant="outline">Subscribe</button>
+</div>
+```

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

@@ -0,0 +1,47 @@
+{
+  "schemaVersion": 1,
+  "component": "input",
+  "scope": "shared",
+  "upstream": {
+    "project": "shadcn-svelte",
+    "registry": "https://shadcn-svelte.com/registry",
+    "cliVersion": "1.4.2",
+    "item": "input",
+    "fetchedAt": "2026-07-19T16:28:47.417Z",
+    "sourceFiles": [
+      {
+        "path": "src/lib/components/ui/input/index.ts",
+        "sha256": "4e0ad69d49a27194c7f3dfd0cdd5933ee13fc40cc13a77138b547d300701d390"
+      },
+      {
+        "path": "src/lib/components/ui/input/input.svelte",
+        "sha256": "728286a2bfbcd5384640e02fd3868372b665ef129d931ebfcc445544ad702d5a"
+      }
+    ],
+    "docsUrl": "https://github.com/huntabyte/shadcn-svelte/blob/bf4f461d88526359d0e96e1950f637912bbeebe7/docs/content/components/input.md",
+    "docsFetchedAt": "2026-07-22T09:57:18.242Z",
+    "docsSha256": "457a92317ce3c086f490a73a53e054475a5770ff1f9f96b6840a73e20b8282b6",
+    "examplesIncluded": [
+      "Preview",
+      "Default",
+      "File",
+      "Disabled",
+      "With Label",
+      "With Button"
+    ],
+    "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": "input",
+    "version": 1,
+    "tier": "simpleRoot"
+  }
+}

package/src/shared/shadcn/input/input.svelte

@@ -0,0 +1,398 @@
+<script lang="ts" module>
+  import type {
+    HTMLInputAttributes,
+    HTMLInputTypeAttribute,
+  } from "svelte/elements";
+  import { type WithElementRef } from "../../../lib/utils.js";
+
+  type InputType = Exclude<HTMLInputTypeAttribute, "file">;
+
+  export type InputProps = WithElementRef<
+    Omit<HTMLInputAttributes, "type"> &
+      (
+        | { type: "file"; files?: FileList }
+        | { type?: InputType; files?: undefined }
+      )
+  >;
+</script>
+
+<script lang="ts">
+  import { omitDataUiComponent } from "../../../lib/data-ui-host.js";
+
+  let {
+    ref = $bindable(null),
+    value = $bindable(),
+    type,
+    files = $bindable(),
+    class: className,
+    "data-slot": dataSlot = "input",
+    ...restProps
+  }: InputProps = $props();
+</script>
+
+{#if type === "file"}
+  <input
+    bind:this={ref}
+    {...omitDataUiComponent(restProps)}
+    data-ui-component="input"
+    data-slot={dataSlot}
+    class={className}
+    type="file"
+    bind:files
+    bind:value
+  />
+{:else}
+  <input
+    bind:this={ref}
+    {...omitDataUiComponent(restProps)}
+    data-ui-component="input"
+    data-slot={dataSlot}
+    class={className}
+    {type}
+    bind:value
+  />
+{/if}
+
+<style>
+  /* Semantic selectors must be global: they target data attributes and descendants. */
+  :global {
+    /*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
+    @layer properties {
+    }
+    @layer base {
+      @supports (not ((-webkit-appearance: -apple-pay-button))) or
+        (contain-intrinsic-size: 1px) {
+      }
+    }
+    @layer utilities {
+      [data-ui-component="input"] {
+        height: calc(var(--spacing) * 9);
+      }
+      [data-ui-component="input"] {
+        width: 100%;
+      }
+      [data-ui-component="input"] {
+        min-width: 0;
+      }
+      [data-ui-component="input"] {
+        border-radius: calc(var(--radius) * 0.8);
+      }
+      [data-ui-component="input"] {
+        border-style: var(--tw-border-style);
+        border-width: 1px;
+      }
+      [data-ui-component="input"] {
+        border-color: var(--ui-input-border-color, var(--input));
+      }
+      [data-ui-component="input"] {
+        background-color: #0000;
+      }
+      [data-ui-component="input"] {
+        padding-inline: calc(var(--spacing) * 2.5);
+      }
+      [data-ui-component="input"] {
+        padding-block: var(--spacing);
+      }
+      [data-ui-component="input"] {
+        font-size: var(--text-base);
+        line-height: var(--tw-leading, var(--text-base--line-height));
+      }
+      [data-ui-component="input"] {
+        --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, #0000000d);
+        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
+          var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      }
+      [data-ui-component="input"] {
+        transition-property: color, box-shadow;
+        transition-timing-function: var(
+          --tw-ease,
+          var(--default-transition-timing-function)
+        );
+        transition-duration: var(
+          --tw-duration,
+          var(--default-transition-duration)
+        );
+      }
+      [data-ui-component="input"] {
+        --tw-outline-style: none;
+        outline-style: none;
+      }
+      [data-ui-component="input"]::file-selector-button {
+        display: inline-flex;
+      }
+      [data-ui-component="input"]::file-selector-button {
+        height: calc(var(--spacing) * 7);
+      }
+      [data-ui-component="input"]::file-selector-button {
+        border-style: var(--tw-border-style);
+        border-width: 0;
+      }
+      [data-ui-component="input"]::file-selector-button {
+        background-color: #0000;
+      }
+      [data-ui-component="input"]::file-selector-button {
+        font-size: var(--text-sm);
+        line-height: var(--tw-leading, var(--text-sm--line-height));
+      }
+      [data-ui-component="input"]::file-selector-button {
+        --tw-font-weight: var(--font-weight-medium);
+        font-weight: var(--font-weight-medium);
+      }
+      [data-ui-component="input"]::file-selector-button {
+        color: var(--ui-input-foreground, var(--foreground));
+      }
+      [data-ui-component="input"]::placeholder {
+        color: var(--muted-foreground);
+      }
+      [data-ui-component="input"]:focus-visible {
+        border-color: transparent;
+      }
+      [data-ui-component="input"]:focus-visible {
+        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0
+          calc(3px + var(--tw-ring-offset-width))
+          var(--tw-ring-color, currentcolor);
+        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
+          var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      }
+      [data-ui-component="input"]:focus-visible {
+        --tw-ring-color: var(--ui-input-focus-ring-color, var(--ring));
+      }
+      @supports (color: color-mix(in lab, red, red)) {
+        [data-ui-component="input"]:focus-visible {
+          --tw-ring-color: color-mix(
+            in oklab,
+            var(--ui-input-focus-ring-color, var(--ring)) 50%,
+            transparent
+          );
+        }
+      }
+      [data-ui-component="input"]:disabled {
+        pointer-events: none;
+      }
+      [data-ui-component="input"]:disabled {
+        cursor: not-allowed;
+      }
+      [data-ui-component="input"]:disabled {
+        opacity: 0.5;
+      }
+      [data-ui-component="input"][aria-invalid="true"] {
+        border-color: var(--destructive);
+      }
+      [data-ui-component="input"][aria-invalid="true"] {
+        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0
+          calc(3px + var(--tw-ring-offset-width))
+          var(--tw-ring-color, currentcolor);
+        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
+          var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      }
+      [data-ui-component="input"][aria-invalid="true"] {
+        --tw-ring-color: var(--destructive);
+      }
+      @supports (color: color-mix(in lab, red, red)) {
+        [data-ui-component="input"][aria-invalid="true"] {
+          --tw-ring-color: color-mix(
+            in oklab,
+            var(--destructive) 20%,
+            transparent
+          );
+        }
+      }
+      @media (min-width: 48rem) {
+        [data-ui-component="input"] {
+          font-size: var(--text-sm);
+          line-height: var(--tw-leading, var(--text-sm--line-height));
+        }
+      }
+      [data-ui-component="input"]:is(:global(.dark) *) {
+        background-color: var(--input);
+      }
+      @supports (color: color-mix(in lab, red, red)) {
+        [data-ui-component="input"]:is(:global(.dark) *) {
+          background-color: color-mix(in oklab, var(--input) 30%, transparent);
+        }
+      }
+      [data-ui-component="input"]:is(:global(.dark) *)[aria-invalid="true"] {
+        border-color: var(--destructive);
+      }
+      @supports (color: color-mix(in lab, red, red)) {
+        [data-ui-component="input"]:is(:global(.dark) *)[aria-invalid="true"] {
+          border-color: color-mix(
+            in oklab,
+            var(--destructive) 50%,
+            transparent
+          );
+        }
+      }
+      [data-ui-component="input"]:is(:global(.dark) *)[aria-invalid="true"] {
+        --tw-ring-color: var(--destructive);
+      }
+      @supports (color: color-mix(in lab, red, red)) {
+        [data-ui-component="input"]:is(:global(.dark) *)[aria-invalid="true"] {
+          --tw-ring-color: color-mix(
+            in oklab,
+            var(--destructive) 40%,
+            transparent
+          );
+        }
+      }
+    }
+    @property --tw-animation-delay {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0s;
+    }
+    @property --tw-animation-direction {
+      syntax: "*";
+      inherits: false;
+      initial-value: normal;
+    }
+    @property --tw-animation-duration {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --tw-animation-fill-mode {
+      syntax: "*";
+      inherits: false;
+      initial-value: none;
+    }
+    @property --tw-animation-iteration-count {
+      syntax: "*";
+      inherits: false;
+      initial-value: 1;
+    }
+    @property --tw-enter-blur {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0;
+    }
+    @property --tw-enter-opacity {
+      syntax: "*";
+      inherits: false;
+      initial-value: 1;
+    }
+    @property --tw-enter-rotate {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0;
+    }
+    @property --tw-enter-scale {
+      syntax: "*";
+      inherits: false;
+      initial-value: 1;
+    }
+    @property --tw-enter-translate-x {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0;
+    }
+    @property --tw-enter-translate-y {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0;
+    }
+    @property --tw-exit-blur {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0;
+    }
+    @property --tw-exit-opacity {
+      syntax: "*";
+      inherits: false;
+      initial-value: 1;
+    }
+    @property --tw-exit-rotate {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0;
+    }
+    @property --tw-exit-scale {
+      syntax: "*";
+      inherits: false;
+      initial-value: 1;
+    }
+    @property --tw-exit-translate-x {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0;
+    }
+    @property --tw-exit-translate-y {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0;
+    }
+    @property --tw-border-style {
+      syntax: "*";
+      inherits: false;
+      initial-value: solid;
+    }
+    @property --tw-shadow {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0 0 #0000;
+    }
+    @property --tw-shadow-color {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --tw-shadow-alpha {
+      syntax: "<percentage>";
+      inherits: false;
+      initial-value: 100%;
+    }
+    @property --tw-inset-shadow {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0 0 #0000;
+    }
+    @property --tw-inset-shadow-color {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --tw-inset-shadow-alpha {
+      syntax: "<percentage>";
+      inherits: false;
+      initial-value: 100%;
+    }
+    @property --tw-ring-color {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --tw-ring-shadow {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0 0 #0000;
+    }
+    @property --tw-inset-ring-color {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --tw-inset-ring-shadow {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0 0 #0000;
+    }
+    @property --tw-ring-inset {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --tw-ring-offset-width {
+      syntax: "<length>";
+      inherits: false;
+      initial-value: 0;
+    }
+    @property --tw-ring-offset-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: #fff;
+    }
+    @property --tw-ring-offset-shadow {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0 0 #0000;
+    }
+    @property --tw-font-weight {
+      syntax: "*";
+      inherits: false;
+    }
+  }
+</style>

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

@@ -0,0 +1,13 @@
+/**
+ * Default input token bindings → theme tokens.
+ * Override --ui-input-* on :root or any ancestor (forms pattern).
+ * Do not rebind these names on [data-ui-component="input"] hosts — that
+ * blocks ancestor customization.
+ */
+:root {
+  --ui-input-background: transparent;
+  --ui-input-foreground: var(--foreground);
+  --ui-input-border-color: var(--input);
+  --ui-input-radius: var(--radius-md, calc(var(--radius) * 0.8));
+  --ui-input-focus-ring-color: var(--ring);
+}

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

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

package/src/shared/shadcn/input-group/examples/custom-input.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  // @generated by ui-generator — do not edit
+
+  import * as InputGroup from "../index.js";
+</script>
+
+<div class="grid w-full max-w-sm gap-6">
+  <InputGroup.Root>
+    <textarea
+      data-slot="input-group-control"
+      class="flex field-sizing-content min-h-16 w-full resize-none rounded-md bg-transparent px-3 py-2.5 text-base transition-[color,box-shadow] outline-none md:text-sm"
+      placeholder="Autoresize textarea..."
+    ></textarea>
+    <InputGroup.Addon align="block-end">
+      <InputGroup.Button class="ms-auto" size="sm" variant="default">
+        Submit
+      </InputGroup.Button>
+    </InputGroup.Addon>
+  </InputGroup.Root>
+</div>