@noxlovette/material 0.1.0

package/dist/components/table/Table.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { TableProps } from './types.js';
+/**
+ * Primitive root element for building MD3-styled data tables.
+ * Compose with TableHead, TableBody, TableFoot, TableRow, TableCell, and TableHeader.
+ */
+declare const Table: import("svelte").Component<TableProps, {}, "">;
+type Table = ReturnType<typeof Table>;
+export default Table;

package/dist/components/table/TableBody.svelte

@@ -0,0 +1,17 @@
+<!--
+@component
+Wraps the data rows of a Table.
+-->
+<script lang="ts">
+  import type { TableBodyProps } from './types.js';
+  import { table } from './theme.js';
+  import clsx from 'clsx';
+
+  let { children, class: className, ...restProps }: TableBodyProps = $props();
+
+  const { body } = table();
+</script>
+
+<tbody class={body({ class: clsx(className) })} {...restProps}>
+  {@render children()}
+</tbody>

package/dist/components/table/TableBody.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { TableBodyProps } from './types.js';
+/** Wraps the data rows of a Table. */
+declare const TableBody: import("svelte").Component<TableBodyProps, {}, "">;
+type TableBody = ReturnType<typeof TableBody>;
+export default TableBody;

package/dist/components/table/TableCell.svelte

@@ -0,0 +1,24 @@
+<!--
+@component
+A data cell (`<td>`). Use `numeric` for right-aligned tabular numbers,
+or `align` for explicit alignment control.
+-->
+<script lang="ts">
+  import type { TableCellProps } from './types.js';
+  import { table } from './theme.js';
+  import clsx from 'clsx';
+
+  let {
+    children,
+    numeric = false,
+    align,
+    class: className,
+    ...restProps
+  }: TableCellProps = $props();
+
+  const { cell } = $derived(table({ numeric, align }));
+</script>
+
+<td class={cell({ class: clsx(className) })} {...restProps}>
+  {@render children?.()}
+</td>

package/dist/components/table/TableCell.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { TableCellProps } from './types.js';
+/**
+ * A data cell (`<td>`). Use `numeric` for right-aligned tabular numbers,
+ * or `align` for explicit alignment control.
+ */
+declare const TableCell: import("svelte").Component<TableCellProps, {}, "">;
+type TableCell = ReturnType<typeof TableCell>;
+export default TableCell;

package/dist/components/table/TableFoot.svelte

@@ -0,0 +1,17 @@
+<!--
+@component
+Wraps the footer rows of a Table, separated from the body by a top border.
+-->
+<script lang="ts">
+  import type { TableFootProps } from './types.js';
+  import { table } from './theme.js';
+  import clsx from 'clsx';
+
+  let { children, class: className, ...restProps }: TableFootProps = $props();
+
+  const { foot } = table();
+</script>
+
+<tfoot class={foot({ class: clsx(className) })} {...restProps}>
+  {@render children()}
+</tfoot>

package/dist/components/table/TableFoot.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { TableFootProps } from './types.js';
+/** Wraps the footer rows of a Table, separated from the body by a top border. */
+declare const TableFoot: import("svelte").Component<TableFootProps, {}, "">;
+type TableFoot = ReturnType<typeof TableFoot>;
+export default TableFoot;

package/dist/components/table/TableHead.svelte

@@ -0,0 +1,18 @@
+<!--
+@component
+Wraps the header rows of a Table. Use `sticky` to pin the header when the
+table is inside a scrollable container.
+-->
+<script lang="ts">
+  import type { TableHeadProps } from './types.js';
+  import { table } from './theme.js';
+  import clsx from 'clsx';
+
+  let { children, sticky = false, class: className, ...restProps }: TableHeadProps = $props();
+
+  const { head } = $derived(table({ sticky }));
+</script>
+
+<thead class={head({ class: clsx(className) })} {...restProps}>
+  {@render children()}
+</thead>

package/dist/components/table/TableHead.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { TableHeadProps } from './types.js';
+/**
+ * Wraps the header rows of a Table. Use `sticky` to pin the header when the
+ * table is inside a scrollable container.
+ */
+declare const TableHead: import("svelte").Component<TableHeadProps, {}, "">;
+type TableHead = ReturnType<typeof TableHead>;
+export default TableHead;

package/dist/components/table/TableHeader.svelte

