feat: new components

README.md

@@ -43,7 +43,10 @@ npm install ui-ingredients
 ## Documentation
 
 - [Accordion](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/accordion.md)
+- [Alert](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/alert.md)
+- [AlertDialog](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/alert-dialog.md)
 - [Avatar](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/avatar.md)
+- [Breadcrumbs](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/breadcrumbs.md)
 - [Carousel](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/carousel.md)
 - [Checkbox](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/checkbox.md)
 - [Clipboard](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/clipboard.md)
@@ -52,6 +55,7 @@ npm install ui-ingredients
 - [Combobox](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/combobox.md)
 - [DatePicker](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/date-picker.md)
 - [Dialog](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/dialog.md)
+- [Drawer](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/drawer.md)
 - [Editable](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/editable.md)
 - [Field](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/field.md)
 - [FileUpload](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/file-upload.md)

docs/alert-dialog.md

@@ -0,0 +1,23 @@
+# AlertDialog
+
+A component for displaying a modal dialog that requires user attention or confirmation.
+
+## Usage
+
+```svelte
+<script lang="ts">
+  import {AlertDialog} from 'ui-ingredients';
+</script>
+
+<AlertDialog.Root>
+  <AlertDialog.Trigger>Trigger</AlertDialog.Trigger>
+  <AlertDialog.Backdrop />
+  <AlertDialog.Positioner>
+    <AlertDialog.Content>
+      <AlertDialog.Title>Title</AlertDialog.Title>
+      <AlertDialog.Description>Description</AlertDialog.Description>
+      <AlertDialog.CloseTrigger>Close</AlertDialog.CloseTrigger>
+    </AlertDialog.Content>
+  </AlertDialog.Positioner>
+</AlertDialog.Root>
+```

docs/alert.md

@@ -0,0 +1,20 @@
+# Alert
+
+A component for displaying important messages or notifications.
+
+## Usage
+
+```svelte
+<script>
+  import {Alert} from 'ui-ingredients';
+  import {AlertCircleIcon} from '$lib/icons';
+</script>
+
+<Alert.Root>
+  <Alert.Indicator>
+    <AlertCircleIcon />
+  </Alert.Indicator>
+  <Alert.Title>Title</Alert.Title>
+  <Alert.Description>Description</Alert.Description>
+</Alert.Root>
+```

docs/breadcrumbs.md

@@ -0,0 +1,34 @@
+# Breadcrumbs
+
+A component for displaying the navigation path or hierarchy of a user's location within a site.
+
+## Usage
+
+```svelte
+<script>
+  import {Breadcrumbs} from 'ui-ingredients';
+  import {ChevronRightIcon} from '$lib/icons';
+</script>
+
+<Breadcrumbs.Root>
+  <Breadcrumbs.List>
+    <Breadcrumbs.Item>
+      <Breadcrumbs.Link href="/">Home</Breadcrumbs.Link>
+      <Breadcrumbs.Separator>
+        <ChevronRightIcon />
+      </Breadcrumbs.Separator>
+    </Breadcrumbs.Item>
+    <Breadcrumbs.Item>
+      <Breadcrumbs.Link href="/components">Components</Breadcrumbs.Link>
+      <Breadcrumbs.Separator>
+        <ChevronRightIcon />
+      </Breadcrumbs.Separator>
+    </Breadcrumbs.Item>
+    <Breadcrumbs.Item>
+      <Breadcrumbs.Link href="/components/breadcrumbs" current>
+        Breadcrumbs
+      </Breadcrumbs.Link>
+    </Breadcrumbs.Item>
+  </Breadcrumbs.List>
+</Breadcrumbs.Root>
+```

docs/drawer.md

@@ -0,0 +1,29 @@
+# Drawer
+
+A component that slides in from the edge of the screen to display additional content or navigation options.
+
+## Usage
+
+```svelte
+<script>
+  import {Drawer} from 'ui-ingredients';
+  import {XCloseIcon} from '$lib/icons';
+</script>
+
+<Drawer.Root>
+  <Drawer.Trigger>Trigger</Drawer.Trigger>
+  <Drawer.Backdrop />
+  <Drawer.Positioner>
+    <Drawer.Content>
+      <Drawer.Header>
+        <Drawer.Title>Title</Drawer.Title>
+        <Drawer.Description>Description</Drawer.Description>
+      </Drawer.Header>
+      <Drawer.Body>Body Content</Drawer.Body>
+      <Drawer.Footer>
+        <Drawer.CloseTrigger>Close</Drawer.CloseTrigger>
+      </Drawer.Footer>
+    </Drawer.Content>
+  </Drawer.Positioner>
+</Drawer.Root>
+```

docs/field.md

