('StepsItem.props');
10 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/lib/steps/steps-list.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 |
22 |
23 | {#if asChild}
24 | {@render asChild(mergedProps)}
25 | {:else}
26 |
27 | {@render children?.()}
28 |
29 | {/if}
30 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/lib/steps/steps-progress.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 |
22 |
23 | {#if asChild}
24 | {@render asChild(mergedProps)}
25 | {:else}
26 |
27 | {@render children?.()}
28 |
29 | {/if}
30 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/lib/steps/steps.ts:
--------------------------------------------------------------------------------
1 | export {default as CompletedContent} from './steps-completed-content.svelte';
2 | export {default as Content} from './steps-content.svelte';
3 | export {default as Indicator} from './steps-indicator.svelte';
4 | export {default as Item} from './steps-item.svelte';
5 | export {default as List} from './steps-list.svelte';
6 | export {default as NextTrigger} from './steps-next-trigger.svelte';
7 | export {default as PrevTrigger} from './steps-prev-trigger.svelte';
8 | export {default as Progress} from './steps-progress.svelte';
9 | export {default as Root} from './steps-root.svelte';
10 | export {default as Separator} from './steps-separator.svelte';
11 | export {default as Trigger} from './steps-trigger.svelte';
12 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/lib/switch/index.ts:
--------------------------------------------------------------------------------
1 | export * as Switch from './switch.js';
2 |
3 | export type {SwitchControlProps} from './switch-control.svelte';
4 | export type {SwitchHiddenInputProps} from './switch-hidden-input.svelte';
5 | export type {SwitchLabelProps} from './switch-label.svelte';
6 | export type {SwitchProps} from './switch-root.svelte';
7 | export type {SwitchThumbProps} from './switch-thumb.svelte';
8 |
9 | export {
10 | createSwitch,
11 | type CreateSwitchProps,
12 | type CreateSwitchReturn,
13 | } from './create-switch.svelte.js';
14 | export {anatomy as switchAnatomy} from './switch-anatomy.js';
15 | export {getSwitchContext, setSwitchContext} from './switch-context.svelte.js';
16 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/lib/switch/switch-anatomy.ts:
--------------------------------------------------------------------------------
1 | export {anatomy} from '@zag-js/switch';
2 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/lib/switch/switch-context.svelte.ts:
--------------------------------------------------------------------------------
1 | import {createContext} from '../create-context.svelte.js';
2 | import type {CreateSwitchReturn} from './create-switch.svelte.js';
3 |
4 | export const [getSwitchContext, setSwitchContext] =
5 | createContext('Switch');
6 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/lib/switch/switch-hidden-input.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 |
21 |
22 | {#if asChild}
23 | {@render asChild(mergedProps)}
24 | {:else}
25 |
26 | {/if}
27 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/lib/switch/switch-thumb.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 |
22 |
23 | {#if asChild}
24 | {@render asChild(mergedProps)}
25 | {:else}
26 |
27 | {@render children?.()}
28 |
29 | {/if}
30 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/lib/switch/switch.ts:
--------------------------------------------------------------------------------
1 | export {default as Control} from './switch-control.svelte';
2 | export {default as HiddenInput} from './switch-hidden-input.svelte';
3 | export {default as Label} from './switch-label.svelte';
4 | export {default as Root} from './switch-root.svelte';
5 | export {default as Thumb} from './switch-thumb.svelte';
6 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/lib/tabs/index.ts:
--------------------------------------------------------------------------------
1 | export * as Tabs from './tabs.js';
2 |
3 | export type {TabsContentProps} from './tabs-content.svelte';
4 | export type {TabsIndicatorProps} from './tabs-indicator.svelte';
5 | export type {TabsListProps} from './tabs-list.svelte';
6 | export type {TabsProps} from './tabs-root.svelte';
7 | export type {TabsTriggerProps} from './tabs-trigger.svelte';
8 |
9 | export {
10 | createTabs,
11 | type CreateTabsProps,
12 | type CreateTabsReturn,
13 | } from './create-tabs.svelte.js';
14 | export {anatomy as tabsAnatomy} from './tabs-anatomy.js';
15 | export {getTabsContext, setTabsContext} from './tabs-context.svelte.js';
16 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/lib/tabs/tabs-anatomy.ts:
--------------------------------------------------------------------------------
1 | export {anatomy} from '@zag-js/tabs';
2 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/lib/tabs/tabs-context.svelte.ts:
--------------------------------------------------------------------------------
1 | import {createContext} from '../create-context.svelte.js';
2 | import type {CreateTabsReturn} from './create-tabs.svelte.js';
3 |
4 | export const [getTabsContext, setTabsContext] =
5 | createContext('Tabs');
6 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/lib/tabs/tabs-indicator.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 |
22 |
23 | {#if asChild}
24 | {@render asChild(mergedProps)}
25 | {:else}
26 |
27 | {@render children?.()}
28 |
29 | {/if}
30 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/lib/tabs/tabs-list.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 |
22 |
23 | {#if asChild}
24 | {@render asChild(mergedProps)}
25 | {:else}
26 |
27 | {@render children?.()}
28 |
29 | {/if}
30 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/lib/tabs/tabs.ts:
--------------------------------------------------------------------------------
1 | export {default as Content} from './tabs-content.svelte';
2 | export {default as Indicator} from './tabs-indicator.svelte';
3 | export {default as List} from './tabs-list.svelte';
4 | export {default as Root} from './tabs-root.svelte';
5 | export {default as Trigger} from './tabs-trigger.svelte';
6 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/lib/tags-input/tags-input-anatomy.ts:
--------------------------------------------------------------------------------
1 | export {anatomy} from '@zag-js/tags-input';
2 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/lib/tags-input/tags-input-context.svelte.ts:
--------------------------------------------------------------------------------
1 | import type {ItemProps} from '@zag-js/tags-input';
2 | import {createContext} from '../create-context.svelte.js';
3 | import type {CreateTagsInputReturn} from './create-tags-input.svelte.js';
4 |
5 | export const [getTagsInputContext, setTagsInputContext] =
6 | createContext('TagsInput');
7 |
8 | export const [getTagsInputItemPropsContext, setTagsInputItemPropsContext] =
9 | createContext('TagsInputItem.props');
10 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/lib/tags-input/tags-input-input.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 |
21 |
22 | {#if asChild}
23 | {@render asChild(mergedProps)}
24 | {:else}
25 |
26 | {/if}
27 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/lib/tags-input/tags-input.ts:
--------------------------------------------------------------------------------
1 | export {default as ClearTrigger} from './tags-input-clear-trigger.svelte';
2 | export {default as Control} from './tags-input-control.svelte';
3 | export {default as HiddenInput} from './tags-input-hidden-input.svelte';
4 | export {default as Input} from './tags-input-input.svelte';
5 | export {default as ItemDeleteTrigger} from './tags-input-item-delete-trigger.svelte';
6 | export {default as ItemInput} from './tags-input-item-input.svelte';
7 | export {default as ItemPreview} from './tags-input-item-preview.svelte';
8 | export {default as ItemText} from './tags-input-item-text.svelte';
9 | export {default as Item} from './tags-input-item.svelte';
10 | export {default as Label} from './tags-input-label.svelte';
11 | export {default as Root} from './tags-input-root.svelte';
12 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/lib/time-picker/time-picker-anatomy.ts:
--------------------------------------------------------------------------------
1 | export {anatomy} from '@zag-js/time-picker';
2 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/lib/time-picker/time-picker-context.svelte.ts:
--------------------------------------------------------------------------------
1 | import {createContext} from '../create-context.svelte.js';
2 | import type {CreateTimePickerReturn} from './create-time-picker.svelte.js';
3 |
4 | export const [getTimePickerContext, setTimePickerContext] =
5 | createContext('TimePicker');
6 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/lib/time-picker/time-picker-input.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 |
21 |
22 | {#if asChild}
23 | {@render asChild(mergedProps)}
24 | {:else}
25 |
26 | {/if}
27 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/lib/timer/create-timer.svelte.ts:
--------------------------------------------------------------------------------
1 | import {normalizeProps, reflect, useMachine} from '@zag-js/svelte';
2 | import * as timer from '@zag-js/timer';
3 | import {getEnvironmentContext} from '../environment-provider/enviroment-provider-context.svelte.js';
4 |
5 | export interface CreateTimerProps extends Omit {}
6 | export interface CreateTimerReturn extends timer.Api {}
7 |
8 | export function createTimer(props: CreateTimerProps): CreateTimerReturn {
9 | const environment = getEnvironmentContext();
10 |
11 | const service = useMachine(timer.machine, () => ({
12 | getRootNode: environment?.getRootNode,
13 | ...props,
14 | }));
15 |
16 | return reflect(() => timer.connect(service, normalizeProps));
17 | }
18 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/lib/timer/timer-anatomy.ts:
--------------------------------------------------------------------------------
1 | export {anatomy} from '@zag-js/timer';
2 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/lib/timer/timer-area.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 |
22 |
23 | {#if asChild}
24 | {@render asChild(mergedProps)}
25 | {:else}
26 |
27 | {@render children?.()}
28 |
29 | {/if}
30 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/lib/timer/timer-context.svelte.ts:
--------------------------------------------------------------------------------
1 | import type {ItemProps} from '@zag-js/timer';
2 | import {createContext} from '../create-context.svelte.js';
3 | import type {CreateTimerReturn} from './create-timer.svelte.js';
4 |
5 | export const [getTimerContext, setTimerContext] =
6 | createContext('Timer');
7 |
8 | export const [getTimerItemPropsContext, setTimerItemPropsContext] =
9 | createContext('TimerItem.props');
10 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/lib/timer/timer-control.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 |
22 |
23 | {#if asChild}
24 | {@render asChild(mergedProps)}
25 | {:else}
26 |
27 | {@render children?.()}
28 |
29 | {/if}
30 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/lib/timer/timer.ts:
--------------------------------------------------------------------------------
1 | export {parse} from '@zag-js/timer';
2 | export {default as ActionTrigger} from './timer-action-trigger.svelte';
3 | export {default as Area} from './timer-area.svelte';
4 | export {default as Control} from './timer-control.svelte';
5 | export {default as ItemLabel} from './timer-item-label.svelte';
6 | export {default as ItemValue} from './timer-item-value.svelte';
7 | export {default as Item} from './timer-item.svelte';
8 | export {default as Root} from './timer-root.svelte';
9 | export {default as Separator} from './timer-separator.svelte';
10 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/lib/toast/create-toaster.svelte.ts:
--------------------------------------------------------------------------------
1 | import * as toast from '@zag-js/toast';
2 |
3 | export interface CreateToasterProps extends toast.StoreProps {}
4 | export interface CreateToasterReturn extends toast.Store {}
5 |
6 | export function createToaster(props: CreateToasterProps): CreateToasterReturn {
7 | const store = $derived(toast.createStore(props));
8 | return store;
9 | }
10 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/lib/toast/toast-anatomy.ts:
--------------------------------------------------------------------------------
1 | export {anatomy} from '@zag-js/toast';
2 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/lib/toast/toast-context.svelte.ts:
--------------------------------------------------------------------------------
1 | import * as toast from '@zag-js/toast';
2 | import {createContext} from '../create-context.svelte.js';
3 |
4 | export const [getToastContext, setToastContext] =
5 | createContext('Toast');
6 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/lib/toast/toast-provider.svelte:
--------------------------------------------------------------------------------
1 |
26 |
27 | {@render props.children?.(api)}
28 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/lib/toast/toast.ts:
--------------------------------------------------------------------------------
1 | export {default as ActionTrigger} from './toast-action-trigger.svelte';
2 | export {default as CloseTrigger} from './toast-close-trigger.svelte';
3 | export {default as Description} from './toast-description.svelte';
4 | export {default as GhostAfter} from './toast-ghost-after.svelte';
5 | export {default as GhostBefore} from './toast-ghost-before.svelte';
6 | export {default as Root} from './toast-root.svelte';
7 | export {default as Title} from './toast-title.svelte';
8 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/lib/toggle-group/index.ts:
--------------------------------------------------------------------------------
1 | export * as ToggleGroup from './toggle-group.js';
2 |
3 | export type {ToggleGroupItemProps} from './toggle-group-item.svelte';
4 | export type {ToggleGroupProps} from './toggle-group-root.svelte';
5 |
6 | export {
7 | createToggleGroup,
8 | type CreateToggleGroupProps,
9 | type CreateToggleGroupReturn,
10 | } from './create-toggle-group.svelte.js';
11 | export {anatomy as toggleGroupAnatomy} from './toggle-group-anatomy.js';
12 | export {
13 | getToggleGroupContext,
14 | setToggleGroupContext,
15 | } from './toggle-group-context.svelte.js';
16 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/lib/toggle-group/toggle-group-anatomy.ts:
--------------------------------------------------------------------------------
1 | export {anatomy} from '@zag-js/toggle-group';
2 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/lib/toggle-group/toggle-group-context.svelte.ts:
--------------------------------------------------------------------------------
1 | import {createContext} from '../create-context.svelte.js';
2 | import type {CreateToggleGroupReturn} from './create-toggle-group.svelte.js';
3 |
4 | export const [getToggleGroupContext, setToggleGroupContext] =
5 | createContext('ToggleGroup');
6 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/lib/toggle-group/toggle-group.ts:
--------------------------------------------------------------------------------
1 | export {default as Item} from './toggle-group-item.svelte';
2 | export {default as Root} from './toggle-group-root.svelte';
3 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/lib/toggle/create-toggle.svelte.ts:
--------------------------------------------------------------------------------
1 | import {normalizeProps, reflect, useMachine} from '@zag-js/svelte';
2 | import * as toggle from '@zag-js/toggle';
3 |
4 | export interface CreateToggleProps extends toggle.Props {}
5 | export interface CreateToggleReturn extends toggle.Api {}
6 |
7 | export function createToggle(props: CreateToggleProps) {
8 | const service = useMachine(toggle.machine, props);
9 | return reflect(() => toggle.connect(service, normalizeProps));
10 | }
11 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/lib/toggle/index.ts:
--------------------------------------------------------------------------------
1 | export * as Toggle from './toggle.js';
2 |
3 | export type {ToggleIndicatorProps} from './toggle-indicator.svelte';
4 | export type {ToggleProps} from './toggle-root.svelte';
5 |
6 | export {
7 | createToggle,
8 | type CreateToggleProps,
9 | type CreateToggleReturn,
10 | } from './create-toggle.svelte.js';
11 | export {anatomy as toggleAnatomy} from './toggle-anatomy.js';
12 | export {getToggleContext, setToggleContext} from './toggle-context.svelte.js';
13 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/lib/toggle/toggle-anatomy.ts:
--------------------------------------------------------------------------------
1 | export {anatomy} from '@zag-js/toggle';
2 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/lib/toggle/toggle-context.svelte.ts:
--------------------------------------------------------------------------------
1 | import {createContext} from '../create-context.svelte.js';
2 | import type {CreateToggleReturn} from './create-toggle.svelte.js';
3 |
4 | export const [getToggleContext, setToggleContext] =
5 | createContext('Toggle');
6 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/lib/toggle/toggle.ts:
--------------------------------------------------------------------------------
1 | export {default as Indicator} from './toggle-indicator.svelte';
2 | export {default as Root} from './toggle-root.svelte';
3 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/lib/tooltip/index.ts:
--------------------------------------------------------------------------------
1 | export * as Tooltip from './tooltip.js';
2 |
3 | export type {TooltipArrowTipProps} from './tooltip-arrow-tip.svelte';
4 | export type {TooltipArrowProps} from './tooltip-arrow.svelte';
5 | export type {TooltipContentProps} from './tooltip-content.svelte';
6 | export type {TooltipPositionerProps} from './tooltip-positioner.svelte';
7 | export type {TooltipProps} from './tooltip-root.svelte';
8 | export type {TooltipTriggerProps} from './tooltip-trigger.svelte';
9 |
10 | export {
11 | createTooltip,
12 | type CreateTooltipProps,
13 | type CreateTooltipReturn,
14 | } from './create-tooltip.svelte.js';
15 | export {anatomy as tooltipAnatomy} from './tooltip-anatomy.js';
16 | export {
17 | getTooltipContext,
18 | setTooltipContext,
19 | } from './tooltip-context.svelte.js';
20 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/lib/tooltip/tooltip-anatomy.ts:
--------------------------------------------------------------------------------
1 | export {anatomy} from '@zag-js/tooltip';
2 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/lib/tooltip/tooltip-context.svelte.ts:
--------------------------------------------------------------------------------
1 | import {createContext} from '../create-context.svelte.js';
2 | import type {CreateTooltipReturn} from './create-tooltip.svelte.js';
3 |
4 | export const [getTooltipContext, setTooltipContext] =
5 | createContext('Tooltip');
6 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/lib/tooltip/tooltip.ts:
--------------------------------------------------------------------------------
1 | export {default as ArrowTip} from './tooltip-arrow-tip.svelte';
2 | export {default as Arrow} from './tooltip-arrow.svelte';
3 | export {default as Content} from './tooltip-content.svelte';
4 | export {default as Positioner} from './tooltip-positioner.svelte';
5 | export {default as Root} from './tooltip-root.svelte';
6 | export {default as Trigger} from './tooltip-trigger.svelte';
7 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/lib/tour/tour-anatomy.ts:
--------------------------------------------------------------------------------
1 | import {anatomy as _} from '@zag-js/tour';
2 |
3 | export const anatomy = _.extendWith('trigger');
4 | export const parts = anatomy.build();
5 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/lib/tour/tour-context.svelte.ts:
--------------------------------------------------------------------------------
1 | import {createContext} from '../create-context.svelte.js';
2 | import {type CreateTourReturn} from './create-tour.svelte.js';
3 |
4 | export const [getTourContext, setTourContext] =
5 | createContext('Tour');
6 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/lib/tour/tour-spotlight.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 |
22 |
23 | {#if asChild}
24 | {@render asChild(mergedProps)}
25 | {:else}
26 |
27 | {@render children?.()}
28 |
29 | {/if}
30 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/lib/tree-view/tree-view-anatomy.ts:
--------------------------------------------------------------------------------
1 | export {anatomy} from '@zag-js/tree-view';
2 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/lib/tree-view/tree-view-context.svelte.ts:
--------------------------------------------------------------------------------
1 | import type {NodeProps} from '@zag-js/tree-view';
2 | import {createContext} from '../create-context.svelte.js';
3 | import type {CreateTreeViewReturn} from './create-tree-view.svelte.js';
4 |
5 | export const [getTreeViewContext, setTreeViewContext] =
6 | createContext('TreeView');
7 |
8 | export const [getTreeViewNodePropsContext, setTreeViewNodePropsContext] =
9 | createContext('TreeViewNodeProps');
10 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/lib/tree-view/types.ts:
--------------------------------------------------------------------------------
1 | export interface NodeProps {
2 | node: T;
3 | indexPath: number[];
4 | }
5 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/routes/+page.svelte:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/calvo-jp/ui-ingredients/a49d45bdaecd08f9e5752b26cc663fa92663b6b7/packages/ui-ingredients/src/routes/+page.svelte
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/routes/+page.ts:
--------------------------------------------------------------------------------
1 | import {redirect} from '@sveltejs/kit';
2 | import type {PageLoad} from './$types.js';
3 |
4 | export const load: PageLoad = async () => {
5 | redirect(307, '/accordion');
6 | };
7 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/routes/check-icon.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
21 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/routes/chevron-down-icon.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
21 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/routes/chevron-left-icon.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
21 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/routes/chevron-right-icon.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
21 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/routes/chevron-up-icon.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
21 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/routes/dropper-icon.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
23 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/routes/highlight/+page.svelte:
--------------------------------------------------------------------------------
1 |
9 |
10 | {
13 | query = e.currentTarget.value;
14 | }}
15 | style="padding:0px 14px;height:40px;border:1px solid var(--border-default);"
16 | />
17 |
18 |
19 |
20 |
26 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/routes/info-circle-icon.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
23 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/routes/menu/context/+page.svelte:
--------------------------------------------------------------------------------
1 |
12 |
13 |
14 | Right click
15 |
16 |
17 |
18 | {#each items as item}
19 |
20 | {item.label}
21 |
22 | {/each}
23 |
24 |
25 |
26 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/routes/refresh-icon.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
23 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/routes/star-icon.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
19 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/routes/toaster.svelte.ts:
--------------------------------------------------------------------------------
1 | import {createToaster} from '$lib/index.js';
2 |
3 | export const toaster = createToaster({
4 | placement: 'bottom-end',
5 | overlap: true,
6 | duration: 1000 * 5,
7 | });
8 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/routes/x-icon.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
21 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/tests/accordion/accordion.svelte:
--------------------------------------------------------------------------------
1 |
16 |
17 |
18 | {#each items as item}
19 |
20 |
21 | {item.label}
22 |
23 |
24 | {item.content}
25 |
26 | {/each}
27 |
28 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/tests/alert-dialog/alert-dialog.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 | Trigger
7 |
8 |
9 |
10 | Title
11 | Description
12 | Close
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/tests/alert-dialog/alert-dialog.test.ts:
--------------------------------------------------------------------------------
1 | import {alertDialogAnatomy} from '$lib/index.js';
2 | import {render} from '@testing-library/svelte';
3 | import {axe} from 'vitest-axe';
4 | import {getAnatomySelector} from '../utils.js';
5 | import AlertDialog from './alert-dialog.svelte';
6 |
7 | describe.skip('AlertDialog', () => {
8 | it.each(getAnatomySelector(alertDialogAnatomy))(
9 | 'should render %s',
10 | (selector) => {
11 | render(AlertDialog);
12 | expect(document.querySelector(selector)).toBeInTheDocument();
13 | },
14 | );
15 |
16 | it('should have no a11y violations', async () => {
17 | const {container} = render(AlertDialog);
18 | const results = await axe(container);
19 | expect(results).toHaveNoViolations();
20 | });
21 | });
22 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/tests/alert/alert.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 | Title
8 | Description
9 |
10 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/tests/alert/alert.test.ts:
--------------------------------------------------------------------------------
1 | import {alertAnatomy} from '$lib/index.js';
2 | import {render} from '@testing-library/svelte';
3 | import {axe} from 'vitest-axe';
4 | import {getAnatomySelector} from '../utils.js';
5 | import Alert from './alert.svelte';
6 |
7 | describe.skip('Alert', () => {
8 | it.each(getAnatomySelector(alertAnatomy))('should render %s', (selector) => {
9 | render(Alert);
10 | expect(document.querySelector(selector)).toBeInTheDocument();
11 | });
12 |
13 | it('should have no a11y violations', async () => {
14 | const {container} = render(Alert);
15 | const results = await axe(container);
16 | expect(results).toHaveNoViolations();
17 | });
18 | });
19 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/tests/avatar/avatar.svelte:
--------------------------------------------------------------------------------
1 |
11 |
12 |
13 |
14 | {name}
15 |
16 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/tests/breadcrumbs/breadcrumbs.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 |
8 | Home
9 | /
10 |
11 |
12 | Components
13 | /
14 |
15 |
16 |
17 | Breadcrumbs
18 |
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/tests/breadcrumbs/breadcrumbs.test.ts:
--------------------------------------------------------------------------------
1 | import {breadcrumbsAnatomy} from '$lib/index.js';
2 | import {render} from '@testing-library/svelte';
3 | import {axe} from 'vitest-axe';
4 | import {getAnatomySelector} from '../utils.js';
5 | import Breadcrumbs from './breadcrumbs.svelte';
6 |
7 | describe.skip('Breadcrumbs', () => {
8 | it.each(getAnatomySelector(breadcrumbsAnatomy))(
9 | 'should render %s',
10 | (selector) => {
11 | render(Breadcrumbs);
12 | expect(document.querySelector(selector)).toBeInTheDocument();
13 | },
14 | );
15 |
16 | it('should have no a11y violations', async () => {
17 | const {container} = render(Breadcrumbs);
18 | const results = await axe(container);
19 | expect(results).toHaveNoViolations();
20 | });
21 | });
22 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/tests/checkbox/checkbox.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 | ✔
8 |
9 | I accept the terms and conditions
10 |
11 |
12 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/tests/checkbox/checkbox.test.ts:
--------------------------------------------------------------------------------
1 | import {checkboxAnatomy} from '$lib/index.js';
2 | import {render} from '@testing-library/svelte';
3 | import {axe} from 'vitest-axe';
4 | import {getAnatomySelector} from '../utils.js';
5 | import Checkbox from './checkbox.svelte';
6 |
7 | describe.skip('Checkbox', () => {
8 | it.each(getAnatomySelector(checkboxAnatomy))(
9 | 'should render %s',
10 | (selector) => {
11 | render(Checkbox);
12 | expect(document.querySelector(selector)).toBeInTheDocument();
13 | },
14 | );
15 |
16 | it('should have no a11y violations', async () => {
17 | const {container} = render(Checkbox);
18 | const results = await axe(container);
19 | expect(results).toHaveNoViolations();
20 | });
21 | });
22 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/tests/clipboard/clipboard.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 | Label
9 |
10 |
11 |
12 |
13 |
14 |
15 | {#snippet children(ctx)}
16 | {#if ctx.copied}
17 | Copied
18 | {:else}
19 | Copy
20 | {/if}
21 | {/snippet}
22 |
23 |
24 |
25 |
26 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/tests/clipboard/clipboard.test.ts:
--------------------------------------------------------------------------------
1 | import {clipboardAnatomy} from '$lib/index.js';
2 | import {render} from '@testing-library/svelte';
3 | import {axe} from 'vitest-axe';
4 | import {getAnatomySelector} from '../utils.js';
5 | import Clipboard from './clipboard.svelte';
6 |
7 | describe.skip('Clipboard', () => {
8 | it.each(getAnatomySelector(clipboardAnatomy))(
9 | 'should render %s',
10 | (selector) => {
11 | render(Clipboard);
12 | expect(document.querySelector(selector)).toBeInTheDocument();
13 | },
14 | );
15 |
16 | it('should have no a11y violations', async () => {
17 | const {container} = render(Clipboard);
18 | const results = await axe(container);
19 | expect(results).toHaveNoViolations();
20 | });
21 | });
22 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/tests/collapsible/collapsible.svelte:
--------------------------------------------------------------------------------
1 |
10 |
11 |
12 | Toggle
13 | {content}
14 |
15 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/tests/collapsible/collapsible.test.ts:
--------------------------------------------------------------------------------
1 | import {collapsibleAnatomy} from '$lib/index.js';
2 | import {render} from '@testing-library/svelte';
3 | import {axe} from 'vitest-axe';
4 | import {getAnatomySelector} from '../utils.js';
5 | import Collapsible from './collapsible.svelte';
6 |
7 | describe.skip('Collapsible', () => {
8 | it.each(getAnatomySelector(collapsibleAnatomy))(
9 | 'should render %s',
10 | (selector) => {
11 | render(Collapsible);
12 | expect(document.querySelector(selector)).toBeInTheDocument();
13 | },
14 | );
15 |
16 | it('should have no a11y violations', async () => {
17 | const {container} = render(Collapsible);
18 | const results = await axe(container);
19 | expect(results).toHaveNoViolations();
20 | });
21 | });
22 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/tests/combobox/combobox.svelte:
--------------------------------------------------------------------------------
1 |
9 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/tests/date-picker/date-picker.test.ts:
--------------------------------------------------------------------------------
1 | import {datePickerAnatomy} from '$lib/index.js';
2 | import {render} from '@testing-library/svelte';
3 | import {axe} from 'vitest-axe';
4 | import {getAnatomySelector} from '../utils.js';
5 | import DatePicker from './date-picker.svelte';
6 |
7 | describe.skip('DatePicker', () => {
8 | /* flaky. hangs */
9 | it.skip.each(getAnatomySelector(datePickerAnatomy))(
10 | 'should render %s',
11 | (selector) => {
12 | render(DatePicker);
13 | expect(document.querySelector(selector)).toBeInTheDocument();
14 | },
15 | );
16 |
17 | it('should have no a11y violations', async () => {
18 | const {container} = render(DatePicker);
19 | const results = await axe(container);
20 | expect(results).toHaveNoViolations();
21 | });
22 | });
23 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/tests/dialog/dialog.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 | Trigger
7 |
8 |
9 |
10 | Title
11 | Description
12 | Close
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/tests/dialog/dialog.test.ts:
--------------------------------------------------------------------------------
1 | import {dialogAnatomy} from '$lib/index.js';
2 | import {render} from '@testing-library/svelte';
3 | import {axe} from 'vitest-axe';
4 | import {getAnatomySelector} from '../utils.js';
5 | import Dialog from './dialog.svelte';
6 |
7 | describe.skip('Dialog', () => {
8 | it.each(getAnatomySelector(dialogAnatomy))('should render %s', (selector) => {
9 | render(Dialog);
10 | expect(document.querySelector(selector)).toBeInTheDocument();
11 | });
12 |
13 | it('should have no a11y violations', async () => {
14 | const {container} = render(Dialog);
15 | const results = await axe(container);
16 | expect(results).toHaveNoViolations();
17 | });
18 | });
19 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/tests/drawer/drawer.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 | Trigger
7 |
8 |
9 |
10 |
11 | Title
12 | Description
13 |
14 |
15 |
16 | Close
17 |
18 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/tests/drawer/drawer.test.ts:
--------------------------------------------------------------------------------
1 | import {drawerAnatomy} from '$lib/index.js';
2 | import {render} from '@testing-library/svelte';
3 | import {axe} from 'vitest-axe';
4 | import {getAnatomySelector} from '../utils.js';
5 | import Drawer from './drawer.svelte';
6 |
7 | describe.skip('Drawer', () => {
8 | it.each(getAnatomySelector(drawerAnatomy))('should render %s', (selector) => {
9 | render(Drawer);
10 | expect(document.querySelector(selector)).toBeInTheDocument();
11 | });
12 |
13 | it('should have no a11y violations', async () => {
14 | const {container} = render(Drawer);
15 | const results = await axe(container);
16 | expect(results).toHaveNoViolations();
17 | });
18 | });
19 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/tests/editable/editable.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 | Label
7 |
8 |
9 |
10 |
11 |
12 | Edit
13 | Cancel
14 | Submit
15 |
16 |
17 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/tests/editable/editable.test.ts:
--------------------------------------------------------------------------------
1 | import {editableAnatomy} from '$lib/index.js';
2 | import {render} from '@testing-library/svelte';
3 | import {axe} from 'vitest-axe';
4 | import {getAnatomySelector} from '../utils.js';
5 | import Editable from './editable.svelte';
6 |
7 | describe.skip('Editable', () => {
8 | it.each(getAnatomySelector(editableAnatomy))(
9 | 'should render %s',
10 | (selector) => {
11 | render(Editable);
12 | expect(document.querySelector(selector)).toBeInTheDocument();
13 | },
14 | );
15 |
16 | it('should have no a11y violations', async () => {
17 | const {container} = render(Editable);
18 | const results = await axe(container);
19 | expect(results).toHaveNoViolations();
20 | });
21 | });
22 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/tests/field/field.test.ts:
--------------------------------------------------------------------------------
1 | import {fieldAnatomy} from '$lib/index.js';
2 | import {render} from '@testing-library/svelte';
3 | import {axe} from 'vitest-axe';
4 | import {getAnatomySelector} from '../utils.js';
5 | import Field from './field.svelte';
6 |
7 | describe.skip('Field', () => {
8 | it.each(getAnatomySelector(fieldAnatomy))('should render %s', (selector) => {
9 | render(Field);
10 | expect(document.querySelector(selector)).toBeInTheDocument();
11 | });
12 |
13 | it('should have no a11y violations', async () => {
14 | const {container} = render(Field);
15 | const results = await axe(container);
16 | expect(results).toHaveNoViolations();
17 | });
18 | });
19 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/tests/file-upload/file-upload.test.ts:
--------------------------------------------------------------------------------
1 | import {fileUploadAnatomy} from '$lib/index.js';
2 | import {render} from '@testing-library/svelte';
3 | import {axe} from 'vitest-axe';
4 | import {getAnatomySelector} from '../utils.js';
5 | import FileUpload from './file-upload.svelte';
6 |
7 | describe.skip('FileUpload', () => {
8 | it.each(getAnatomySelector(fileUploadAnatomy))(
9 | 'should render %s',
10 | (selector) => {
11 | render(FileUpload);
12 | expect(document.querySelector(selector)).toBeInTheDocument();
13 | },
14 | );
15 |
16 | it('should have no a11y violations', async () => {
17 | const {container} = render(FileUpload);
18 | const results = await axe(container);
19 | expect(results).toHaveNoViolations();
20 | });
21 | });
22 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/tests/hover-card/hover-card.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 | Trigger
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | {content}
17 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/tests/hover-card/hover-card.test.ts:
--------------------------------------------------------------------------------
1 | import {hoverCardAnatomy} from '$lib/index.js';
2 | import {render} from '@testing-library/svelte';
3 | import {axe} from 'vitest-axe';
4 | import {getAnatomySelector} from '../utils.js';
5 | import HoverCard from './hover-card.svelte';
6 |
7 | describe.skip('HoverCard', () => {
8 | it.each(getAnatomySelector(hoverCardAnatomy))(
9 | 'should render %s',
10 | (selector) => {
11 | render(HoverCard);
12 | expect(document.querySelector(selector)).toBeInTheDocument();
13 | },
14 | );
15 |
16 | it('should have no a11y violations', async () => {
17 | const {container} = render(HoverCard);
18 | const results = await axe(container);
19 | expect(results).toHaveNoViolations();
20 | });
21 | });
22 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/tests/number-input/number-input.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 | Enter Amount
7 |
8 |
9 |
10 |
11 | +
12 | -
13 |
14 |
15 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/tests/number-input/number-input.test.ts:
--------------------------------------------------------------------------------
1 | import {numberInputAnatomy} from '$lib/index.js';
2 | import {render} from '@testing-library/svelte';
3 | import {axe} from 'vitest-axe';
4 | import {getAnatomySelector} from '../utils.js';
5 | import NumberInput from './number-input.svelte';
6 |
7 | describe.skip('NumberInput', () => {
8 | it.each(getAnatomySelector(numberInputAnatomy))(
9 | 'should render %s',
10 | (selector) => {
11 | render(NumberInput);
12 | expect(document.querySelector(selector)).toBeInTheDocument();
13 | },
14 | );
15 |
16 | it('should have no a11y violations', async () => {
17 | const {container} = render(NumberInput);
18 | const results = await axe(container);
19 | expect(results).toHaveNoViolations();
20 | });
21 | });
22 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/tests/pagination/pagination.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 | {#snippet children(context)}
7 | <
8 | >
9 |
10 | {#each context.pages as page, index}
11 | {#if page.type === 'page'}
12 |
13 | {:else}
14 | ...
15 | {/if}
16 | {/each}
17 | {/snippet}
18 |
19 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/tests/pagination/pagination.test.ts:
--------------------------------------------------------------------------------
1 | import {paginationAnatomy} from '$lib/index.js';
2 | import {render} from '@testing-library/svelte';
3 | import {axe} from 'vitest-axe';
4 | import {getAnatomySelector} from '../utils.js';
5 | import Pagination from './pagination.svelte';
6 |
7 | describe.skip('Pagination', () => {
8 | it.each(getAnatomySelector(paginationAnatomy))(
9 | 'should render %s',
10 | (selector) => {
11 | render(Pagination);
12 | expect(document.querySelector(selector)).toBeInTheDocument();
13 | },
14 | );
15 |
16 | it('should have no a11y violations', async () => {
17 | const {container} = render(Pagination);
18 | const results = await axe(container);
19 | expect(results).toHaveNoViolations();
20 | });
21 | });
22 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/tests/pin-input/pin-input.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 | Label
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/tests/pin-input/pin-input.test.ts:
--------------------------------------------------------------------------------
1 | import {pinInputAnatomy} from '$lib/index.js';
2 | import {render} from '@testing-library/svelte';
3 | import {axe} from 'vitest-axe';
4 | import {getAnatomySelector} from '../utils.js';
5 | import PinInput from './pin-input.svelte';
6 |
7 | describe.skip('PinInput', () => {
8 | it.each(getAnatomySelector(pinInputAnatomy))(
9 | 'should render %s',
10 | (selector) => {
11 | render(PinInput);
12 | expect(document.querySelector(selector)).toBeInTheDocument();
13 | },
14 | );
15 |
16 | it('should have no a11y violations', async () => {
17 | const {container} = render(PinInput);
18 | const results = await axe(container);
19 | expect(results).toHaveNoViolations();
20 | });
21 | });
22 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/tests/popover/popover.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 | Trigger
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 | Title
15 | Description
16 | Close
17 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/tests/popover/popover.test.ts:
--------------------------------------------------------------------------------
1 | import {popoverAnatomy} from '$lib/index.js';
2 | import {render} from '@testing-library/svelte';
3 | import {axe} from 'vitest-axe';
4 | import {getAnatomySelector} from '../utils.js';
5 | import Popover from './popover.svelte';
6 |
7 | describe.skip('Popover', () => {
8 | it.each(getAnatomySelector(popoverAnatomy))(
9 | 'should render %s',
10 | (selector) => {
11 | render(Popover);
12 | expect(document.querySelector(selector)).toBeInTheDocument();
13 | },
14 | );
15 |
16 | it('should have no a11y violations', async () => {
17 | const {container} = render(Popover);
18 | const results = await axe(container);
19 | expect(results).toHaveNoViolations();
20 | });
21 | });
22 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/tests/progress/progress.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 | Label
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/tests/progress/progress.test.ts:
--------------------------------------------------------------------------------
1 | import {progressAnatomy} from '$lib/index.js';
2 | import {render} from '@testing-library/svelte';
3 | import {axe} from 'vitest-axe';
4 | import {getAnatomySelector} from '../utils.js';
5 | import Progress from './progress.svelte';
6 |
7 | describe.skip('Progress', () => {
8 | it.each(getAnatomySelector(progressAnatomy))(
9 | 'should render %s',
10 | (selector) => {
11 | render(Progress);
12 | expect(document.querySelector(selector)).toBeInTheDocument();
13 | },
14 | );
15 |
16 | it('should have no a11y violations', async () => {
17 | const {container} = render(Progress);
18 | const results = await axe(container);
19 | expect(results).toHaveNoViolations();
20 | });
21 | });
22 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/tests/qr-code/qr-code.svelte:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
9 |
10 |
11 | })
12 |
13 |
14 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/tests/qr-code/qr-code.test.ts:
--------------------------------------------------------------------------------
1 | import {qrCodeAnatomy} from '$lib/index.js';
2 | import {render} from '@testing-library/svelte';
3 | import {axe} from 'vitest-axe';
4 | import {getAnatomySelector} from '../utils.js';
5 | import QrCode from './qr-code.svelte';
6 |
7 | describe.skip('QrCode', () => {
8 | it.each(getAnatomySelector(qrCodeAnatomy))('should render %s', (selector) => {
9 | render(QrCode);
10 | expect(document.querySelector(selector)).toBeInTheDocument();
11 | });
12 |
13 | it('should have no a11y violations', async () => {
14 | const {container} = render(QrCode);
15 | const results = await axe(container);
16 | expect(results).toHaveNoViolations();
17 | });
18 | });
19 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/tests/radio-group/radio-group.svelte:
--------------------------------------------------------------------------------
1 |
15 |
16 |
17 | Label
18 |
19 |
20 | {#each items as { value, label }}
21 |
22 |
23 |
24 | {label}
25 |
26 | {/each}
27 |
28 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/tests/rating-group/rating-group.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 | {#snippet children(context)}
7 | Label
8 |
9 |
10 | {#each context.items as index}
11 |
12 | {/each}
13 |
14 | {/snippet}
15 |
16 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/tests/rating-group/rating-group.test.ts:
--------------------------------------------------------------------------------
1 | import {ratingGroupAnatomy} from '$lib/index.js';
2 | import {render} from '@testing-library/svelte';
3 | import {axe} from 'vitest-axe';
4 | import {getAnatomySelector} from '../utils.js';
5 | import RatingGroup from './rating-group.svelte';
6 |
7 | describe.skip('RatingGroup', () => {
8 | it.each(getAnatomySelector(ratingGroupAnatomy))(
9 | 'should render %s',
10 | (selector) => {
11 | render(RatingGroup);
12 | expect(document.querySelector(selector)).toBeInTheDocument();
13 | },
14 | );
15 |
16 | it('should have no a11y violations', async () => {
17 | const {container} = render(RatingGroup);
18 | const results = await axe(container);
19 | expect(results).toHaveNoViolations();
20 | });
21 | });
22 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/tests/segment-group/segment-group.svelte:
--------------------------------------------------------------------------------
1 |
15 |
16 |
17 | Label
18 |
19 |
20 | {#each items as { value, label }}
21 |
22 |
23 |
24 | {label}
25 |
26 | {/each}
27 |
28 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/tests/select/select.svelte:
--------------------------------------------------------------------------------
1 |
14 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/tests/signature-pad/signature-pad.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 | {#snippet children(context)}
7 | Label
8 |
9 |
10 |
11 | {#each context.paths as path}
12 |
13 | {:else}
14 |
15 | {/each}
16 |
17 |
18 |
19 |
20 |
21 | Clear
22 | {/snippet}
23 |
24 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/tests/signature-pad/signature-pad.test.ts:
--------------------------------------------------------------------------------
1 | import {signaturePadAnatomy} from '$lib/index.js';
2 | import {render} from '@testing-library/svelte';
3 | import {axe} from 'vitest-axe';
4 | import {getAnatomySelector} from '../utils.js';
5 | import SignaturePad from './signature-pad.svelte';
6 |
7 | describe.skip('SignaturePad', () => {
8 | it.each(getAnatomySelector(signaturePadAnatomy))(
9 | 'should render %s',
10 | (selector) => {
11 | render(SignaturePad);
12 | expect(document.querySelector(selector)).toBeInTheDocument();
13 | },
14 | );
15 |
16 | it('should have no a11y violations', async () => {
17 | const {container} = render(SignaturePad);
18 | const results = await axe(container);
19 | expect(results).toHaveNoViolations();
20 | });
21 | });
22 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/tests/slider/slider.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 | Label
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 | 25
21 | 50
22 | 75
23 |
24 |
25 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/tests/slider/slider.test.ts:
--------------------------------------------------------------------------------
1 | import {sliderAnatomy} from '$lib/index.js';
2 | import {render} from '@testing-library/svelte';
3 | import {axe} from 'vitest-axe';
4 | import {getAnatomySelector} from '../utils.js';
5 | import Slider from './slider.svelte';
6 |
7 | describe.skip('Slider', () => {
8 | it.each(getAnatomySelector(sliderAnatomy))('should render %s', (selector) => {
9 | render(Slider);
10 | expect(document.querySelector(selector)).toBeInTheDocument();
11 | });
12 |
13 | it('should have no a11y violations', async () => {
14 | const {container} = render(Slider);
15 | const results = await axe(container);
16 | expect(results).toHaveNoViolations();
17 | });
18 | });
19 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/tests/splitter/splitter.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
11 | A
12 |
13 | B
14 |
15 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/tests/splitter/splitter.test.ts:
--------------------------------------------------------------------------------
1 | import {splitterAnatomy} from '$lib/index.js';
2 | import {render} from '@testing-library/svelte';
3 | import {axe} from 'vitest-axe';
4 | import {getAnatomySelector} from '../utils.js';
5 | import Splitter from './splitter.svelte';
6 |
7 | describe.skip('Splitter', () => {
8 | it.each(getAnatomySelector(splitterAnatomy))(
9 | 'should render %s',
10 | (selector) => {
11 | render(Splitter);
12 | expect(document.querySelector(selector)).toBeInTheDocument();
13 | },
14 | );
15 |
16 | it('should have no a11y violations', async () => {
17 | const {container} = render(Splitter);
18 | const results = await axe(container);
19 | expect(results).toHaveNoViolations();
20 | });
21 | });
22 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/tests/switch/switch.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 | Label
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/tests/switch/switch.test.ts:
--------------------------------------------------------------------------------
1 | import {switchAnatomy} from '$lib/index.js';
2 | import {render} from '@testing-library/svelte';
3 | import {axe} from 'vitest-axe';
4 | import {getAnatomySelector} from '../utils.js';
5 | import Switch from './switch.svelte';
6 |
7 | describe.skip('Switch', () => {
8 | it.each(getAnatomySelector(switchAnatomy))('should render %s', (selector) => {
9 | render(Switch);
10 | expect(document.querySelector(selector)).toBeInTheDocument();
11 | });
12 |
13 | it('should have no a11y violations', async () => {
14 | const {container} = render(Switch);
15 | const results = await axe(container);
16 | expect(results).toHaveNoViolations();
17 | });
18 | });
19 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/tests/tabs/tabs.svelte:
--------------------------------------------------------------------------------
1 |
16 |
17 |
18 |
19 |
20 |
21 | {#each items as { value, label }}
22 |
23 | {label}
24 |
25 | {/each}
26 |
27 |
28 | {#each items as { value, content }}
29 | {content}
30 | {/each}
31 |
32 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/tests/tags-input/tags-input.test.ts:
--------------------------------------------------------------------------------
1 | import {tagsInputAnatomy} from '$lib/index.js';
2 | import {render} from '@testing-library/svelte';
3 | import {axe} from 'vitest-axe';
4 | import {getAnatomySelector} from '../utils.js';
5 | import TagsInput from './tags-input.svelte';
6 |
7 | describe.skip('TagsInput', () => {
8 | it.each(getAnatomySelector(tagsInputAnatomy))(
9 | 'should render %s',
10 | (selector) => {
11 | render(TagsInput);
12 | expect(document.querySelector(selector)).toBeInTheDocument();
13 | },
14 | );
15 |
16 | it('should have no a11y violations', async () => {
17 | const {container} = render(TagsInput);
18 | const results = await axe(container);
19 | expect(results).toHaveNoViolations();
20 | });
21 | });
22 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/tests/time-picker/time-picker.test.ts:
--------------------------------------------------------------------------------
1 | import {timePickerAnatomy} from '$lib/index.js';
2 | import {render} from '@testing-library/svelte';
3 | import {axe} from 'vitest-axe';
4 | import {getAnatomySelector} from '../utils.js';
5 | import TimePicker from './time-picker.svelte';
6 |
7 | describe.skip('TimePicker', () => {
8 | it.each(getAnatomySelector(timePickerAnatomy))(
9 | 'should render %s',
10 | (selector) => {
11 | render(TimePicker);
12 | expect(document.querySelector(selector)).toBeInTheDocument();
13 | },
14 | );
15 |
16 | it('should have no a11y violations', async () => {
17 | const {container} = render(TimePicker);
18 | const results = await axe(container);
19 | expect(results).toHaveNoViolations();
20 | });
21 | });
22 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/tests/timer/timer.test.ts:
--------------------------------------------------------------------------------
1 | import {timerAnatomy} from '$lib/index.js';
2 | import {render} from '@testing-library/svelte';
3 | import {axe} from 'vitest-axe';
4 | import {getAnatomySelector} from '../utils.js';
5 | import Timer from './timer.svelte';
6 |
7 | describe.skip('Timer', () => {
8 | it.each(getAnatomySelector(timerAnatomy))('should render %s', (selector) => {
9 | render(Timer);
10 | expect(document.querySelector(selector)).toBeInTheDocument();
11 | });
12 |
13 | it('should have no a11y violations', async () => {
14 | const {container} = render(Timer);
15 | const results = await axe(container);
16 | expect(results).toHaveNoViolations();
17 | });
18 | });
19 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/tests/toast/toast.svelte:
--------------------------------------------------------------------------------
1 |
8 |
9 |
18 |
19 |
20 |
21 |
22 |
23 | Close
24 | Action
25 |
26 |
27 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/tests/toast/toast.test.ts:
--------------------------------------------------------------------------------
1 | import {render} from '@testing-library/svelte';
2 | import {userEvent} from '@testing-library/user-event';
3 | import {axe} from 'vitest-axe';
4 | import Toast from './toast.svelte';
5 |
6 | describe.skip('Toast', () => {
7 | it('should have no a11y violations', async () => {
8 | const {container, getByRole} = render(Toast);
9 |
10 | const user = userEvent.setup();
11 | const trigger = getByRole('button', {name: 'Create toast'});
12 |
13 | await user.click(trigger);
14 |
15 | const results = await axe(container);
16 |
17 | expect(results).toHaveNoViolations();
18 | });
19 | });
20 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/tests/toggle-group/toggle-group.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 | 1
7 | 2
8 | 3
9 |
10 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/tests/toggle-group/toggle-group.test.ts:
--------------------------------------------------------------------------------
1 | import {toggleGroupAnatomy} from '$lib/index.js';
2 | import {render} from '@testing-library/svelte';
3 | import {axe} from 'vitest-axe';
4 | import {getAnatomySelector} from '../utils.js';
5 | import ToggleGroup from './toggle-group.svelte';
6 |
7 | describe.skip('ToggleGroup', () => {
8 | it.each(getAnatomySelector(toggleGroupAnatomy))(
9 | 'should render %s',
10 | (selector) => {
11 | render(ToggleGroup);
12 | expect(document.querySelector(selector)).toBeInTheDocument();
13 | },
14 | );
15 |
16 | it('should have no a11y violations', async () => {
17 | const {container} = render(ToggleGroup);
18 | const results = await axe(container);
19 | expect(results).toHaveNoViolations();
20 | });
21 | });
22 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/tests/toggle/toggle.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 | Toggle
6 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/tests/toggle/toggle.test.ts:
--------------------------------------------------------------------------------
1 | import {toggleAnatomy} from '$lib/index.js';
2 | import {render} from '@testing-library/svelte';
3 | import {axe} from 'vitest-axe';
4 | import {getAnatomySelector} from '../utils.js';
5 | import Toggle from './toggle.svelte';
6 |
7 | describe.skip('Toggle', () => {
8 | it.each(getAnatomySelector(toggleAnatomy))('should render %s', (selector) => {
9 | render(Toggle);
10 | expect(document.querySelector(selector)).toBeInTheDocument();
11 | });
12 |
13 | it('should have no a11y violations', async () => {
14 | const {container} = render(Toggle);
15 | const results = await axe(container);
16 | expect(results).toHaveNoViolations();
17 | });
18 | });
19 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/tests/tooltip/tooltip.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 | Trigger
7 |
8 |
9 |
10 |
11 |
12 | Content
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/tests/tooltip/tooltip.test.ts:
--------------------------------------------------------------------------------
1 | import {tooltipAnatomy} from '$lib/index.js';
2 | import {render} from '@testing-library/svelte';
3 | import {axe} from 'vitest-axe';
4 | import {getAnatomySelector} from '../utils.js';
5 | import Tooltip from './tooltip.svelte';
6 |
7 | describe.skip('Tooltip', () => {
8 | it.each(getAnatomySelector(tooltipAnatomy))(
9 | 'should render %s',
10 | (selector) => {
11 | render(Tooltip);
12 | expect(document.querySelector(selector)).toBeInTheDocument();
13 | },
14 | );
15 |
16 | it('should have no a11y violations', async () => {
17 | const {container} = render(Tooltip);
18 | const results = await axe(container);
19 | expect(results).toHaveNoViolations();
20 | });
21 | });
22 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/tests/tree-view/tree-view.svelte:
--------------------------------------------------------------------------------
1 |
3 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/tests/tree-view/tree-view.test.ts:
--------------------------------------------------------------------------------
1 | import {treeViewAnatomy} from '$lib/index.js';
2 | import {render} from '@testing-library/svelte';
3 | import {axe} from 'vitest-axe';
4 | import {getAnatomySelector} from '../utils.js';
5 | import TreeView from './tree-view.svelte';
6 |
7 | describe.skip('TreeView', () => {
8 | it.each(getAnatomySelector(treeViewAnatomy))(
9 | 'should render %s',
10 | (selector) => {
11 | render(TreeView);
12 | expect(document.querySelector(selector)).toBeInTheDocument();
13 | },
14 | );
15 |
16 | it('should have no a11y violations', async () => {
17 | const {container} = render(TreeView);
18 | const results = await axe(container);
19 | expect(results).toHaveNoViolations();
20 | });
21 | });
22 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/src/tests/utils.ts:
--------------------------------------------------------------------------------
1 | import type {AnatomyInstance} from '@zag-js/anatomy';
2 |
3 | export function getAnatomySelector>(
4 | anatomy: T,
5 | ) {
6 | const parts = anatomy.build();
7 |
8 | return Object.values(parts).map((part) => {
9 | return '[data-scope="$1"][data-part="$2"]'
10 | .replace('$1', part.attrs['data-scope'])
11 | .replace('$2', part.attrs['data-part']);
12 | });
13 | }
14 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/static/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/calvo-jp/ui-ingredients/a49d45bdaecd08f9e5752b26cc663fa92663b6b7/packages/ui-ingredients/static/favicon.png
--------------------------------------------------------------------------------
/packages/ui-ingredients/svelte.config.js:
--------------------------------------------------------------------------------
1 | import adapter from '@sveltejs/adapter-vercel';
2 | import {vitePreprocess} from '@sveltejs/vite-plugin-svelte';
3 |
4 | /** @type {import('@sveltejs/kit').Config} */
5 | const config = {
6 | preprocess: vitePreprocess(),
7 | kit: {
8 | adapter: adapter(),
9 | },
10 | compilerOptions: {
11 | runes: true,
12 | },
13 | };
14 |
15 | export default config;
16 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./.svelte-kit/tsconfig.json",
3 | "compilerOptions": {
4 | "types": ["vitest/globals"],
5 | "allowJs": true,
6 | "checkJs": true,
7 | "esModuleInterop": true,
8 | "forceConsistentCasingInFileNames": true,
9 | "resolveJsonModule": true,
10 | "skipLibCheck": true,
11 | "sourceMap": true,
12 | "strict": true,
13 | "module": "NodeNext",
14 | "moduleResolution": "NodeNext"
15 | },
16 | "include": ["src", "vitest.d.ts", "vitest.setup.ts"]
17 | }
18 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/vite.config.ts:
--------------------------------------------------------------------------------
1 | import {sveltekit} from '@sveltejs/kit/vite';
2 | import {svelteTesting} from '@testing-library/svelte/vite';
3 | import {defineConfig} from 'vitest/config';
4 |
5 | export default defineConfig({
6 | plugins: [sveltekit(), svelteTesting()],
7 | test: {
8 | watch: false,
9 | globals: true,
10 | include: ['src/**/*.{test,spec}.{js,ts}'],
11 | environment: 'jsdom',
12 | setupFiles: ['vitest.setup.ts'],
13 | passWithNoTests: true,
14 | },
15 | server: {
16 | port: 5000,
17 | },
18 | });
19 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/vitest.d.ts:
--------------------------------------------------------------------------------
1 | import 'vitest';
2 |
3 | import type {TestingLibraryMatchers} from '@testing-library/jest-dom/matchers';
4 | import type {AxeMatchers} from 'vitest-axe/matchers';
5 |
6 | declare module 'vitest' {
7 | interface Assertion extends TestingLibraryMatchers, AxeMatchers {}
8 |
9 | interface AsymmetricMatchersContaining
10 | extends TestingLibraryMatchers,
11 | AxeMatchers {}
12 | }
13 |
--------------------------------------------------------------------------------
/packages/ui-ingredients/vitest.setup.ts:
--------------------------------------------------------------------------------
1 | import '@testing-library/jest-dom/vitest';
2 | import 'vitest-axe/extend-expect';
3 | import 'vitest-canvas-mock';
4 |
5 | import {faker} from '@faker-js/faker';
6 | import {cleanup} from '@testing-library/svelte';
7 | import {JSDOM} from 'jsdom';
8 | import ResizeObserver from 'resize-observer-polyfill';
9 | import {vi} from 'vitest';
10 |
11 | const {window} = new JSDOM();
12 |
13 | vi.stubGlobal('ResizeObserver', ResizeObserver);
14 | window['ResizeObserver'] = ResizeObserver;
15 | window.URL.createObjectURL = () => faker.image.avatar();
16 |
17 | Object.assign(global, {
18 | window,
19 | document: window.document,
20 | });
21 |
22 | afterEach(cleanup);
23 |
--------------------------------------------------------------------------------
/pnpm-workspace.yaml:
--------------------------------------------------------------------------------
1 | packages:
2 | - packages/*
3 | - scripts
4 | - website
5 | ignoredBuiltDependencies:
6 | - '@tailwindcss/oxide'
7 |
--------------------------------------------------------------------------------
/scripts/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "ui-ingredients-scripts",
3 | "type": "module",
4 | "private": true,
5 | "scripts": {
6 | "generate:anatomy-icons": "tsx src/generate-anatomy-icons.ts"
7 | },
8 | "dependencies": {
9 | "@clack/prompts": "^0.10.1",
10 | "@tsconfig/node22": "^22.0.1",
11 | "@types/react": "^19.1.4",
12 | "@types/react-dom": "^19.1.5",
13 | "@zag-js/anatomy-icons": "^1.12.3",
14 | "prettier": "^3.5.3",
15 | "react": "^19.1.0",
16 | "react-dom": "^19.1.0",
17 | "svgson": "^5.3.1",
18 | "tsx": "^4.19.4",
19 | "typescript": "^5.8.3"
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/scripts/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "@tsconfig/node22/tsconfig.json",
3 | "compilerOptions": {
4 | "resolveJsonModule": true,
5 | "verbatimModuleSyntax": true
6 | },
7 | "include": ["src"]
8 | }
9 |
--------------------------------------------------------------------------------
/website/src/app.d.ts:
--------------------------------------------------------------------------------
1 | declare global {
2 | namespace App {
3 | interface TocEntry {
4 | url: string;
5 | title: string;
6 | items: TocEntry[];
7 | }
8 |
9 | interface PageData {
10 | toc: TocEntry[];
11 | }
12 | }
13 | }
14 |
15 | export {};
16 |
--------------------------------------------------------------------------------
/website/src/app.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 | %sveltekit.head%
10 |
11 |
12 |
16 | %sveltekit.body%
17 |
18 |
19 |
--------------------------------------------------------------------------------
/website/src/content/components/alert.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: alert
3 | title: Alert
4 | description: A component for displaying important messages or notifications.
5 | ---
6 |
7 |
8 |
9 | ## Usage
10 |
11 | ```svelte
12 |
16 |
17 |
18 |
19 |
20 |
21 | Title
22 | Description
23 |
24 | ```
25 |
26 | ## API Reference
27 |
28 |
29 |
--------------------------------------------------------------------------------
/website/src/content/components/avatar.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: avatar
3 | title: Avatar
4 | description: A visual component for displaying a user’s profile image or initials.
5 | ---
6 |
7 |
8 |
9 | ## Anatomy
10 |
11 |
12 |
13 | ## Usage
14 |
15 | ```svelte
16 |
19 |
20 |
21 |
22 | JD
23 |
24 | ```
25 |
26 | ## API Reference
27 |
28 |
29 |
--------------------------------------------------------------------------------
/website/src/content/components/collapsible.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: collapsible
3 | title: Collapsible
4 | description: A component that expands or collapses to show or hide content.
5 | ---
6 |
7 |
8 |
9 | ## Usage
10 |
11 | ```svelte
12 |
15 |
16 |
17 | Toggle
18 | Content
19 |
20 | ```
21 |
22 | ## API Reference
23 |
24 |
25 |
26 | ## Accessibility
27 |
28 | ### Keyboard Support
29 |
30 |
31 |
--------------------------------------------------------------------------------
/website/src/content/components/progress-circular.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: progress-circular
3 | title: Progress - Circular
4 | description: A component for displaying the completion status of a task or process.
5 | ---
6 |
7 |
8 |
9 | ## Anatomy
10 |
11 |
12 |
13 | ## Usage
14 |
15 | ```svelte
16 |
19 |
20 |
21 | Label
22 |
23 |
24 |
25 |
26 |
27 | ```
28 |
29 | ## API Reference
30 |
31 |
32 |
--------------------------------------------------------------------------------
/website/src/content/components/progress-linear.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: progress-linear
3 | title: Progress - Linear
4 | description: A component for displaying the completion status of a task or process.
5 | ---
6 |
7 |
8 |
9 | ## Anatomy
10 |
11 |
12 |
13 | ## Usage
14 |
15 | ```svelte
16 |
19 |
20 |
21 | Label
22 |
23 |
24 |
25 |
26 |
27 | ```
28 |
29 | ## API Reference
30 |
31 |
32 |
--------------------------------------------------------------------------------
/website/src/content/components/qr-code.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: qr-code
3 | title: Qr Code
4 | description: A component for generating and displaying QR codes for quick scanning and access to information.
5 | ---
6 |
7 |
8 |
9 | ## Anatomy
10 |
11 |
12 |
13 | ## Usage
14 |
15 | ```svelte
16 |
19 |
20 |
21 |
22 |
23 |
24 | Download
25 |
26 | ```
27 |
28 | ## API Reference
29 |
30 |
31 |
--------------------------------------------------------------------------------
/website/src/content/components/toggle.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: toggle
3 | title: Toggle
4 | description: A component for switching between two states, suchjson as on/off.
5 | ---
6 |
7 |
8 |
9 | ```svelte
10 |
16 |
17 | {
20 | pressed = detail.pressed;
21 | }}
22 | >
23 | {#if pressed}
24 |
25 | {:else}
26 |
27 | {/if}
28 |
29 | ```
30 |
31 | ## API Reference
32 |
33 |
34 |
--------------------------------------------------------------------------------
/website/src/content/utilities/environment-provider.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: environment-provider
3 | title: Environment Provider
4 | description: A component for providing environment information to the rest of the application.
5 | ---
6 |
7 | ## Usage
8 |
9 | ```svelte
10 |
11 |
16 |
17 | document}>
18 | {@render children()}
19 |
20 | ```
21 |
22 | ## API Reference
23 |
24 |
25 |
--------------------------------------------------------------------------------
/website/src/content/utilities/highlight.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: highlight
3 | title: Highlight
4 | description: A component for highlighting text within a string.
5 | ---
6 |
7 |
8 |
9 | ## Usage
10 |
11 | ```svelte
12 |
18 |
19 |
20 | ```
21 |
22 | ## API Reference
23 |
24 |
25 |
--------------------------------------------------------------------------------
/website/src/content/utilities/locale-provider.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: locale-provider
3 | title: Locale Provider
4 | description: A component for providing locale information to the rest of the application.
5 | ---
6 |
7 | ## Usage
8 |
9 | ```svelte
10 |
11 |
16 |
17 |
18 | {@render children()}
19 |
20 | ```
21 |
22 | ## API Reference
23 |
24 |
25 |
--------------------------------------------------------------------------------
/website/src/content/utilities/presence.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: presence
3 | title: Presence
4 | description: A component that controls content rendering and unmounting based on state.
5 | ---
6 |
7 |
8 |
9 | ## Usage
10 |
11 | ```svelte
12 |
17 |
18 |
25 |
26 | Content
27 | ```
28 |
29 | ## API Reference
30 |
31 |
32 |
--------------------------------------------------------------------------------
/website/src/lib/components/api/environment-provider.ts:
--------------------------------------------------------------------------------
1 | import {apiEntry} from './utils';
2 |
3 | export default apiEntry<'Root'>({
4 | Root: {
5 | context: {
6 | rootNode: {
7 | type: 'ShadowRoot | Document | Node | (() => ShadowRoot | Document | Node)',
8 | description: '',
9 | },
10 | },
11 | },
12 | });
13 |
--------------------------------------------------------------------------------
/website/src/lib/components/api/floating-panel.ts:
--------------------------------------------------------------------------------
1 | import {floatingPanelAnatomy} from 'ui-ingredients';
2 | import {apiEntryFromAnatomy} from './utils';
3 |
4 | export default apiEntryFromAnatomy(floatingPanelAnatomy)({});
5 |
--------------------------------------------------------------------------------
/website/src/lib/components/api/focus-trap.ts:
--------------------------------------------------------------------------------
1 | import {apiEntry} from './utils';
2 |
3 | export default apiEntry({
4 | Root: {
5 | context: {
6 | disabled: {
7 | type: 'boolean',
8 | description: 'Whether the focus trap is disabled',
9 | },
10 | returnFocusOnDeactivate: {
11 | type: 'boolean',
12 | description:
13 | 'Whether the focus trap should return focus to the previously focused element when deactivated',
14 | },
15 | },
16 | },
17 | });
18 |
--------------------------------------------------------------------------------
/website/src/lib/components/api/highlight.ts:
--------------------------------------------------------------------------------
1 | import {apiEntry} from './utils';
2 |
3 | export default apiEntry<'Root'>({
4 | Root: {
5 | context: {
6 | query: {
7 | type: 'string | string[]',
8 | description: 'The query to highlight in the text',
9 | },
10 | text: {
11 | type: 'string',
12 | description: 'The text to highlight',
13 | },
14 | ignoreCase: {
15 | type: 'boolean',
16 | description: 'Whether to ignore case while matching',
17 | },
18 | matchAll: {
19 | type: 'boolean',
20 | description: 'Whether to match multiple instances of the query',
21 | },
22 | },
23 | },
24 | });
25 |
--------------------------------------------------------------------------------
/website/src/lib/components/api/index.ts:
--------------------------------------------------------------------------------
1 | export {default} from './api.svelte';
2 |
--------------------------------------------------------------------------------
/website/src/lib/components/api/locale-provider.ts:
--------------------------------------------------------------------------------
1 | import {apiEntry} from './utils';
2 |
3 | export default apiEntry<'Root'>({
4 | Root: {
5 | context: {
6 | locale: {
7 | type: 'string',
8 | description: 'The locale to use for the application.',
9 | defaultValue: "'en-US'",
10 | },
11 | },
12 | },
13 | });
14 |
--------------------------------------------------------------------------------
/website/src/lib/components/api/portal.ts:
--------------------------------------------------------------------------------
1 | import {apiEntry} from './utils';
2 |
3 | export default apiEntry<'Root'>({
4 | Root: {
5 | context: {
6 | container: {
7 | type: 'HTMLElement',
8 | description: 'The element to render the element into',
9 | },
10 | disabled: {
11 | type: 'boolean',
12 | description: 'Whether the portal is disabled',
13 | },
14 | },
15 | },
16 | });
17 |
--------------------------------------------------------------------------------
/website/src/lib/components/api/presence.ts:
--------------------------------------------------------------------------------
1 | import {apiEntry} from './utils';
2 |
3 | export default apiEntry<'Root'>({
4 | Root: {
5 | context: {
6 | present: {
7 | type: 'string',
8 | description: 'Whether the element is present',
9 | },
10 | lazyMount: {
11 | type: 'boolean',
12 | description: 'Whether to enable lazy mounting.',
13 | },
14 | keepMounted: {
15 | type: 'boolean',
16 | description: 'Whether to keep the component mounted after exit.',
17 | },
18 | asChild: {
19 | type: 'Snippet',
20 | description: 'Render a different element.',
21 | },
22 | },
23 | dataAttr: {
24 | 'data-state': '"open" | "closed"',
25 | },
26 | },
27 | });
28 |
--------------------------------------------------------------------------------
/website/src/lib/components/api/time-picker.ts:
--------------------------------------------------------------------------------
1 | import {timePickerAnatomy} from 'ui-ingredients';
2 | import {apiEntryFromAnatomy} from './utils';
3 |
4 | export default apiEntryFromAnatomy(timePickerAnatomy)({});
5 |
--------------------------------------------------------------------------------
/website/src/lib/components/demo/alert.svelte:
--------------------------------------------------------------------------------
1 |
5 |
6 |
9 |
10 |
11 |
12 |
13 |
Title
14 |
17 | Description
18 |
19 |
13 | {@render children?.()}
14 | |
15 |
--------------------------------------------------------------------------------
/website/src/lib/components/ui/table/table-container.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
16 | {@render children?.()}
17 |
18 |
--------------------------------------------------------------------------------
/website/src/lib/components/ui/table/table-context.svelte.ts:
--------------------------------------------------------------------------------
1 | import {createContext} from 'ui-ingredients';
2 | import type {CreateTableReturn} from './create-table.svelte';
3 |
4 | export const [getTableContext, setTableContext] =
5 | createContext('Table');
6 |
--------------------------------------------------------------------------------
/website/src/lib/components/ui/table/table-footer.svelte:
--------------------------------------------------------------------------------
1 |
11 |
12 |
13 | {@render children?.()}
14 |
15 |
--------------------------------------------------------------------------------
/website/src/lib/components/ui/table/table-header.svelte:
--------------------------------------------------------------------------------
1 |
11 |
12 |
13 | {@render children?.()}
14 |
15 |
--------------------------------------------------------------------------------
/website/src/lib/components/ui/table/table-heading.svelte:
--------------------------------------------------------------------------------
1 |
11 |
12 |
13 | {@render children?.()}
14 | |
15 |
--------------------------------------------------------------------------------
/website/src/lib/components/ui/table/table-root.svelte:
--------------------------------------------------------------------------------
1 |
19 |
20 |
21 | {@render children?.()}
22 |
23 |
--------------------------------------------------------------------------------
/website/src/lib/components/ui/table/table-row.svelte:
--------------------------------------------------------------------------------
1 |
11 |
12 |
13 | {@render children?.()}
14 |
15 |
--------------------------------------------------------------------------------
/website/src/lib/components/ui/table/table.ts:
--------------------------------------------------------------------------------
1 | export {default as Body} from './table-body.svelte';
2 | export {default as Cell} from './table-cell.svelte';
3 | export {default as Container} from './table-container.svelte';
4 | export {default as Footer} from './table-footer.svelte';
5 | export {default as Header} from './table-header.svelte';
6 | export {default as Heading} from './table-heading.svelte';
7 | export {default as Root} from './table-root.svelte';
8 | export {default as Row} from './table-row.svelte';
9 |
--------------------------------------------------------------------------------
/website/src/lib/components/ui/textarea.recipe.ts:
--------------------------------------------------------------------------------
1 | import {tv, type VariantProps} from 'tailwind-variants';
2 | import {inputRecipe} from './input.recipe';
3 |
4 | export const textareaRecipe = tv({
5 | base: 'resize-none',
6 | variants: {
7 | size: {
8 | xs: 'h-auto px-2.5 py-1.5',
9 | sm: 'h-auto px-3 py-2',
10 | md: 'h-auto px-4 py-2.5',
11 | },
12 | },
13 | extend: inputRecipe,
14 | });
15 |
16 | export type TextareaRecipeProps = VariantProps;
17 |
--------------------------------------------------------------------------------
/website/src/lib/components/ui/textarea.svelte:
--------------------------------------------------------------------------------
1 |
14 |
15 |
17 |
--------------------------------------------------------------------------------
/website/src/lib/icons/anatomy/time-picker-anatomy-icon.svelte:
--------------------------------------------------------------------------------
1 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/website/src/lib/stores/navbar.svelte.ts:
--------------------------------------------------------------------------------
1 | function createNavbarStore() {
2 | let isDrawerOpen = $state(false);
3 |
4 | return {
5 | drawer: {
6 | get isOpen() {
7 | return isDrawerOpen;
8 | },
9 | open() {
10 | isDrawerOpen = true;
11 | },
12 | close() {
13 | isDrawerOpen = false;
14 | },
15 | toggle() {
16 | isDrawerOpen = !isDrawerOpen;
17 | },
18 | },
19 | };
20 | }
21 |
22 | export const navbarStore = createNavbarStore();
23 |
--------------------------------------------------------------------------------
/website/src/lib/types/index.ts:
--------------------------------------------------------------------------------
1 | export type Assign<
2 | Target extends Record,
3 | Source extends Record,
4 | > = Source & Omit;
5 |
--------------------------------------------------------------------------------
/website/src/routes/+page.server.ts:
--------------------------------------------------------------------------------
1 | import {redirect} from '@sveltejs/kit';
2 | import type {PageServerLoad} from './$types';
3 |
4 | export const load: PageServerLoad = async () => {
5 | return redirect(302, '/overview/introduction');
6 | };
7 |
--------------------------------------------------------------------------------
/website/src/routes/+page.svelte:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/website/src/routes/components/[id]/+page.server.ts:
--------------------------------------------------------------------------------
1 | import {components} from '.velite';
2 | import {error} from '@sveltejs/kit';
3 | import type {EntryGenerator, PageServerLoad} from './$types';
4 |
5 | export const prerender = true;
6 |
7 | export const entries: EntryGenerator = () => {
8 | return components.map(({id}) => {
9 | return {id};
10 | });
11 | };
12 |
13 | export const load: PageServerLoad = async ({params}) => {
14 | const data = components.find(({id}) => params.id === id);
15 | if (!data) error(404);
16 | return data;
17 | };
18 |
--------------------------------------------------------------------------------
/website/src/routes/components/[id]/+page.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 | {data.title} | UI Ingredients
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | {#key data.id}
19 |
20 | {/key}
21 |
--------------------------------------------------------------------------------
/website/src/routes/overview/[id]/+page.server.ts:
--------------------------------------------------------------------------------
1 | import {overview} from '.velite';
2 | import {error} from '@sveltejs/kit';
3 | import type {EntryGenerator, PageServerLoad} from './$types';
4 |
5 | export const prerender = true;
6 |
7 | export const entries: EntryGenerator = () => {
8 | return overview.map(({id}) => {
9 | return {id};
10 | });
11 | };
12 |
13 | export const load: PageServerLoad = async ({params}) => {
14 | const data = overview.find(({id}) => id === params.id);
15 | if (!data) error(404);
16 | return data;
17 | };
18 |
--------------------------------------------------------------------------------
/website/src/routes/overview/[id]/+page.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 | {data.title} | UI Ingredients
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | {@html data.content}
17 |
--------------------------------------------------------------------------------
/website/src/routes/robots.txt/+server.ts:
--------------------------------------------------------------------------------
1 | import type {RequestHandler} from '@sveltejs/kit';
2 |
3 | const content = `
4 | User-agent: *
5 | Allow: /
6 | `
7 | .split('\n')
8 | .map((s) => s.trim())
9 | .filter(Boolean)
10 | .join('\n');
11 |
12 | export const GET: RequestHandler = () => {
13 | return new Response(content, {
14 | headers: {
15 | 'Content-Type': 'text/plain',
16 | },
17 | });
18 | };
19 |
--------------------------------------------------------------------------------
/website/src/routes/sitemap.xml/+server.ts:
--------------------------------------------------------------------------------
1 | import {components, overview, utilities} from '.velite';
2 | import type {RequestHandler} from '@sveltejs/kit';
3 |
4 | export const prerender = true;
5 |
6 | export const GET: RequestHandler = async ({url: {origin}}) => {
7 | const urls = [
8 | ...components.map((item) => item.permalink),
9 | ...utilities.map((item) => item.permalink),
10 | ...overview.map((item) => item.permalink),
11 | ].map((path) => `${origin}${path}`);
12 |
13 | const content = `
14 |
15 | ${urls.map((url) => `${url}`).join('')}
16 | `;
17 |
18 | return new Response(content, {
19 | headers: {
20 | 'Content-Type': 'application/xml',
21 | },
22 | });
23 | };
24 |
--------------------------------------------------------------------------------
/website/src/routes/utilities/[id]/+page.server.ts:
--------------------------------------------------------------------------------
1 | import {utilities} from '.velite';
2 | import {error} from '@sveltejs/kit';
3 | import type {EntryGenerator, PageServerLoad} from './$types';
4 |
5 | export const prerender = true;
6 |
7 | export const entries: EntryGenerator = () => {
8 | return utilities.map(({id}) => {
9 | return {id};
10 | });
11 | };
12 |
13 | export const load: PageServerLoad = async ({params}) => {
14 | const data = utilities.find(({id}) => params.id === id);
15 | if (!data) error(404);
16 | return data;
17 | };
18 |
--------------------------------------------------------------------------------
/website/src/routes/utilities/[id]/+page.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 | {data.title} | UI Ingredients
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | {#key data.id}
19 |
20 | {/key}
21 |
--------------------------------------------------------------------------------
/website/static/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/calvo-jp/ui-ingredients/a49d45bdaecd08f9e5752b26cc663fa92663b6b7/website/static/favicon.png
--------------------------------------------------------------------------------
/website/svelte.config.js:
--------------------------------------------------------------------------------
1 | // @ts-check
2 | import adapter from '@sveltejs/adapter-vercel';
3 | import {vitePreprocess} from '@sveltejs/vite-plugin-svelte';
4 |
5 | /** @type {import('@sveltejs/kit').Config} */
6 | const config = {
7 | preprocess: [vitePreprocess()],
8 | kit: {
9 | adapter: adapter({
10 | runtime: 'nodejs22.x',
11 | }),
12 | alias: {
13 | '.velite': 'src/.velite',
14 | },
15 | },
16 | compilerOptions: {
17 | runes: true,
18 | css: 'injected',
19 | },
20 | };
21 |
22 | export default config;
23 |
--------------------------------------------------------------------------------
/website/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./.svelte-kit/tsconfig.json",
3 | "compilerOptions": {
4 | "allowJs": true,
5 | "checkJs": true,
6 | "esModuleInterop": true,
7 | "forceConsistentCasingInFileNames": true,
8 | "resolveJsonModule": true,
9 | "skipLibCheck": true,
10 | "sourceMap": true,
11 | "strict": true,
12 | "moduleResolution": "bundler"
13 | },
14 | "include": ["src", "vite-env.d.ts", "ts-reset.d.ts", "velite.config.ts"]
15 | }
16 |
--------------------------------------------------------------------------------
/website/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { sveltekit } from '@sveltejs/kit/vite';
2 | import tailwindcss from '@tailwindcss/vite';
3 | import { defineConfig } from 'vite';
4 |
5 | export default defineConfig({
6 | plugins: [sveltekit(), tailwindcss()],
7 | server: {
8 | port: 3000,
9 | },
10 | });
11 |
--------------------------------------------------------------------------------