@@ -0,0 +1,43 @@
+<!--
+@component
+A header cell (`<th>`). Supports sort indicators via `sortable`, `sorted`,
+and `sortDirection` props. Defaults to `scope="col"`.
+-->
+<script lang="ts">
+  import type { TableHeaderProps } from './types.js';
+  import { table } from './theme.js';
+  import { Icon } from '../../utils/index.js';
+  import clsx from 'clsx';
+
+  let {
+    children,
+    numeric = false,
+    align,
+    sortable = false,
+    sorted = false,
+    sortDirection = 'asc',
+    scope = 'col',
+    class: className,
+    ...restProps
+  }: TableHeaderProps = $props();
+
+  const { header } = $derived(table({ numeric, align, sortable, sorted }));
+</script>
+
+<th {scope} class={header({ class: clsx(className) })} {...restProps}>
+  <span class="inline-flex items-center gap-1">
+    {@render children?.()}
+    {#if sortable}
+      <span
+        class={[
+          'transition-[opacity,transform] duration-200',
+          sorted ? 'opacity-100' : 'opacity-0 group-hover:opacity-40',
+          sortDirection === 'desc' ? 'rotate-180' : 'rotate-0'
+        ].join(' ')}
+        aria-hidden="true"
+      >
+        <Icon name="arrow_upward" class="size-[18px] text-[18px]" />
+      </span>
+    {/if}
+  </span>
+</th>

package/dist/components/table/TableHeader.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { TableHeaderProps } from './types.js';
+/**
+ * A header cell (`<th>`). Supports sort indicators via `sortable`, `sorted`,
+ * and `sortDirection` props. Defaults to `scope="col"`.
+ */
+declare const TableHeader: import("svelte").Component<TableHeaderProps, {}, "">;
+type TableHeader = ReturnType<typeof TableHeader>;
+export default TableHeader;

package/dist/components/table/TableRow.svelte

@@ -0,0 +1,24 @@
+<!--
+@component
+A table row. Use `selected` to highlight with secondary-container color,
+and `hoverable` to show a hover background (e.g. for clickable rows).
+-->
+<script lang="ts">
+  import type { TableRowProps } from './types.js';
+  import { table } from './theme.js';
+  import clsx from 'clsx';
+
+  let {
+    children,
+    selected = false,
+    hoverable = false,
+    class: className,
+    ...restProps
+  }: TableRowProps = $props();
+
+  const { row } = $derived(table({ selected, hoverable }));
+</script>
+
+<tr class={row({ class: clsx(className) })} {...restProps}>
+  {@render children()}
+</tr>

package/dist/components/table/TableRow.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { TableRowProps } from './types.js';
+/**
+ * A table row. Use `selected` to highlight with secondary-container color,
+ * and `hoverable` to show a hover background (e.g. for clickable rows).
+ */
+declare const TableRow: import("svelte").Component<TableRowProps, {}, "">;
+type TableRow = ReturnType<typeof TableRow>;
+export default TableRow;

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

@@ -0,0 +1,9 @@
+export * from './theme.js';
+export * from './types.js';
+export { default as Table } from './Table.svelte';
+export { default as TableBody } from './TableBody.svelte';
+export { default as TableCell } from './TableCell.svelte';
+export { default as TableFoot } from './TableFoot.svelte';
+export { default as TableHead } from './TableHead.svelte';
+export { default as TableHeader } from './TableHeader.svelte';
+export { default as TableRow } from './TableRow.svelte';

package/dist/components/table/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 Table } from './Table.svelte';
+export { default as TableBody } from './TableBody.svelte';
+export { default as TableCell } from './TableCell.svelte';
+export { default as TableFoot } from './TableFoot.svelte';
+export { default as TableHead } from './TableHead.svelte';
+export { default as TableHeader } from './TableHeader.svelte';
+export { default as TableRow } from './TableRow.svelte';

package/dist/components/table/theme.d.ts

