@noxlovette/material 0.1.0

package/dist/components/containers/stack/HStack.svelte

@@ -0,0 +1,23 @@
+<!--
+@component
+HStack is a horizontal flex container.
+-->
+<script lang="ts">
+  import clsx from 'clsx';
+  import { stack } from './theme.js';
+  import type { StackProps } from './types.js';
+
+  let {
+    children,
+    type = 'hstack',
+    size = 'w',
+    class: className,
+    gap = 'md'
+  }: StackProps = $props();
+
+  const styling = $derived(stack({ type, size, gap }));
+</script>
+
+<div class={clsx(styling, className)}>
+  {@render children()}
+</div>

package/dist/components/containers/stack/HStack.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { StackProps } from './types.js';
+/** HStack is a horizontal flex container. */
+declare const HStack: import("svelte").Component<StackProps, {}, "">;
+type HStack = ReturnType<typeof HStack>;
+export default HStack;

package/dist/components/containers/stack/VStack.svelte

@@ -0,0 +1,23 @@
+<!--
+@component
+VStack is a vertical flex container.
+-->
+<script lang="ts">
+  import clsx from 'clsx';
+  import { stack } from './theme.js';
+  import type { StackProps } from './types.js';
+
+  let {
+    children,
+    type = 'vstack',
+    size = 'h',
+    class: className,
+    gap = 'md'
+  }: StackProps = $props();
+
+  const styling = $derived(stack({ type, size, gap }));
+</script>
+
+<div class={clsx(styling, className)}>
+  {@render children()}
+</div>

package/dist/components/containers/stack/VStack.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { StackProps } from './types.js';
+/** VStack is a vertical flex container. */
+declare const VStack: import("svelte").Component<StackProps, {}, "">;
+type VStack = ReturnType<typeof VStack>;
+export default VStack;

package/dist/components/containers/stack/index.d.ts

@@ -0,0 +1,4 @@
+export * from './theme.js';
+export * from './types.js';
+export { default as HStack } from './HStack.svelte';
+export { default as VStack } from './VStack.svelte';

package/dist/components/containers/stack/index.js

@@ -0,0 +1,7 @@
+// 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 HStack } from './HStack.svelte';
+export { default as VStack } from './VStack.svelte';

package/dist/components/containers/stack/theme.d.ts

