@noxlovette/material 0.1.0

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

@@ -0,0 +1,39 @@
+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.
+     */
+    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/checkbox/types.js

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

package/dist/components/forms/command/Command.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import { Command } from 'bits-ui';
+  import clsx from 'clsx';
+  import { command } from './theme.js';
+  import type { CommandProps } from './types.js';
+
+  let { children, class: className, value = $bindable(), ...restProps }: CommandProps = $props();
+
+  const { base } = command();
+</script>
+
+<Command.Root {...restProps} bind:value class={base({ class: clsx(className) })}>
+  {@render children()}
+</Command.Root>

package/dist/components/forms/command/Command.svelte.d.ts

@@ -0,0 +1,5 @@
+import { Command } from 'bits-ui';
+import type { CommandProps } from './types.js';
+declare const Command: import("svelte").Component<CommandProps, {}, "value">;
+type Command = ReturnType<typeof Command>;
+export default Command;

package/dist/components/forms/command/CommandEmpty.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import { Command } from 'bits-ui';
+  import clsx from 'clsx';
+  import { command } from './theme.js';
+  import type { CommandEmptyProps } from './types.js';
+
+  let { children, class: className, ...restProps }: CommandEmptyProps = $props();
+
+  const { empty } = command();
+</script>
+
+<Command.Empty {...restProps} class={empty({ class: clsx(className) })}>
+  {@render children()}
+</Command.Empty>

package/dist/components/forms/command/CommandEmpty.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { CommandEmptyProps } from './types.js';
+declare const CommandEmpty: import("svelte").Component<CommandEmptyProps, {}, "">;
+type CommandEmpty = ReturnType<typeof CommandEmpty>;
+export default CommandEmpty;