@@ -0,0 +1,165 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const table: import("tailwind-variants").TVReturnType<{
+    hoverable: {
+        true: {
+            row: string;
+        };
+    };
+    selected: {
+        true: {
+            row: string;
+        };
+    };
+    numeric: {
+        true: {
+            cell: string;
+            header: string;
+        };
+    };
+    align: {
+        left: {
+            cell: string;
+            header: string;
+        };
+        center: {
+            cell: string;
+            header: string;
+        };
+        right: {
+            cell: string;
+            header: string;
+        };
+    };
+    sortable: {
+        true: {
+            header: string;
+        };
+    };
+    sorted: {
+        true: {
+            header: string;
+        };
+    };
+    sticky: {
+        true: {
+            head: string;
+        };
+    };
+}, {
+    root: string;
+    head: string;
+    body: string;
+    foot: string;
+    row: string;
+    cell: string;
+    header: string;
+}, undefined, {
+    hoverable: {
+        true: {
+            row: string;
+        };
+    };
+    selected: {
+        true: {
+            row: string;
+        };
+    };
+    numeric: {
+        true: {
+            cell: string;
+            header: string;
+        };
+    };
+    align: {
+        left: {
+            cell: string;
+            header: string;
+        };
+        center: {
+            cell: string;
+            header: string;
+        };
+        right: {
+            cell: string;
+            header: string;
+        };
+    };
+    sortable: {
+        true: {
+            header: string;
+        };
+    };
+    sorted: {
+        true: {
+            header: string;
+        };
+    };
+    sticky: {
+        true: {
+            head: string;
+        };
+    };
+}, {
+    root: string;
+    head: string;
+    body: string;
+    foot: string;
+    row: string;
+    cell: string;
+    header: string;
+}, import("tailwind-variants").TVReturnType<{
+    hoverable: {
+        true: {
+            row: string;
+        };
+    };
+    selected: {
+        true: {
+            row: string;
+        };
+    };
+    numeric: {
+        true: {
+            cell: string;
+            header: string;
+        };
+    };
+    align: {
+        left: {
+            cell: string;
+            header: string;
+        };
+        center: {
+            cell: string;
+            header: string;
+        };
+        right: {
+            cell: string;
+            header: string;
+        };
+    };
+    sortable: {
+        true: {
+            header: string;
+        };
+    };
+    sorted: {
+        true: {
+            header: string;
+        };
+    };
+    sticky: {
+        true: {
+            head: string;
+        };
+    };
+}, {
+    root: string;
+    head: string;
+    body: string;
+    foot: string;
+    row: string;
+    cell: string;
+    header: string;
+}, undefined, unknown, unknown, undefined>>;
+export type TableVariants = VariantProps<typeof table>;

package/dist/components/table/theme.js

@@ -0,0 +1,50 @@
+import { tv } from 'tailwind-variants';
+export const table = tv({
+    slots: {
+        root: 'w-full border-collapse text-left md-sys-typescale-body-medium text-md-sys-color-on-surface',
+        head: '',
+        body: '[&_tr:last-child]:border-b-0',
+        foot: 'border-t border-md-sys-color-outline-variant',
+        row: 'border-b border-md-sys-color-outline-variant transition-colors',
+        cell: 'px-4 py-3 align-middle',
+        header: 'px-4 py-4 align-middle md-sys-typescale-label-large text-md-sys-color-on-surface font-medium whitespace-nowrap'
+    },
+    variants: {
+        hoverable: {
+            true: {
+                row: 'hover:bg-md-sys-color-on-surface/8 cursor-pointer'
+            }
+        },
+        selected: {
+            true: {
+                row: 'bg-md-sys-color-secondary-container text-md-sys-color-on-secondary-container'
+            }
+        },
+        numeric: {
+            true: {
+                cell: 'text-right tabular-nums',
+                header: 'text-right'
+            }
+        },
+        align: {
+            left: { cell: 'text-left', header: 'text-left' },
+            center: { cell: 'text-center', header: 'text-center' },
+            right: { cell: 'text-right', header: 'text-right' }
+        },
+        sortable: {
+            true: {
+                header: 'group cursor-pointer select-none hover:bg-md-sys-color-on-surface/8'
+            }
+        },
+        sorted: {
+            true: {
+                header: 'text-md-sys-color-primary'
+            }
+        },
+        sticky: {
+            true: {
+                head: 'sticky top-0 z-10 bg-md-sys-color-surface-container-high shadow-[0_1px_0_0_var(--md-sys-color-outline-variant)]'
+            }
+        }
+    }
+});

package/dist/components/table/types.d.ts

@@ -0,0 +1,44 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes, HTMLTableAttributes, HTMLTdAttributes, HTMLThAttributes } from 'svelte/elements';
+import type { TableVariants } from './theme.js';
+export type TableProps = HTMLTableAttributes & {
+    children: Snippet;
+    /** Render with rounded corners and a ring border. */
+    rounded?: boolean;
+};
+export type TableHeadProps = HTMLAttributes<HTMLTableSectionElement> & {
+    children: Snippet;
+    /** Stick the header to the top of a scrollable container. */
+    sticky?: boolean;
+};
+export type TableBodyProps = HTMLAttributes<HTMLTableSectionElement> & {
+    children: Snippet;
+};
+export type TableFootProps = HTMLAttributes<HTMLTableSectionElement> & {
+    children: Snippet;
+};
+export type TableRowProps = HTMLAttributes<HTMLTableRowElement> & {
+    children: Snippet;
+    /** Highlight the row with the secondary-container color. */
+    selected?: boolean;
+    /** Show a hover background on the row. */
+    hoverable?: boolean;
+};
+export type TableCellProps = HTMLTdAttributes & {
+    children?: Snippet;
+    /** Right-align with tabular numerals. */
+    numeric?: boolean;
+    align?: TableVariants['align'];
+};
+export type TableHeaderProps = HTMLThAttributes & {
+    children?: Snippet;
+    /** Right-align with tabular numerals. */
+    numeric?: boolean;
+    align?: TableVariants['align'];
+    /** Show a sort indicator icon. */
+    sortable?: boolean;
+    /** Whether this column is the active sort column. */
+    sorted?: boolean;
+    /** Sort direction indicator shown when `sorted` is true. */
+    sortDirection?: 'asc' | 'desc';
+};

