@noxlovette/material 0.1.0 → 0.1.2

package/dist/components/containers/dialogue/Dialogue.svelte

@@ -13,7 +13,6 @@ on screen until confirmed, dismissed, or a required action has been taken.
   import { dialogue } from './theme.js';
   import type { DialogueProps } from './types.js';
   import { Dialog } from 'bits-ui';
-  import clsx from 'clsx';
   import { enterExit } from '../../../animation/enterExit.js';
   import { easeEmphasized, easeEmphasizedDecel } from '../../../animation/easing.js';
   import { Button } from '../../buttons/index.js';
@@ -33,7 +32,6 @@ on screen until confirmed, dismissed, or a required action has been taken.
     children,
     disabled = false,
     class: className,
-    toggle = () => {},
     contentProps,
     onconfirm,
     ...rootRest
@@ -43,14 +41,7 @@ on screen until confirmed, dismissed, or a required action has been taken.
     $derived(dialogue());
 </script>
 
-<Dialog.Root
-  bind:open
-  {...rootRest}
-  onOpenChange={(v) => {
-    if (!v) toggle?.();
-    rootRest.onOpenChange?.(v);
-  }}
->
+<Dialog.Root bind:open {...rootRest}>
   <Dialog.Portal disabled={portalDisabled}>
     <Dialog.Overlay forceMount>
       {#snippet child({ props, open })}
@@ -73,7 +64,7 @@ on screen until confirmed, dismissed, or a required action has been taken.
             method="POST"
             action={confirmAction}
             use:enhance
-            onsubmit={(e) => {
+            onsubmit={(e: any) => {
               if (onconfirm) {
                 e.preventDefault();
                 onconfirm();

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/dist/components/forms/textfield/Textfield.svelte

@@ -11,6 +11,7 @@ Text fields allow users to enter and edit text.
   import { Icon } from '../../../utils/index.js';
   import { textfield } from './theme.js';
   import type { TextfieldProps } from './types.js';
+  import { useId } from 'bits-ui';
 
   let {
     value = $bindable(),
@@ -19,7 +20,7 @@ Text fields allow users to enter and edit text.
     trailingIconProps,
     placeholder = '',
     label,
-    id,
+    id = useId(),
     class: className,
     characterLimit,
     disabled = false,
@@ -32,6 +33,7 @@ Text fields allow users to enter and edit text.
   }: TextfieldProps = $props();
 
   const cls = $derived(textfield({ disabled, error }));
+
   const inputProps = $derived({
     id,
     class: cls.input(),

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

@@ -16,11 +16,11 @@ export type TextfieldProps = TextFieldVariants & Omit<HTMLInputAttributes, 'chil
      */
     label: string;
     /**
-     * The ID for the input element.
+     * The ID for the input element. Auto-generated but can be replaced
      */
-    id: string;
+    id?: string;
     /**
-     * The placeholder text for the input element.
+     * The placeholder text for the input element. Not used in M3
      */
     placeholder?: '';
     /**

package/package.json

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