@noxlovette/material 0.1.0 → 0.1.1

package/dist/components/forms/checkbox/Checkbox.svelte

@@ -9,58 +9,57 @@ Checkboxes let users select one or more items from a list, or turn an item on or
   import { checkbox } from './theme.js';
   import type { CheckboxProps } from './types.js';
   import { Layer } from '../../../utils/index.js';
-  import { Checkbox } from 'bits-ui';
+  import { Checkbox, Label, useId } from 'bits-ui';
 
   let {
-    label,
-    supportingText,
+    labelText,
+    labelRef,
+    id = useId(),
+    ref,
     indeterminate = $bindable(false),
     checked = $bindable(false),
     disabled = false,
     error = false,
-    align = 'start',
     class: className,
     ...restProps
   }: CheckboxProps = $props();
 
   const state = $derived(indeterminate ? 'indeterminate' : checked ? 'checked' : 'unchecked');
-  const cls = $derived(checkbox({ state, error, align, disabled }));
+  const cls = $derived(checkbox({ state, error, disabled }));
 </script>
 
-<Checkbox.Root
-  bind:checked
-  bind:indeterminate
-  {disabled}
-  class={cls.root({ class: clsx(className) })}
-  {...restProps}
->
-  {#snippet children({ checked, indeterminate })}
-    <div class={cls.container()}>
-      <div class={cls.control()}>
-        <Layer />
-        <div class={cls.box()}></div>
-      </div>
-      <span class={cls.indeterminateIcon()}></span>
-      <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class={cls.checkIcon()}>
-        <path
-          d="M 4.83 13.41 L 9 17.585 L 19.59 7"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-      </svg>
-    </div>
-    {#if label || supportingText}
-      <div class="flex flex-col gap-1 text-left">
-        {#if label}
-          <span class={cls.label()}>{label}</span>
-        {/if}
-        {#if supportingText}
-          <span class={cls.supporting()}>{supportingText}</span>
+<div class="flex cursor-pointer items-center space-x-3">
+  <Checkbox.Root
+    bind:checked
+    bind:indeterminate
+    {ref}
+    {disabled}
+    {id}
+    class={cls.root({ class: clsx(className) })}
+    {...restProps}
+  >
+    {#snippet children({ checked, indeterminate })}
+      <div class={cls.container()}>
+        <div class={cls.control()}>
+          <Layer />
+          <div class={cls.box()}></div>
+        </div>
+        {#if indeterminate}
+          <span class={cls.indeterminateIcon()}></span>
+        {:else if checked}
+          <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class={cls.checkIcon()}>
+            <path
+              d="M 4.83 13.41 L 9 17.585 L 19.59 7"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
         {/if}
       </div>
-    {/if}
-  {/snippet}
-</Checkbox.Root>
+    {/snippet}
+  </Checkbox.Root>
+  <Label.Root for={id} ref={labelRef} class={cls.label()}>{labelText}</Label.Root>
+</div>

package/dist/components/forms/checkbox/theme.d.ts

@@ -44,7 +44,6 @@ export declare const checkbox: import("tailwind-variants").TVReturnType<{
     checkIcon: string;
     indeterminateIcon: string;
     label: string;
-    supporting: string;
 }, undefined, {
     state: {
         unchecked: {};
@@ -90,7 +89,6 @@ export declare const checkbox: import("tailwind-variants").TVReturnType<{
     checkIcon: string;
     indeterminateIcon: string;
     label: string;
-    supporting: string;
 }, import("tailwind-variants").TVReturnType<{
     state: {
         unchecked: {};
@@ -136,6 +134,5 @@ export declare const checkbox: import("tailwind-variants").TVReturnType<{
     checkIcon: string;
     indeterminateIcon: string;
     label: string;
-    supporting: string;
 }, undefined, unknown, unknown, undefined>>;
 export type CheckboxM3Variants = VariantProps<typeof checkbox>;

package/dist/components/forms/checkbox/theme.js

@@ -1,14 +1,13 @@
 import { tv } from 'tailwind-variants';
 export const checkbox = tv({
     slots: {
-        root: 'inline-flex min-h-10 select-none items-start gap-3 text-md-sys-color-on-surface min-h-4.5',
+        root: 'inline-flex min-h-10 select-none items-start gap-3 text-md-sys-color-on-surface min-h-4.5 cursor-pointer',
         container: 'relative inline-flex size-[18px] shrink-0',
         control: 'layer-container absolute -inset-[11px] rounded-full text-md-sys-color-on-surface-variant state-layer before:rounded-full peer-focus-visible:outline peer-focus-visible:outline-3 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-md-sys-color-secondary',
         box: 'absolute inset-[11px] rounded-[4px] border-2 border-current bg-md-sys-color-surface',
         checkIcon: 'pointer-events-none absolute inset-0 m-auto size-5 text-md-sys-color-on-primary opacity-0 scale-75',
         indeterminateIcon: 'pointer-events-none absolute inset-0 m-auto block h-0.5 w-3 rounded-full bg-md-sys-color-on-primary opacity-0 scale-75',
-        label: 'md-sys-typescale-body-large leading-5 text-md-sys-color-on-surface',
-        supporting: 'md-sys-typescale-body-medium text-md-sys-color-on-surface-variant'
+        label: 'md-sys-typescale-body-large leading-5 text-md-sys-color-on-surface cursor-pointer'
     },
     variants: {
         state: {

package/dist/components/forms/checkbox/types.d.ts

@@ -1,39 +1,8 @@
-import type { CheckboxRootProps } from 'bits-ui';
-import type { CheckboxM3Variants } from './theme.js';
-export type CheckboxProps = CheckboxM3Variants & Omit<CheckboxRootProps, 'children' | 'checked' | 'indeterminate'> & {
-    /**
-     * The text label for the checkbox.
-     */
-    label?: string;
-    /**
-     * Supporting text displayed below the label.
-     */
-    supportingText?: string;
-    /**
-     * Whether the checkbox is in an indeterminate state.
-     * @bindable
-     */
-    indeterminate?: boolean;
-    /**
-     * The value associated with the checkbox.
-     */
-    value?: string;
-    /**
-     * Whether the checkbox is checked.
-     * @bindable
-     */
-    checked?: boolean;
-    /**
-     * Whether the checkbox is disabled.
-     */
+import type { Checkbox, WithoutChildrenOrChild } from 'bits-ui';
+export type CheckboxProps = WithoutChildrenOrChild<Checkbox.RootProps> & {
+    labelText: string;
+    labelRef?: HTMLLabelElement;
+} & {
     disabled?: boolean;
-    /**
-     * Whether the checkbox is in an error state.
-     */
     error?: boolean;
-    /**
-     * Vertical alignment of the checkbox relative to its label.
-     * @default 'start'
-     */
-    align?: 'start' | 'center';
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noxlovette/material",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "type": "module",
   "license": "MIT",
   "repository": {