@lumen-design/checkbox 0.0.2

package/dist/Checkbox.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+    import Icon from '@lumen-design/icon'
+    import { Check, Minus } from 'lucide'
+    import type { Snippet } from 'svelte'
+
+    interface CheckboxProps {
+        checked?: boolean
+        value?: string | number
+        disabled?: boolean
+        indeterminate?: boolean
+        size?: 'small' | 'medium' | 'large'
+        label?: string
+        children?: Snippet
+        onchange?: (checked: boolean) => void
+        class?: string
+    }
+
+    let { checked = $bindable(false), value, disabled = false, indeterminate = false, size = 'medium', label, children, onchange, class: cls = '', ...attrs }: CheckboxProps = $props()
+
+    let inputRef: HTMLInputElement | null = $state(null)
+
+    const classes = $derived(`lm-checkbox lm-checkbox--${size}${checked ? ' is-checked' : ''}${disabled ? ' is-disabled' : ''}${indeterminate ? ' is-indeterminate' : ''}${cls ? ` ${cls}` : ''}`)
+
+    const handleChange = (e: Event): void => {
+        checked = (e.currentTarget as HTMLInputElement).checked
+        onchange?.(checked)
+    }
+
+    $effect(() => {
+        if (inputRef) inputRef.indeterminate = indeterminate
+    })
+</script>
+
+<label class={classes}>
+    <span class="lm-checkbox__input">
+        <input bind:this={inputRef} bind:checked {...attrs} type="checkbox" class="lm-checkbox__original" {value} {disabled} onchange={handleChange} />
+        <span class="lm-checkbox__inner">
+            {#if checked}
+                <Icon icon={Check} size={12} />
+            {:else if indeterminate}
+                <Icon icon={Minus} size={12} />
+            {/if}
+        </span>
+    </span>
+
+    {#if children || label}
+        <span class="lm-checkbox__label">
+            {#if children}
+                {@render children()}
+            {:else if label}
+                {label}
+            {/if}
+        </span>
+    {/if}
+</label>

package/dist/Checkbox.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+interface CheckboxProps {
+    checked?: boolean;
+    value?: string | number;
+    disabled?: boolean;
+    indeterminate?: boolean;
+    size?: 'small' | 'medium' | 'large';
+    label?: string;
+    children?: Snippet;
+    onchange?: (checked: boolean) => void;
+    class?: string;
+}
+declare const Checkbox: import("svelte").Component<CheckboxProps, {}, "checked">;
+type Checkbox = ReturnType<typeof Checkbox>;
+export default Checkbox;
+//# sourceMappingURL=Checkbox.svelte.d.ts.map

package/dist/Checkbox.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.svelte.d.ts","sourceRoot":"","sources":["Checkbox.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGlC,UAAU,aAAa;IACnB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IACnC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,KAAK,CAAC,EAAE,MAAM,CAAA;CACjB;AAgDL,QAAA,MAAM,QAAQ,0DAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+import Checkbox from './Checkbox.svelte';
+export { Checkbox };
+export type { CheckboxProps, CheckboxSize } from './types';
+export default Checkbox;

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,mBAAmB,CAAA;AAExC,OAAO,EAAE,QAAQ,EAAE,CAAA;AACnB,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAC1D,eAAe,QAAQ,CAAA"}

package/dist/index.js

@@ -0,0 +1,3 @@
+import Checkbox from './Checkbox.svelte';
+export { Checkbox };
+export default Checkbox;

package/dist/types.d.ts

@@ -0,0 +1,24 @@
+import type { Snippet } from 'svelte';
+/** Checkbox 尺寸 */
+export type CheckboxSize = 'small' | 'medium' | 'large';
+/** Checkbox 属性 */
+export interface CheckboxProps {
+    /** 是否选中 */
+    checked?: boolean;
+    /** 值 */
+    value?: string | number;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 是否为不确定状态 */
+    indeterminate?: boolean;
+    /** 尺寸 */
+    size?: CheckboxSize;
+    /** 标签文字 */
+    label?: string;
+    /** 子内容 */
+    children?: Snippet;
+    /** 变化回调 */
+    onchange?: (checked: boolean) => void;
+    /** 自定义类名 */
+    class?: string;
+}

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AAErC,kBAAkB;AAClB,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;AAEvD,kBAAkB;AAClB,MAAM,WAAW,aAAa;IAC1B,WAAW;IACX,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ;IACR,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,WAAW;IACX,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,eAAe;IACf,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,SAAS;IACT,IAAI,CAAC,EAAE,YAAY,CAAA;IACnB,WAAW;IACX,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,UAAU;IACV,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW;IACX,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,YAAY;IACZ,KAAK,CAAC,EAAE,MAAM,CAAA;CACjB"}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@lumen-design/checkbox",
+  "version": "0.0.2",
+  "description": "Checkbox component for Lumen UI",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "svelte-package -i src -o dist --types",
+    "build:watch": "svelte-package -i src -o dist --types -w"
+  },
+  "devDependencies": {
+    "@sveltejs/package": "^2.5.7",
+    "svelte": "5.48.2"
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0",
+    "lucide": "^0.563.0"
+  }
+}