@noxlovette/material 0.1.0

package/dist/components/time/TimepickerInput.svelte

@@ -0,0 +1,75 @@
+<!--
+@component
+TimepickerInput component provides the internal UI for selecting hours and minutes.
+It follows the Material 3 design for time input pickers.
+
+@see https://m3.material.io/components/time-pickers/specs#66113b8d-698d-4ef3-9993-97992797666e
+-->
+<script lang="ts">
+  import { TimeField } from 'bits-ui';
+  import { parseTime } from '@internationalized/date';
+  import type { Time } from '@internationalized/date';
+  import { timepicker } from './theme.js';
+  import Button from '../buttons/Button.svelte';
+  import type { TimepickerProps } from './types.js';
+  import { ButtonIcon } from '../buttons/index.js';
+
+  const {
+    label = 'Введите время',
+    time = '09:41',
+    close,
+    setTime,
+    name = 'startTime'
+  }: TimepickerProps = $props();
+
+  const cls = timepicker();
+
+  let timeValue = $state<Time>(parseTime(time?.includes(':') ? time : '00:00'));
+
+  const output = $derived(
+    `${String(timeValue.hour).padStart(2, '0')}:${String(timeValue.minute).padStart(2, '0')}`
+  );
+</script>
+
+<div class={cls.base()}>
+  <div class={cls.headline()}>{label}</div>
+
+  <TimeField.Root bind:value={timeValue} granularity="minute" hourCycle={24}>
+    <TimeField.Input {name}>
+      {#snippet children({ segments })}
+        <div class={cls.clockDiv()}>
+          {#each segments as { part, value }}
+            {#if part === 'literal'}
+              <span class={cls.fieldSeparator()}>{value}</span>
+            {:else if part === 'hour' || part === 'minute'}
+              <div class={cls.inputWrapper()}>
+                <TimeField.Segment {part} class={cls.timeInput()}>
+                  {value}
+                </TimeField.Segment>
+                <p class={cls.timeInputSupportingText()}>
+                  {part === 'hour' ? 'Часы' : 'Минуты'}
+                </p>
+              </div>
+            {/if}
+          {/each}
+        </div>
+      {/snippet}
+    </TimeField.Input>
+  </TimeField.Root>
+
+  <div class={cls.buttonDiv()}>
+    <ButtonIcon iconProps={{ name: 'schedule' }} />
+    <div>
+      <Button variant="text" type="button" onclick={() => close()}>Отмена</Button>
+      <Button
+        variant="text"
+        type="button"
+        onclick={() => {
+          setTime(output);
+          close();
+        }}
+        data-cy="calendar-time-confirm">Готово</Button
+      >
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,10 @@
+import type { TimepickerProps } from './types.js';
+/**
+ * TimepickerInput component provides the internal UI for selecting hours and minutes.
+ * It follows the Material 3 design for time input pickers.
+ *
+ * @see https://m3.material.io/components/time-pickers/specs#66113b8d-698d-4ef3-9993-97992797666e
+ */
+declare const TimepickerInput: import("svelte").Component<TimepickerProps, {}, "">;
+type TimepickerInput = ReturnType<typeof TimepickerInput>;
+export default TimepickerInput;

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

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

package/dist/components/time/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 TimeField } from './TimeField.svelte';
+export { default as TimepickerInput } from './TimepickerInput.svelte';

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

@@ -0,0 +1,69 @@
+import { type VariantProps } from 'tailwind-variants';
+export type TimepickerVariants = VariantProps<typeof timepicker>;
+export declare const timepicker: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            headline?: import("tailwind-merge").ClassNameValue;
+            inputWrapper?: import("tailwind-merge").ClassNameValue;
+            clockDiv?: import("tailwind-merge").ClassNameValue;
+            buttonDiv?: import("tailwind-merge").ClassNameValue;
+            fieldSeparator?: import("tailwind-merge").ClassNameValue;
+            timeInput?: import("tailwind-merge").ClassNameValue;
+            timeInputSupportingText?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            headline?: import("tailwind-merge").ClassNameValue;
+            inputWrapper?: import("tailwind-merge").ClassNameValue;
+            clockDiv?: import("tailwind-merge").ClassNameValue;
+            buttonDiv?: import("tailwind-merge").ClassNameValue;
+            fieldSeparator?: import("tailwind-merge").ClassNameValue;
+            timeInput?: import("tailwind-merge").ClassNameValue;
+            timeInputSupportingText?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    clockDiv: string;
+    buttonDiv: string;
+    headline: string;
+    inputWrapper: string;
+    fieldSeparator: string;
+    timeInput: string;
+    timeInputSupportingText: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            headline?: import("tailwind-merge").ClassNameValue;
+            inputWrapper?: import("tailwind-merge").ClassNameValue;
+            clockDiv?: import("tailwind-merge").ClassNameValue;
+            buttonDiv?: import("tailwind-merge").ClassNameValue;
+            fieldSeparator?: import("tailwind-merge").ClassNameValue;
+            timeInput?: import("tailwind-merge").ClassNameValue;
+            timeInputSupportingText?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    clockDiv: string;
+    buttonDiv: string;
+    headline: string;
+    inputWrapper: string;
+    fieldSeparator: string;
+    timeInput: string;
+    timeInputSupportingText: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    base: string;
+    clockDiv: string;
+    buttonDiv: string;
+    headline: string;
+    inputWrapper: string;
+    fieldSeparator: string;
+    timeInput: string;
+    timeInputSupportingText: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/components/time/theme.js

@@ -0,0 +1,13 @@
+import { tv } from 'tailwind-variants';
+export const timepicker = tv({
+    slots: {
+        base: 'bg-md-sys-color-surface-container-high shadow-elevation-3 rounded-xl max-w-fit p-6 group relative',
+        clockDiv: 'flex gap-2 mb-6 mt-5',
+        buttonDiv: 'items-center flex justify-between -mb-4 -mx-5',
+        headline: 'text-md-sys-color-on-surface-variant md-sys-typescale-label-medium',
+        inputWrapper: 'space-y-2',
+        fieldSeparator: 'text-md-sys-color-on-surface md-sys-typescale-display-large ',
+        timeInput: 'bg-md-sys-color-surface-container-highest rounded-sm outline outline-md-sys-color-outline w-24 h-18 md-sys-typescale-display-medium text-md-sys-color-on-surface hover:text-sys-color-on-surface state-layer before:bg-md-sys-color-on-surface/8 md-sys-state-focus-indicator inline-flex items-center justify-center cursor-text focus:text-md-sys-color-on-primary-container focus:outline-md-sys-color-primary focus:bg-md-sys-color-primary-container relative',
+        timeInputSupportingText: 'text-md-color-on-surface-variant md-sys-typescale-body-small'
+    }
+});

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

@@ -0,0 +1,34 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { TimepickerVariants } from './theme.js';
+/**
+ * Props for the TimepickerInput component.
+ * Follows Material 3 time picker specifications.
+ *
+ * @see https://m3.material.io/components/time-pickers/specs
+ */
+export type TimepickerProps = TimepickerVariants & HTMLAttributes<HTMLInputElement> & {
+    /**
+     * The label displayed at the top of the timepicker.
+     * @default 'Введите время'
+     */
+    label?: string;
+    /**
+     * The current time value in HH:MM format.
+     * @default '09:41'
+     */
+    time: string;
+    /**
+     * The name attribute for the hidden input field, used for form submission.
+     * @default 'startTime'
+     */
+    name?: string;
+    /**
+     * Callback function to close the timepicker overlay.
+     */
+    close: () => void;
+    /**
+     * Callback function to update the selected time.
+     * @param time The selected time string in HH:MM format.
+     */
+    setTime: (time: string) => void;
+};

package/dist/components/time/types.js

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

package/dist/components/toolbar/Toolbar.svelte

@@ -0,0 +1,26 @@
+<!--
+@component
+Toolbar provides a horizontal (or vertical) container for grouped actions.
+
+@see https://m3.material.io/components/toolbars
+-->
+<script lang="ts">
+  import { Toolbar } from 'bits-ui';
+  import clsx from 'clsx';
+  import { toolbar } from './theme.js';
+  import type { ToolbarProps } from './types.js';
+
+  let {
+    children,
+    orientation = 'horizontal',
+    loop = true,
+    class: className,
+    ...restProps
+  }: ToolbarProps = $props();
+
+  const cls = $derived(toolbar({ orientation }));
+</script>
+
+<Toolbar.Root {orientation} {loop} class={cls.root({ class: clsx(className) })} {...restProps}>
+  {@render children?.()}
+</Toolbar.Root>

package/dist/components/toolbar/Toolbar.svelte.d.ts

@@ -0,0 +1,10 @@
+import { Toolbar } from 'bits-ui';
+import type { ToolbarProps } from './types.js';
+/**
+ * Toolbar provides a horizontal (or vertical) container for grouped actions.
+ *
+ * @see https://m3.material.io/components/toolbars
+ */
+declare const Toolbar: import("svelte").Component<ToolbarProps, {}, "">;
+type Toolbar = ReturnType<typeof Toolbar>;
+export default Toolbar;

package/dist/components/toolbar/ToolbarButton.svelte

@@ -0,0 +1,25 @@
+<!--
+@component
+An action button within a Toolbar. Non-toggleable.
+-->
+<script lang="ts">
+  import { Toolbar } from 'bits-ui';
+  import clsx from 'clsx';
+  import { Icon, Layer } from '../../utils/index.js';
+  import { toolbarButton } from './theme.js';
+  import type { ToolbarButtonProps } from './types.js';
+
+  let {
+    iconProps,
+    disabled = false,
+    class: className,
+    ...restProps
+  }: ToolbarButtonProps = $props();
+
+  const { base, icon } = toolbarButton();
+</script>
+
+<Toolbar.Button {disabled} class={base({ class: clsx(className) })} {...restProps}>
+  <Icon {...iconProps} class={icon()} />
+  <Layer />
+</Toolbar.Button>

package/dist/components/toolbar/ToolbarButton.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { ToolbarButtonProps } from './types.js';
+/** An action button within a Toolbar. Non-toggleable. */
+declare const ToolbarButton: import("svelte").Component<ToolbarButtonProps, {}, "">;
+type ToolbarButton = ReturnType<typeof ToolbarButton>;
+export default ToolbarButton;

package/dist/components/toolbar/ToolbarDivider.svelte

@@ -0,0 +1,6 @@
+<script lang="ts">
+  import { toolbar } from './theme.js';
+  const cls = toolbar();
+</script>
+
+<div class={cls.divider()} role="separator" aria-orientation="vertical"></div>

package/dist/components/toolbar/ToolbarDivider.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ToolbarDivider: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ToolbarDivider = InstanceType<typeof ToolbarDivider>;
+export default ToolbarDivider;

package/dist/components/toolbar/ToolbarGroup.svelte

@@ -0,0 +1,18 @@
+<!--
+@component
+A toggle group within a Toolbar. Manages single or multiple selection.
+-->
+<script lang="ts">
+  import { Toolbar } from 'bits-ui';
+  import clsx from 'clsx';
+  import { toolbar } from './theme.js';
+  import type { ToolbarGroupProps } from './types.js';
+
+  let { children, disabled = false, class: className, ...restProps }: ToolbarGroupProps = $props();
+
+  const cls = toolbar();
+</script>
+
+<Toolbar.Group {disabled} class={cls.group({ class: clsx(className) })} {...restProps}>
+  {@render children?.()}
+</Toolbar.Group>

package/dist/components/toolbar/ToolbarGroup.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { ToolbarGroupProps } from './types.js';
+/** A toggle group within a Toolbar. Manages single or multiple selection. */
+declare const ToolbarGroup: import("svelte").Component<ToolbarGroupProps, {}, "">;
+type ToolbarGroup = ReturnType<typeof ToolbarGroup>;
+export default ToolbarGroup;

package/dist/components/toolbar/ToolbarGroupItem.svelte

@@ -0,0 +1,27 @@
+<!--
+@component
+A toggleable icon button within a ToolbarGroup.
+Selected state is driven by data-[state=on] from Bits UI.
+-->
+<script lang="ts">
+  import { Toolbar } from 'bits-ui';
+  import clsx from 'clsx';
+  import { Icon, Layer } from '../../utils/index.js';
+  import { toolbarGroupItem } from './theme.js';
+  import type { ToolbarGroupItemProps } from './types.js';
+
+  let {
+    iconProps,
+    value,
+    disabled = false,
+    class: className,
+    ...restProps
+  }: ToolbarGroupItemProps = $props();
+
+  const { base, icon } = toolbarGroupItem();
+</script>
+
+<Toolbar.GroupItem {value} {disabled} class={base({ class: clsx(className) })} {...restProps}>
+  <Icon {...iconProps} class={icon()} />
+  <Layer />
+</Toolbar.GroupItem>

package/dist/components/toolbar/ToolbarGroupItem.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { ToolbarGroupItemProps } from './types.js';
+/**
+ * A toggleable icon button within a ToolbarGroup.
+ * Selected state is driven by data-[state=on] from Bits UI.
+ */
+declare const ToolbarGroupItem: import("svelte").Component<ToolbarGroupItemProps, {}, "">;
+type ToolbarGroupItem = ReturnType<typeof ToolbarGroupItem>;
+export default ToolbarGroupItem;

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

@@ -0,0 +1,7 @@
+export * from './theme.js';
+export * from './types.js';
+export { default as Toolbar } from './Toolbar.svelte';
+export { default as ToolbarButton } from './ToolbarButton.svelte';
+export { default as ToolbarDivider } from './ToolbarDivider.svelte';
+export { default as ToolbarGroup } from './ToolbarGroup.svelte';
+export { default as ToolbarGroupItem } from './ToolbarGroupItem.svelte';

package/dist/components/toolbar/index.js

@@ -0,0 +1,10 @@
+// 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 Toolbar } from './Toolbar.svelte';
+export { default as ToolbarButton } from './ToolbarButton.svelte';
+export { default as ToolbarDivider } from './ToolbarDivider.svelte';
+export { default as ToolbarGroup } from './ToolbarGroup.svelte';
+export { default as ToolbarGroupItem } from './ToolbarGroupItem.svelte';

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

@@ -0,0 +1,106 @@
+import { type VariantProps } from 'tailwind-variants';
+export type ToolbarVariants = VariantProps<typeof toolbar>;
+export type ToolbarButtonVariants = VariantProps<typeof toolbarButton>;
+export type ToolbarGroupItemVariants = VariantProps<typeof toolbarGroupItem>;
+export declare const toolbar: import("tailwind-variants").TVReturnType<{
+    orientation: {
+        horizontal: {
+            root: string;
+        };
+        vertical: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    group: string;
+    divider: string;
+}, undefined, {
+    orientation: {
+        horizontal: {
+            root: string;
+        };
+        vertical: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    group: string;
+    divider: string;
+}, import("tailwind-variants").TVReturnType<{
+    orientation: {
+        horizontal: {
+            root: string;
+        };
+        vertical: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    group: string;
+    divider: string;
+}, undefined, unknown, unknown, undefined>>;
+export declare const toolbarButton: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            icon?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            icon?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    icon: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            icon?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    icon: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    base: string;
+    icon: string;
+}, undefined, unknown, unknown, undefined>>;
+export declare const toolbarGroupItem: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            icon?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            icon?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    icon: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            icon?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    icon: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    base: string;
+    icon: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/components/toolbar/theme.js

@@ -0,0 +1,27 @@
+import { tv } from 'tailwind-variants';
+export const toolbar = tv({
+    slots: {
+        root: 'inline-flex items-center gap-0.5 rounded-2xl bg-md-sys-color-surface-container px-2 py-1 shadow-elevation-1',
+        group: 'inline-flex items-center gap-0.5',
+        divider: 'mx-1 h-6 w-px shrink-0 bg-md-sys-color-outline-variant'
+    },
+    variants: {
+        orientation: {
+            horizontal: { root: 'flex-row' },
+            vertical: { root: 'flex-col h-auto w-14' }
+        }
+    },
+    defaultVariants: { orientation: 'horizontal' }
+});
+export const toolbarButton = tv({
+    slots: {
+        base: 'layer-container state-layer before:rounded-full relative inline-flex size-10 items-center justify-center rounded-full text-md-sys-color-on-surface-variant outline-none transition-colors disabled:cursor-not-allowed disabled:opacity-38',
+        icon: 'size-5 text-[20px]'
+    }
+});
+export const toolbarGroupItem = tv({
+    slots: {
+        base: 'layer-container state-layer before:rounded-full relative inline-flex size-10 items-center justify-center rounded-full text-md-sys-color-on-surface-variant outline-none transition-colors disabled:cursor-not-allowed disabled:opacity-38 data-[state=on]:bg-md-sys-color-secondary-container data-[state=on]:text-md-sys-color-on-secondary-container',
+        icon: 'size-5 text-[20px]'
+    }
+});

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

@@ -0,0 +1,20 @@
+import type { IconProps } from '../../utils/index.js';
+import type { ToolbarButtonProps as BitsToolbarButtonProps, ToolbarGroupItemProps as BitsToolbarGroupItemProps, ToolbarGroupProps as BitsToolbarGroupProps, ToolbarRootProps } from 'bits-ui';
+import type { Snippet } from 'svelte';
+import type { ToolbarButtonVariants, ToolbarGroupItemVariants, ToolbarVariants } from './theme.js';
+export type ToolbarProps = ToolbarVariants & Omit<ToolbarRootProps, 'children' | 'child'> & {
+    children?: Snippet;
+    class?: string;
+};
+export type ToolbarButtonProps = ToolbarButtonVariants & Omit<BitsToolbarButtonProps, 'children' | 'child'> & {
+    iconProps: IconProps;
+    class?: string;
+};
+export type ToolbarGroupProps = Omit<BitsToolbarGroupProps, 'children' | 'child'> & {
+    children?: Snippet;
+    class?: string;
+};
+export type ToolbarGroupItemProps = ToolbarGroupItemVariants & Omit<BitsToolbarGroupItemProps, 'children' | 'child'> & {
+    iconProps: IconProps;
+    class?: string;
+};

package/dist/components/toolbar/types.js

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

package/dist/components/typography/body/Body.svelte

@@ -0,0 +1,33 @@
+<!--
+@component
+Body components are used for longer passages of text in your app.
+Follows Material 3 Body typography styles.
+
+@see https://m3.material.io/styles/typography/overview#4739268d-2900-410a-abb8-10903823467f
+-->
+<script lang="ts">
+  import clsx from 'clsx';
+
+  import { body } from './theme.js';
+  import type { BodyProps } from './types.js';
+
+  let {
+    children,
+    emphasized,
+    size = 'medium',
+    class: className,
+    ...restProps
+  }: BodyProps = $props();
+
+  let classP = $derived(
+    body({
+      class: clsx(className),
+      emphasized,
+      size
+    })
+  );
+</script>
+
+<p {...restProps} class={classP}>
+  {@render children()}
+</p>

package/dist/components/typography/body/Body.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { BodyProps } from './types.js';
+/**
+ * Body components are used for longer passages of text in your app.
+ * Follows Material 3 Body typography styles.
+ *
+ * @see https://m3.material.io/styles/typography/overview#4739268d-2900-410a-abb8-10903823467f
+ */
+declare const Body: import("svelte").Component<BodyProps, {}, "">;
+type Body = ReturnType<typeof Body>;
+export default Body;

package/dist/components/typography/body/index.d.ts

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

package/dist/components/typography/body/index.js

@@ -0,0 +1,6 @@
+// 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 Body } from './Body.svelte';

package/dist/components/typography/body/theme.d.ts

@@ -0,0 +1,30 @@
+import { type VariantProps } from 'tailwind-variants';
+export type BodyVariants = VariantProps<typeof body>;
+export declare const body: import("tailwind-variants").TVReturnType<{
+    emphasized: {
+        true: string;
+    };
+    size: {
+        small: string;
+        medium: string;
+        large: string;
+    };
+}, undefined, "", {
+    emphasized: {
+        true: string;
+    };
+    size: {
+        small: string;
+        medium: string;
+        large: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    emphasized: {
+        true: string;
+    };
+    size: {
+        small: string;
+        medium: string;
+        large: string;
+    };
+}, undefined, "", unknown, unknown, undefined>>;