@@ -0,0 +1,60 @@
+import { type VariantProps } from 'tailwind-variants';
+export type StackVariants = VariantProps<typeof stack>;
+export declare const stack: import("tailwind-variants").TVReturnType<{
+    type: {
+        vstack: string;
+        hstack: string;
+        vFlip: string;
+        hFlip: string;
+        zstaack: string;
+    };
+    size: {
+        full: string;
+        w: string;
+        h: string;
+    };
+    gap: {
+        md: string;
+        sm: string;
+        lg: string;
+        none: string;
+    };
+}, undefined, "flex relative", {
+    type: {
+        vstack: string;
+        hstack: string;
+        vFlip: string;
+        hFlip: string;
+        zstaack: string;
+    };
+    size: {
+        full: string;
+        w: string;
+        h: string;
+    };
+    gap: {
+        md: string;
+        sm: string;
+        lg: string;
+        none: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    type: {
+        vstack: string;
+        hstack: string;
+        vFlip: string;
+        hFlip: string;
+        zstaack: string;
+    };
+    size: {
+        full: string;
+        w: string;
+        h: string;
+    };
+    gap: {
+        md: string;
+        sm: string;
+        lg: string;
+        none: string;
+    };
+}, undefined, "flex relative", unknown, unknown, undefined>>;

package/dist/components/containers/stack/theme.js

@@ -0,0 +1,24 @@
+import { tv } from 'tailwind-variants';
+export const stack = tv({
+    base: 'flex relative',
+    variants: {
+        type: {
+            vstack: 'flex-row',
+            hstack: 'flex-col',
+            vFlip: 'md:flex-row flex-col',
+            hFlip: 'md:flex-col flex-row',
+            zstaack: 'flex'
+        },
+        size: {
+            full: 'size-full',
+            w: 'w-full',
+            h: 'h-full'
+        },
+        gap: {
+            md: 'gap-3',
+            sm: 'gap-px',
+            lg: 'gap-6',
+            none: 'gap-0'
+        }
+    }
+});

package/dist/components/containers/stack/types.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { StackVariants } from './theme.js';
+/**
+ * Props for the Stack components (HStack and VStack).
+ */
+export type StackProps = StackVariants & HTMLAttributes<HTMLDivElement> & {
+    /**
+     * The content to be stacked.
+     */
+    children: Snippet;
+};

package/dist/components/containers/stack/types.js

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

package/dist/components/date/DateField.svelte

@@ -0,0 +1,155 @@
+<!--
+@component
+DateField is a text field that allows users to enter a date or pick it from a calendar.
+
+@see https://m3.material.io/components/date-pickers/guidelines
+-->
+<script lang="ts">
+  import { DatePicker } from 'bits-ui';
+  import ButtonIcon from '../buttons/ButtonIcon.svelte';
+  import Icon from '../../utils/icon/Icon.svelte';
+  import Layer from '../../utils/Layer.svelte';
+  import type { DateFieldProps } from './types';
+  import { dateField } from './theme';
+
+  let {
+    value = $bindable(),
+    label,
+    id,
+    required = false,
+    disabled = false,
+    error = false,
+    supportingText,
+    name,
+    leadingIconProps
+  }: DateFieldProps & { leadingIconProps?: any } = $props();
+
+  const cls = $derived(dateField({ disabled, error }));
+</script>
+
+<DatePicker.Root
+  bind:value
+  weekStartsOn={1}
+  {required}
+  {disabled}
+  locale="ru"
+  weekdayFormat="short"
+  fixedWeeks
+>
+  <div class="relative w-full">
+    <div class={cls.base()} data-invalid={error || undefined}>
+      {#if leadingIconProps}
+        <Icon class={cls.leadingIcon()} {...leadingIconProps} />
+      {/if}
+
+      <div class={cls.inputWrapper()}>
+        <DatePicker.Input class={cls.input()} {name} id={id ?? undefined}>
+          {#snippet children({ segments })}
+            <div class="flex w-full flex-col pt-4 tabular-nums">
+              <div class="flex items-center justify-between">
+                <div class="flex">
+                  {#each segments as { part, value }}
+                    {#if part === 'literal'}
+                      <DatePicker.Segment
+                        {part}
+                        class="text-md-sys-color-on-surface-variant px-0.5 select-none first:pl-0"
+                      >
+                        {value}
+                      </DatePicker.Segment>
+                    {:else}
+                      <DatePicker.Segment
+                        {part}
+                        class="text-md-sys-color-on-surface hover:bg-md-sys-color-on-surface/8 focus:bg-md-sys-color-primary-container focus:text-md-sys-color-on-primary-container focus:outline-md-sys-color-primary
+											   aria-[valuetext=Empty]:text-md-sys-color-on-surface-variant cursor-default
+											   rounded-xs
+											   px-1
+											   py-0.5
+											   transition-colors
+											   duration-100 select-none focus:outline-2
+											   focus-visible:ring-0! focus-visible:ring-offset-0!"
+                      >
+                        {value}
+                      </DatePicker.Segment>
+                    {/if}
+                  {/each}
+                </div>
+              </div>
+            </div>
+          {/snippet}
+        </DatePicker.Input>
+
+        <label class={cls.label()} for={id}>
+          {label}{#if required}<span class={cls.requiredAsterisk()} aria-hidden="true">*</span>{/if}
+        </label>
+      </div>
+
+      <DatePicker.Trigger class={cls.trailingIcon({ class: 'flex items-center justify-center' })}>
+        <Icon name="calendar_month" />
+      </DatePicker.Trigger>
+    </div>
+
+    {#if supportingText}
+      <div class={cls.supportingText()}>
+        <p>{@render supportingText()}</p>
+      </div>
+    {/if}
+  </div>
+  <DatePicker.Portal>
+    <DatePicker.Content sideOffset={6} class="z-[100]">
+      <DatePicker.Calendar
+        class="bg-md-sys-color-surface-container-high shadow-elevation-3 h-104 w-90 rounded-lg p-6"
+      >
+        {#snippet children({ months, weekdays })}
+          <DatePicker.Header
+            class="text-md-sys-color-on-surface-variant z-10 flex w-full items-center justify-between pb-7.5"
+          >
+            <DatePicker.PrevButton>
+              <ButtonIcon iconProps={{ name: 'chevron_left' }} />
+            </DatePicker.PrevButton>
+            <DatePicker.Heading class="md-sys-typescale-label-large" />
+            <DatePicker.NextButton>
+              <ButtonIcon iconProps={{ name: 'chevron_right' }} />
+            </DatePicker.NextButton>
+          </DatePicker.Header>
+
+          {#each months as month}
+            <DatePicker.Grid class="w-full border-collapse select-none">
+              <DatePicker.GridHead>
+                <DatePicker.GridRow class="flex w-full justify-between">
+                  {#each weekdays as day}
+                    <DatePicker.HeadCell
+                      class="md-sys-typescale-label-large text-md-sys-color-on-surface-variant size-10"
+                    >
+                      {day}
+                    </DatePicker.HeadCell>
+                  {/each}
+                </DatePicker.GridRow>
+              </DatePicker.GridHead>
+              <DatePicker.GridBody>
+                {#each month.weeks as weekDates}
+                  <DatePicker.GridRow class="flex w-full justify-between">
+                    {#each weekDates as date}
+                      <DatePicker.Cell
+                        {date}
+                        month={month.value}
+                        class="md-sys-typescale-body-large text-center"
+                      >
+                        <DatePicker.Day
+                          class="group data-disabled:text-md-sys-color-on-surface/38 data-selected:bg-md-sys-color-primary data-selected:text-md-sys-color-on-primary data-unavailable:text-md-sys-color-on-surface/38 relative flex size-10 items-center justify-center rounded-full bg-transparent p-0 data-disabled:cursor-not-allowed data-outside-month:pointer-events-none data-unavailable:line-through"
+                        >
+                          <Layer />
+
+                          {date.day}
+                        </DatePicker.Day>
+                      </DatePicker.Cell>
+                    {/each}
+                  </DatePicker.GridRow>
+                {/each}
+              </DatePicker.GridBody>
+            </DatePicker.Grid>
+          {/each}
+        {/snippet}
+      </DatePicker.Calendar>
+    </DatePicker.Content>
+  </DatePicker.Portal>
+</DatePicker.Root>

package/dist/components/date/DateField.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { DateFieldProps } from './types';
+type $$ComponentProps = DateFieldProps & {
+    leadingIconProps?: any;
+};
+/**
+ * DateField is a text field that allows users to enter a date or pick it from a calendar.
+ *
+ * @see https://m3.material.io/components/date-pickers/guidelines
+ */
+declare const DateField: import("svelte").Component<$$ComponentProps, {}, "value">;
+type DateField = ReturnType<typeof DateField>;
+export default DateField;

package/dist/components/date/DateRangeField.svelte

@@ -0,0 +1,211 @@
+<!--
+@component
+DateRangeField lets users enter or pick a date range (start + end) via two
+segment inputs and a shared calendar popover.
+
+@see https://m3.material.io/components/date-pickers/guidelines
+-->
+<script lang="ts">
+  import { DateRangePicker } from 'bits-ui';
+  import ButtonIcon from '../buttons/ButtonIcon.svelte';
+  import Icon from '../../utils/icon/Icon.svelte';
+  import Layer from '../../utils/Layer.svelte';
+  import type { DateRangeFieldProps } from './types';
+  import { dateRangeField } from './theme';
+
+  let {
+    value = $bindable(),
+    label,
+    startLabel = 'Start',
+    endLabel = 'End',
+    id,
+    required = false,
+    disabled = false,
+    error = false,
+    supportingText,
+    name,
+    leadingIconProps
+  }: DateRangeFieldProps & { leadingIconProps?: any } = $props();
+
+  const cls = $derived(dateRangeField({ disabled, error }));
+</script>
+
+<DateRangePicker.Root
+  bind:value
+  weekStartsOn={1}
+  {required}
+  {disabled}
+  locale="ru"
+  weekdayFormat="short"
+  fixedWeeks
+  closeOnRangeSelect
+>
+  <div class="relative w-full">
+    <div class={cls.base()} data-invalid={error || undefined}>
+      {#if leadingIconProps}
+        <Icon class={cls.leadingIcon()} {...leadingIconProps} />
+      {/if}
+
+      <div class={cls.inputWrapper()}>
+        <!-- Start date input -->
+        <DateRangePicker.Input type="start" class={cls.input()} {name} id={id ?? undefined}>
+          {#snippet children({ segments })}
+            <div class="flex w-full flex-col pt-4 tabular-nums">
+              <div class="flex">
+                {#each segments as { part, value: segVal }}
+                  {#if part === 'literal'}
+                    <DateRangePicker.Segment
+                      {part}
+                      class="text-md-sys-color-on-surface-variant px-0.5 select-none first:pl-0"
+                    >
+                      {segVal}
+                    </DateRangePicker.Segment>
+                  {:else}
+                    <DateRangePicker.Segment
+                      {part}
+                      class="text-md-sys-color-on-surface hover:bg-md-sys-color-on-surface/8 focus:bg-md-sys-color-primary-container focus:text-md-sys-color-on-primary-container focus:outline-md-sys-color-primary
+										   aria-[valuetext=Empty]:text-md-sys-color-on-surface-variant cursor-default rounded-xs
+										   px-1
+										   py-0.5
+										   transition-colors
+										   duration-100 select-none focus:outline-2
+										   focus-visible:ring-0! focus-visible:ring-offset-0!"
+                    >
+                      {segVal}
+                    </DateRangePicker.Segment>
+                  {/if}
+                {/each}
+              </div>
+            </div>
+          {/snippet}
+        </DateRangePicker.Input>
+
+        <label class={cls.label()} for={id}>
+          {startLabel ?? label}{#if required}<span class={cls.requiredAsterisk()} aria-hidden="true"
+              >*</span
+            >{/if}
+        </label>
+      </div>
+
+      <span class={cls.separator()}>–</span>
+
+      <div class={cls.inputWrapper()}>
+        <!-- End date input -->
+        <DateRangePicker.Input type="end" class={cls.input()} id={id ? `${id}-end` : undefined}>
+          {#snippet children({ segments })}
+            <div class="flex w-full flex-col pt-4 tabular-nums">
+              <div class="flex">
+                {#each segments as { part, value: segVal }}
+                  {#if part === 'literal'}
+                    <DateRangePicker.Segment
+                      {part}
+                      class="text-md-sys-color-on-surface-variant px-0.5 select-none first:pl-0"
+                    >
+                      {segVal}
+                    </DateRangePicker.Segment>
+                  {:else}
+                    <DateRangePicker.Segment
+                      {part}
+                      class="text-md-sys-color-on-surface hover:bg-md-sys-color-on-surface/8 focus:bg-md-sys-color-primary-container focus:text-md-sys-color-on-primary-container focus:outline-md-sys-color-primary
+										   aria-[valuetext=Empty]:text-md-sys-color-on-surface-variant cursor-default rounded-xs
+										   px-1
+										   py-0.5
+										   transition-colors
+										   duration-100 select-none focus:outline-2
+										   focus-visible:ring-0! focus-visible:ring-offset-0!"
+                    >
+                      {segVal}
+                    </DateRangePicker.Segment>
+                  {/if}
+                {/each}
+              </div>
+            </div>
+          {/snippet}
+        </DateRangePicker.Input>
+
+        <label class={cls.label()} for={id ? `${id}-end` : undefined}>
+          {endLabel ?? label}{#if required}<span class={cls.requiredAsterisk()} aria-hidden="true"
+              >*</span
+            >{/if}
+        </label>
+      </div>
+
+      <DateRangePicker.Trigger
+        class={cls.trailingIcon({ class: 'flex items-center justify-center' })}
+      >
+        <Icon name="calendar_month" />
+      </DateRangePicker.Trigger>
+    </div>
+
+    {#if supportingText}
+      <div class={cls.supportingText()}>
+        <p>{@render supportingText()}</p>
+      </div>
+    {/if}
+  </div>
+
+  <DateRangePicker.Content sideOffset={6} class="z-[100]">
+    <DateRangePicker.Calendar
+      class="bg-md-sys-color-surface-container-high shadow-elevation-3 h-104 w-90 rounded-lg p-6"
+    >
+      {#snippet children({ months, weekdays })}
+        <DateRangePicker.Header
+          class="text-md-sys-color-on-surface-variant z-10 flex w-full items-center justify-between pb-7.5"
+        >
+          <DateRangePicker.PrevButton>
+            <ButtonIcon iconProps={{ name: 'chevron_left' }} />
+          </DateRangePicker.PrevButton>
+          <DateRangePicker.Heading class="md-sys-typescale-label-large" />
+          <DateRangePicker.NextButton>
+            <ButtonIcon iconProps={{ name: 'chevron_right' }} />
+          </DateRangePicker.NextButton>
+        </DateRangePicker.Header>
+
+        {#each months as month}
+          <DateRangePicker.Grid class="w-full border-collapse select-none">
+            <DateRangePicker.GridHead>
+              <DateRangePicker.GridRow class="flex w-full justify-between">
+                {#each weekdays as day}
+                  <DateRangePicker.HeadCell
+                    class="md-sys-typescale-label-large text-md-sys-color-on-surface-variant size-10"
+                  >
+                    {day}
+                  </DateRangePicker.HeadCell>
+                {/each}
+              </DateRangePicker.GridRow>
+            </DateRangePicker.GridHead>
+            <DateRangePicker.GridBody>
+              {#each month.weeks as weekDates}
+                <DateRangePicker.GridRow class="flex w-full justify-between">
+                  {#each weekDates as date}
+                    <DateRangePicker.Cell
+                      {date}
+                      month={month.value}
+                      class="md-sys-typescale-body-large text-center"
+                    >
+                      <DateRangePicker.Day
+                        class="group data-disabled:text-md-sys-color-on-surface/38 data-highlighted:bg-md-sys-color-primary-container/20 data-range-end:bg-md-sys-color-primary data-range-end:text-md-sys-color-on-primary data-range-middle:bg-md-sys-color-primary-container/40 data-range-start:bg-md-sys-color-primary
+												   data-range-start:text-md-sys-color-on-primary data-selected:bg-md-sys-color-primary data-selected:text-md-sys-color-on-primary data-unavailable:text-md-sys-color-on-surface/38
+												   relative flex
+												   size-10 items-center
+												   justify-center rounded-full
+												   bg-transparent p-0
+												   transition-colors
+												   duration-100 data-disabled:cursor-not-allowed
+												   data-outside-month:pointer-events-none data-outside-month:opacity-0
+												   data-range-middle:rounded-none data-unavailable:line-through"
+                      >
+                        <Layer />
+                        {date.day}
+                      </DateRangePicker.Day>
+                    </DateRangePicker.Cell>
+                  {/each}
+                </DateRangePicker.GridRow>
+              {/each}
+            </DateRangePicker.GridBody>
+          </DateRangePicker.Grid>
+        {/each}
+      {/snippet}
+    </DateRangePicker.Calendar>
+  </DateRangePicker.Content>
+</DateRangePicker.Root>

package/dist/components/date/DateRangeField.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { DateRangeFieldProps } from './types';
+type $$ComponentProps = DateRangeFieldProps & {
+    leadingIconProps?: any;
+};
+/**
+ * DateRangeField lets users enter or pick a date range (start + end) via two
+ * segment inputs and a shared calendar popover.
+ *
+ * @see https://m3.material.io/components/date-pickers/guidelines
+ */
+declare const DateRangeField: import("svelte").Component<$$ComponentProps, {}, "value">;
+type DateRangeField = ReturnType<typeof DateRangeField>;
+export default DateRangeField;

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

@@ -0,0 +1,4 @@
+export * from './theme.js';
+export * from './types.js';
+export { default as DateField } from './DateField.svelte';
+export { default as DateRangeField } from './DateRangeField.svelte';

package/dist/components/date/index.js

@@ -0,0 +1,7 @@
+// 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 DateField } from './DateField.svelte';
+export { default as DateRangeField } from './DateRangeField.svelte';