package/dist/components/table/types.js

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

package/dist/components/time/TimeField.svelte

@@ -0,0 +1,111 @@
+<!--
+@component
+TimeField component provides a text input that opens a Timepicker overlay when interacted with.
+It combines a Material 3 Textfield with a TimepickerInput for intuitive time selection.
+
+@see https://m3.material.io/components/time-pickers/overview
+-->
+<script lang="ts">
+  import type { HTMLInputAttributes } from 'svelte/elements';
+  import Textfield from '../forms/textfield/Textfield.svelte';
+  import TimepickerInput from './TimepickerInput.svelte';
+  import { clickOutside, positionFloating } from '../../actions/index.js';
+  import { enterExit } from '../../animation/enterExit.js';
+  import { easeEmphasizedDecel, easeEmphasizedAccel } from '../../animation/easing.js';
+
+  let {
+    label = 'Время',
+    value = $bindable(),
+    required = false,
+    disabled = false,
+    error = false,
+    datePickerTitle = 'Pick date',
+    name,
+    leadingIconProps,
+    ...restProps
+  }: {
+    /** The label for the text field. */
+    label?: string;
+    /** The current time value (bindable). */
+    value?: string;
+    /** The name for the hidden input submitted with the form. */
+    name?: string;
+    /** Whether the field is required for form submission. */
+    required?: boolean;
+    /** Whether the field is disabled. */
+    disabled?: boolean;
+    /** Whether the field is in an error state. */
+    error?: boolean;
+    /** Title for the picker overlay. */
+    datePickerTitle?: string;
+    /** Props for the leading icon. */
+    leadingIconProps?: any;
+  } & HTMLInputAttributes = $props();
+
+  const id = $props.id();
+
+  let picker = $state(false);
+  let anchorEl = $state<HTMLDivElement>();
+</script>
+
+<div
+  class="relative w-full"
+  bind:this={anchorEl}
+  use:clickOutside={() => {
+    picker = false;
+  }}
+>
+  <Textfield
+    id={id as string}
+    {label}
+    {value}
+    {name}
+    {disabled}
+    {error}
+    {leadingIconProps}
+    class="pointer-events-none"
+    trailingIconProps={{ name: 'timer' }}
+    trailingOnClick={() => !disabled && (picker = !picker)}
+    {...restProps as any}
+  >
+    {#snippet supportingText()}
+      ЧЧ-ММ
+    {/snippet}
+  </Textfield>
+
+  <button
+    {disabled}
+    title="time-overlay"
+    class="absolute inset-0 cursor-pointer disabled:cursor-not-allowed"
+    type="button"
+    onclick={() => !disabled && (picker = !picker)}
+    data-cy="calendar-time-toggle"
+  ></button>
+
+  {#if picker}
+    <div
+      class="picker"
+      use:positionFloating={{ anchor: anchorEl, offset: 12 }}
+      in:enterExit={{
+        duration: 200,
+        easing: easeEmphasizedDecel,
+        mode: 'scale'
+      }}
+      out:enterExit={{
+        duration: 150,
+        easing: easeEmphasizedAccel,
+        mode: 'scale'
+      }}
+      style="transform-origin: top center;"
+    >
+      <TimepickerInput time={value} close={() => (picker = false)} setTime={(t) => (value = t)} />
+    </div>
+  {/if}
+</div>
+
+<style>
+  .picker {
+    z-index: 1;
+    position: absolute;
+  }
+</style>

package/dist/components/time/TimeField.svelte.d.ts

@@ -0,0 +1,28 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+type $$ComponentProps = {
+    /** The label for the text field. */
+    label?: string;
+    /** The current time value (bindable). */
+    value?: string;
+    /** The name for the hidden input submitted with the form. */
+    name?: string;
+    /** Whether the field is required for form submission. */
+    required?: boolean;
+    /** Whether the field is disabled. */
+    disabled?: boolean;
+    /** Whether the field is in an error state. */
+    error?: boolean;
+    /** Title for the picker overlay. */
+    datePickerTitle?: string;
+    /** Props for the leading icon. */
+    leadingIconProps?: any;
+} & HTMLInputAttributes;
+/**
+ * TimeField component provides a text input that opens a Timepicker overlay when interacted with.
+ * It combines a Material 3 Textfield with a TimepickerInput for intuitive time selection.
+ *
+ * @see https://m3.material.io/components/time-pickers/overview
+ */
+declare const TimeField: import("svelte").Component<$$ComponentProps, {}, "value">;
+type TimeField = ReturnType<typeof TimeField>;
+export default TimeField;