@@ -8,7 +8,10 @@ A component for organizing related form elements into a cohesive unit.
 
 ```svelte
 <Field.Root>
-  <Field.Label>Label</Field.Label>
+  <Field.Label>
+    Label
+    <Field.RequiredIndicator />
+  </Field.Label>
   <Field.Input />
   <Field.HelperText>This is a helper text</Field.HelperText>
   <Field.ErrorText>This is an error text</Field.ErrorText>
@@ -19,7 +22,10 @@ A component for organizing related form elements into a cohesive unit.
 
 ```svelte
 <Field.Root>
-  <Field.Label>Label</Field.Label>
+  <Field.Label>
+    Label
+    <Field.RequiredIndicator />
+  </Field.Label>
   <Field.Select />
   <Field.HelperText>This is a helper text</Field.HelperText>
   <Field.ErrorText>This is an error text</Field.ErrorText>
@@ -30,7 +36,10 @@ A component for organizing related form elements into a cohesive unit.
 
 ```svelte
 <Field.Root>
-  <Field.Label>Label</Field.Label>
+  <Field.Label>
+    Label
+    <Field.RequiredIndicator />
+  </Field.Label>
   <Field.Textarea />
   <Field.HelperText>This is a helper text</Field.HelperText>
   <Field.ErrorText>This is an error text</Field.ErrorText>

packages/ui-ingredients/README.md

@@ -43,7 +43,10 @@ npm install ui-ingredients
 ## Documentation
 
 - [Accordion](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/accordion.md)
+- [Alert](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/alert.md)
+- [AlertDialog](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/alert-dialog.md)
 - [Avatar](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/avatar.md)
+- [Breadcrumbs](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/breadcrumbs.md)
 - [Carousel](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/carousel.md)
 - [Checkbox](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/checkbox.md)
 - [Clipboard](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/clipboard.md)
@@ -52,6 +55,7 @@ npm install ui-ingredients
 - [Combobox](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/combobox.md)
 - [DatePicker](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/date-picker.md)
 - [Dialog](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/dialog.md)
+- [Drawer](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/drawer.md)
 - [Editable](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/editable.md)
 - [Field](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/field.md)
 - [FileUpload](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/file-upload.md)

packages/ui-ingredients/src/lib/accordion/avatar-context.svelte.ts

@@ -6,4 +6,4 @@ export const [getAccordionContext, setAccordionContext] =
   createContext<CreateAccordionReturn>('Accordion');
 
 export const [getAccordionItemPropsContext, setAccordionItemPropsContext] =
-  createContext<ItemProps>('AccordionItem');
+  createContext<ItemProps>('AccordionItem  [PROPS]');

packages/ui-ingredients/src/lib/alert/alert-anatomy.ts

@@ -0,0 +1,10 @@
+import {createAnatomy} from '@zag-js/anatomy';
+
+export const anatomy = createAnatomy('alert').parts(
+  'root',
+  'title',
+  'description',
+  'indicator',
+);
+
+export const parts = anatomy.build();

packages/ui-ingredients/src/lib/alert/alert-context.ts

@@ -0,0 +1,5 @@
+import {createContext} from '$lib/create-context.svelte.js';
+import type {CreateAlertReturn} from './create-alert.svelte.js';
+
+export const [getAlertContext, setAlertContext] =
+  createContext<CreateAlertReturn>('Alert');

packages/ui-ingredients/src/lib/alert/alert-description.svelte

@@ -0,0 +1,25 @@
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '$lib/types.js';
+
+  export interface AlertDescriptionProps
+    extends HtmlIngredientProps<'p', HTMLParagraphElement> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '$lib/merge-props.js';
+  import {getAlertContext} from './alert-context.js';
+
+  let {ref, asChild, children, ...props}: AlertDescriptionProps = $props();
+
+  let alert = getAlertContext();
+
+  let attrs = $derived(mergeProps(alert.getDescriptionProps(), props));
+</script>
+
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <p bind:this={ref} {...attrs}>
+    {@render children?.()}
+  </p>
+{/if}

packages/ui-ingredients/src/lib/alert/alert-indicator.svelte

@@ -0,0 +1,25 @@
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '$lib/types.js';
+
+  export interface AlertIndicatorProps
+    extends HtmlIngredientProps<'span', HTMLSpanElement> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '$lib/merge-props.js';
+  import {getAlertContext} from './alert-context.js';
+
+  let {ref, asChild, children, ...props}: AlertIndicatorProps = $props();
+
+  let alert = getAlertContext();
+
+  let attrs = $derived(mergeProps(alert.getIndicatorProps(), props));
+</script>
+
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <span bind:this={ref} {...attrs}>
+    {@render children?.()}
+  </span>
+{/if}

packages/ui-ingredients/src/lib/alert/alert-root.svelte

@@ -0,0 +1,29 @@
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '$lib/types.js';
+  import type {CreateAlertReturn} from './create-alert.svelte.js';
+
+  export interface AlertProps
+    extends HtmlIngredientProps<'div', HTMLDivElement, CreateAlertReturn> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '$lib/merge-props.js';
+  import {setAlertContext} from './alert-context.js';
+  import {createAlert} from './create-alert.svelte.js';
+
+  let {ref, asChild, children, ...props}: AlertProps = $props();
+
+  let alert = createAlert();
+
+  let attrs = $derived(mergeProps(alert.getRootProps(), props));
+
+  setAlertContext(alert);
+</script>
+
+{#if asChild}
+  {@render asChild(attrs, alert)}
+{:else}
+  <div bind:this={ref} {...attrs}>
+    {@render children?.(alert)}
+  </div>
+{/if}

packages/ui-ingredients/src/lib/alert/alert-title.svelte

@@ -0,0 +1,25 @@
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '$lib/types.js';
+
+  export interface AlertTitleProps
+    extends HtmlIngredientProps<'h2', HTMLHeadingElement> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '$lib/merge-props.js';
+  import {getAlertContext} from './alert-context.js';
+
+  let {ref, asChild, children, ...props}: AlertTitleProps = $props();
+
+  let alert = getAlertContext();
+
+  let attrs = $derived(mergeProps(alert.getTitleProps(), props));
+</script>
+
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <h2 bind:this={ref} {...attrs}>
+    {@render children?.()}
+  </h2>
+{/if}

packages/ui-ingredients/src/lib/alert/alert.ts

@@ -0,0 +1,4 @@
+export {default as Description} from './alert-description.svelte';
+export {default as Indicator} from './alert-indicator.svelte';
+export {default as Root} from './alert-root.svelte';
+export {default as Title} from './alert-title.svelte';

packages/ui-ingredients/src/lib/alert/create-alert.svelte.ts

@@ -0,0 +1,44 @@
+import type {HTMLAttributes} from 'svelte/elements';
+import {parts} from './alert-anatomy.js';
+
+export interface CreateAlertReturn {
+  getRootProps(): HTMLAttributes<HTMLElement>;
+  getTitleProps(): HTMLAttributes<HTMLElement>;
+  getDescriptionProps(): HTMLAttributes<HTMLElement>;
+  getIndicatorProps(): HTMLAttributes<HTMLElement>;
+}
+
+export function createAlert(): CreateAlertReturn {
+  function getRootProps(): HTMLAttributes<HTMLElement> {
+    return {
+      role: 'alert',
+      ...parts.root.attrs,
+    };
+  }
+
+  function getTitleProps(): HTMLAttributes<HTMLElement> {
+    return {
+      ...parts.title.attrs,
+    };
+  }
+
+  function getDescriptionProps(): HTMLAttributes<HTMLElement> {
+    return {
+      ...parts.description.attrs,
+    };
+  }
+
+  function getIndicatorProps(): HTMLAttributes<HTMLElement> {
+    return {
+      'aria-hidden': true,
+      ...parts.indicator.attrs,
+    };
+  }
+
+  return {
+    getRootProps,
+    getTitleProps,
+    getDescriptionProps,
+    getIndicatorProps,
+  };
+}

packages/ui-ingredients/src/lib/alert/index.ts

@@ -0,0 +1,9 @@
+export * as Alert from './alert.js';
+
+export type {AlertDescriptionProps} from './alert-description.svelte';
+export type {AlertIndicatorProps} from './alert-indicator.svelte';
+export type {AlertProps} from './alert-root.svelte';
+export type {AlertTitleProps} from './alert-title.svelte';
+
+export {anatomy as alertAnatomy} from './alert-anatomy.js';
+export {getAlertContext} from './alert-context.js';

packages/ui-ingredients/src/lib/breadcrumbs/breadcrumbs-anatomy.ts

@@ -0,0 +1,11 @@
+import {createAnatomy} from '@zag-js/anatomy';
+
+export const anatomy = createAnatomy('breadcrumbs').parts(
+  'root',
+  'list',
+  'item',
+  'link',
+  'separator',
+);
+
+export const parts = anatomy.build();

packages/ui-ingredients/src/lib/breadcrumbs/breadcrumbs-context.svelte.ts

@@ -0,0 +1,5 @@
+import {createContext} from '$lib/create-context.svelte.js';
+import type {CreateBreadcrumbsReturn} from './create-breadcrumbs.js';
+
+export const [getBreadcrumbsContext, setBreadcrumbsContext] =
+  createContext<CreateBreadcrumbsReturn>('Breadcrumbs');