package/dist/components/forms/command/CommandGroup.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { Command } from 'bits-ui';
+  import clsx from 'clsx';
+  import { command } from './theme.js';
+  import type { CommandGroupProps } from './types.js';
+
+  let { children, class: className, heading, ...restProps }: CommandGroupProps = $props();
+
+  const { group } = command();
+</script>
+
+<Command.Group {...restProps} class={group({ class: clsx(className) })}>
+  {#if heading}
+    <div data-command-group-heading="">{heading}</div>
+  {/if}
+  {@render children()}
+</Command.Group>

package/dist/components/forms/command/CommandGroup.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { CommandGroupProps } from './types.js';
+declare const CommandGroup: import("svelte").Component<CommandGroupProps, {}, "">;
+type CommandGroup = ReturnType<typeof CommandGroup>;
+export default CommandGroup;

package/dist/components/forms/command/CommandInput.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import { Command } from 'bits-ui';
+  import clsx from 'clsx';
+  import { command } from './theme.js';
+  import type { CommandInputProps } from './types.js';
+  import { Icon } from '../../../utils/index.js';
+
+  let { class: className, showIcon = true, ...restProps }: CommandInputProps = $props();
+
+  const { inputWrapper, inputIcon, input } = command();
+</script>
+
+<div class={inputWrapper()} data-command-input-wrapper="">
+  {#if showIcon}
+    <Icon name="search" class={inputIcon()} />
+  {/if}
+  <Command.Input {...restProps} class={input({ class: clsx(className) })} />
+</div>

package/dist/components/forms/command/CommandInput.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { CommandInputProps } from './types.js';
+declare const CommandInput: import("svelte").Component<CommandInputProps, {}, "">;
+type CommandInput = ReturnType<typeof CommandInput>;
+export default CommandInput;

package/dist/components/forms/command/CommandItem.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import { Command } from 'bits-ui';
+  import clsx from 'clsx';
+  import { command } from './theme.js';
+  import type { CommandItemProps } from './types.js';
+
+  let { children, class: className, value, ...restProps }: CommandItemProps = $props();
+
+  const { item } = command();
+</script>
+
+<Command.Item {...restProps} {value} class={item({ class: clsx(className) })}>
+  {@render children()}
+</Command.Item>

package/dist/components/forms/command/CommandItem.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { CommandItemProps } from './types.js';
+declare const CommandItem: import("svelte").Component<CommandItemProps, {}, "">;
+type CommandItem = ReturnType<typeof CommandItem>;
+export default CommandItem;

package/dist/components/forms/command/CommandList.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import { Command } from 'bits-ui';
+  import clsx from 'clsx';
+  import { command } from './theme.js';
+  import type { CommandListProps } from './types.js';
+
+  let { children, class: className, ...restProps }: CommandListProps = $props();
+
+  const { list } = command();
+</script>
+
+<Command.List {...restProps} class={list({ class: clsx(className) })}>
+  {@render children()}
+</Command.List>

package/dist/components/forms/command/CommandList.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { CommandListProps } from './types.js';
+declare const CommandList: import("svelte").Component<CommandListProps, {}, "">;
+type CommandList = ReturnType<typeof CommandList>;
+export default CommandList;

package/dist/components/forms/command/CommandSeparator.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import { Command } from 'bits-ui';
+  import clsx from 'clsx';
+  import { command } from './theme.js';
+  import type { CommandSeparatorProps } from './types.js';
+
+  let { class: className, ...restProps }: CommandSeparatorProps = $props();
+
+  const { separator } = command();
+</script>
+
+<Command.Separator {...restProps} class={separator({ class: clsx(className) })} />

package/dist/components/forms/command/CommandSeparator.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { CommandSeparatorProps } from './types.js';
+declare const CommandSeparator: import("svelte").Component<CommandSeparatorProps, {}, "">;
+type CommandSeparator = ReturnType<typeof CommandSeparator>;
+export default CommandSeparator;

package/dist/components/forms/command/index.d.ts

@@ -0,0 +1,9 @@
+export * from './theme.js';
+export * from './types.js';
+export { default as Command } from './Command.svelte';
+export { default as CommandEmpty } from './CommandEmpty.svelte';
+export { default as CommandGroup } from './CommandGroup.svelte';
+export { default as CommandInput } from './CommandInput.svelte';
+export { default as CommandItem } from './CommandItem.svelte';
+export { default as CommandList } from './CommandList.svelte';
+export { default as CommandSeparator } from './CommandSeparator.svelte';

package/dist/components/forms/command/index.js

@@ -0,0 +1,12 @@
+// THIS FILE IS AUTO-GENERATED BY scripts/generate-components-index.ts - DO NOT EDIT MANUALLY
+// re-export TS/JS modules from this folder
+export * from './theme.js';
+export * from './types.js';
+// default exports for components in this folder
+export { default as Command } from './Command.svelte';
+export { default as CommandEmpty } from './CommandEmpty.svelte';
+export { default as CommandGroup } from './CommandGroup.svelte';
+export { default as CommandInput } from './CommandInput.svelte';
+export { default as CommandItem } from './CommandItem.svelte';
+export { default as CommandList } from './CommandList.svelte';
+export { default as CommandSeparator } from './CommandSeparator.svelte';

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

@@ -0,0 +1,81 @@
+import { type VariantProps } from 'tailwind-variants';
+export type CommandVariants = VariantProps<typeof command>;
+export declare const command: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            input?: import("tailwind-merge").ClassNameValue;
+            base?: import("tailwind-merge").ClassNameValue;
+            group?: import("tailwind-merge").ClassNameValue;
+            list?: import("tailwind-merge").ClassNameValue;
+            separator?: import("tailwind-merge").ClassNameValue;
+            item?: import("tailwind-merge").ClassNameValue;
+            inputWrapper?: import("tailwind-merge").ClassNameValue;
+            inputIcon?: import("tailwind-merge").ClassNameValue;
+            empty?: import("tailwind-merge").ClassNameValue;
+            itemIcon?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            input?: import("tailwind-merge").ClassNameValue;
+            base?: import("tailwind-merge").ClassNameValue;
+            group?: import("tailwind-merge").ClassNameValue;
+            list?: import("tailwind-merge").ClassNameValue;
+            separator?: import("tailwind-merge").ClassNameValue;
+            item?: import("tailwind-merge").ClassNameValue;
+            inputWrapper?: import("tailwind-merge").ClassNameValue;
+            inputIcon?: import("tailwind-merge").ClassNameValue;
+            empty?: import("tailwind-merge").ClassNameValue;
+            itemIcon?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    inputWrapper: string;
+    inputIcon: string;
+    input: string;
+    list: string;
+    empty: string;
+    group: string;
+    separator: string;
+    item: string;
+    itemIcon: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            input?: import("tailwind-merge").ClassNameValue;
+            base?: import("tailwind-merge").ClassNameValue;
+            group?: import("tailwind-merge").ClassNameValue;
+            list?: import("tailwind-merge").ClassNameValue;
+            separator?: import("tailwind-merge").ClassNameValue;
+            item?: import("tailwind-merge").ClassNameValue;
+            inputWrapper?: import("tailwind-merge").ClassNameValue;
+            inputIcon?: import("tailwind-merge").ClassNameValue;
+            empty?: import("tailwind-merge").ClassNameValue;
+            itemIcon?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    inputWrapper: string;
+    inputIcon: string;
+    input: string;
+    list: string;
+    empty: string;
+    group: string;
+    separator: string;
+    item: string;
+    itemIcon: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    base: string;
+    inputWrapper: string;
+    inputIcon: string;
+    input: string;
+    list: string;
+    empty: string;
+    group: string;
+    separator: string;
+    item: string;
+    itemIcon: string;
+}, undefined, unknown, unknown, undefined>>;

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

@@ -0,0 +1,15 @@
+import { tv } from 'tailwind-variants';
+export const command = tv({
+    slots: {
+        base: 'flex h-full w-full flex-col overflow-hidden rounded-2xl bg-md-sys-color-surface-container-high text-md-sys-color-on-surface shadow-elevation-3 ring-1 ring-md-sys-color-outline/20',
+        inputWrapper: 'flex items-center border-b border-md-sys-color-outline-variant px-4',
+        inputIcon: 'mr-3 h-5 w-5 shrink-0 text-md-sys-color-on-surface-variant',
+        input: 'flex h-12 w-full rounded-md bg-transparent py-3 text-md-sys-typescale-body-large outline-none placeholder:text-md-sys-color-on-surface-variant disabled:cursor-not-allowed disabled:opacity-50',
+        list: 'max-h-[300px] overflow-y-auto overflow-x-hidden p-2 scrollbar-thin scrollbar-thumb-md-sys-color-outline-variant scrollbar-track-transparent',
+        empty: 'py-6 text-center text-md-sys-typescale-body-medium text-md-sys-color-on-surface-variant',
+        group: 'overflow-hidden p-1 text-md-sys-color-on-surface-variant [&_[data-command-group-heading]]:px-3 [&_[data-command-group-heading]]:py-2 [&_[data-command-group-heading]]:text-md-sys-typescale-label-medium [&_[data-command-group-heading]]:text-md-sys-color-on-surface-variant',
+        separator: '-mx-1 h-px bg-md-sys-color-outline-variant',
+        item: 'relative flex cursor-default select-none items-center rounded-lg px-3 py-3 text-md-sys-typescale-body-medium outline-none data-[selected=true]:bg-md-sys-color-secondary-container data-[selected=true]:text-md-sys-color-on-secondary-container data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50 transition-colors',
+        itemIcon: 'mr-3 h-5 w-5 shrink-0'
+    }
+});

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

@@ -0,0 +1,31 @@
+import type { Command } from 'bits-ui';
+import type { Snippet } from 'svelte';
+import type { CommandVariants } from './theme.js';
+export interface CommandProps extends Command.RootProps, CommandVariants {
+    class?: string;
+    children: Snippet;
+}
+export interface CommandInputProps extends Command.InputProps {
+    class?: string;
+    showIcon?: boolean;
+}
+export interface CommandListProps extends Command.ListProps {
+    class?: string;
+    children: Snippet;
+}
+export interface CommandItemProps extends Command.ItemProps {
+    class?: string;
+    children: Snippet;
+}
+export interface CommandGroupProps extends Command.GroupProps {
+    class?: string;
+    children: Snippet;
+    heading?: string;
+}
+export interface CommandEmptyProps extends Command.EmptyProps {
+    class?: string;
+    children: Snippet;
+}
+export interface CommandSeparatorProps extends Command.SeparatorProps {
+    class?: string;
+}

package/dist/components/forms/command/types.js

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

package/dist/components/forms/index.d.ts

@@ -0,0 +1,12 @@
+export * from './checkbox/index.js';
+export * from './command/index.js';
+export * from './multipart/index.js';
+export * from './pin/index.js';
+export * from './radio-group/index.js';
+export * from './search/index.js';
+export * from './select/index.js';
+export * from './slider/index.js';
+export * from './switch/index.js';
+export * from './textfield/index.js';
+export * from './toggle-group/index.js';
+export * from './tooltip/index.js';

package/dist/components/forms/index.js

@@ -0,0 +1,14 @@
+// THIS FILE IS AUTO-GENERATED BY scripts/generate-components-index.ts - DO NOT EDIT MANUALLY
+// folder re-exports (export everything from these folders)
+export * from './checkbox/index.js';
+export * from './command/index.js';
+export * from './multipart/index.js';
+export * from './pin/index.js';
+export * from './radio-group/index.js';
+export * from './search/index.js';
+export * from './select/index.js';
+export * from './slider/index.js';
+export * from './switch/index.js';
+export * from './textfield/index.js';
+export * from './toggle-group/index.js';
+export * from './tooltip/index.js';