ui-ingredients 0.0.34 → 0.0.36

package/README.md

@@ -43,7 +43,7 @@ npm install ui-ingredients
 - [Clipboard](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/clipboard.md)
 - [Collapsible](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/collapsible.md)
 - [Combobox](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/combobox.md)
-- [DatePicker](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/datePicker.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)
 - [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)
@@ -56,7 +56,7 @@ npm install ui-ingredients
 - [Popover](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/popover.md)
 - [Portal](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/portal.md)
 - [Progress](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/progress.md)
-- [QRCode](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/qr-code.md)
+- [QrCode](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/qr-code.md)
 - [RadioGroup](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/radio-group.md)
 - [RatingGroup](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/rating-group.md)
 - [Select](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/select.md)

package/dist/checkbox/hidden-input.svelte

@@ -5,14 +5,16 @@
 </script>
 
 <script lang="ts">
+  import {getFieldContext} from '../field/context.svelte.js';
   import {mergeProps} from '../merge-props.js';
   import {checkboxContext} from './context.svelte.js';
 
   let {...props}: CheckboxHiddenInputProps = $props();
 
+  let field = getFieldContext();
   let checkbox = checkboxContext.get();
 
   let mergedProps = $derived(mergeProps(props, checkbox.getHiddenInputProps()));
 </script>
 
-<input {...mergedProps} />
+<input aria-describedby={field?.['aria-describedby']} {...mergedProps} />

package/dist/combobox/input.svelte

@@ -7,11 +7,13 @@
 </script>
 
 <script lang="ts">
+  import {getFieldContext} from '../field/context.svelte.js';
   import {mergeProps} from '../merge-props.js';
   import {comboboxContext} from './context.svelte.js';
 
   let {asChild, ...props}: ComboboxInputProps = $props();
 
+  let field = getFieldContext();
   let combobox = comboboxContext.get();
 
   let mergedProps = $derived(mergeProps(props, combobox.getInputProps()));
@@ -20,5 +22,5 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <input {...mergedProps} />
+  <input aria-describedby={field?.['aria-describedby']} {...mergedProps} />
 {/if}

package/dist/editable/input.svelte

@@ -7,11 +7,13 @@
 </script>
 
 <script lang="ts">
+  import {getFieldContext} from '../field/context.svelte.js';
   import {mergeProps} from '../merge-props.js';
   import {editableContext} from './context.svelte.js';
 
   let {asChild, ...props}: EditableInputProps = $props();
 
+  let field = getFieldContext();
   let editable = editableContext.get();
 
   let mergedProps = $derived(mergeProps(props, editable.getInputProps()));
@@ -20,5 +22,5 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <input {...mergedProps} />
+  <input aria-describedby={field?.['aria-describedby']} {...mergedProps} />
 {/if}

package/dist/field/create-field.svelte.d.ts

@@ -28,6 +28,7 @@ export declare function createField(props: CreateFieldProps): {
     readonly required: boolean;
     readonly readOnly: boolean;
     readonly invalid: boolean;
+    readonly 'aria-describedby': string;
     getRootProps: () => HTMLProps<"div">;
     getLabelProps: () => HTMLProps<"label">;
     getErrorTextProps: () => HTMLProps<"div">;

package/dist/field/create-field.svelte.js

@@ -151,6 +151,9 @@ export function createField(props) {
         get invalid() {
             return invalid;
         },
+        get 'aria-describedby'() {
+            return ariaDescribedby;
+        },
         getRootProps,
         getLabelProps,
         getErrorTextProps,

package/dist/file-upload/hidden-input.svelte

@@ -5,11 +5,13 @@
 </script>
 
 <script lang="ts">
+  import {getFieldContext} from '../field/context.svelte.js';
   import {mergeProps} from '../merge-props.js';
   import {fileUploadContext} from './context.svelte.js';
 
   let {...props}: FileUploadHiddenInputProps = $props();
 
+  let field = getFieldContext();
   let fileUpload = fileUploadContext.get();
 
   let mergedProps = $derived(
@@ -17,4 +19,4 @@
   );
 </script>
 
-<input {...mergedProps} />
+<input aria-describedby={field?.['aria-describedby']} {...mergedProps} />

package/dist/number-input/input.svelte

@@ -7,11 +7,13 @@
 </script>
 
 <script lang="ts">
+  import {getFieldContext} from '../field/context.svelte.js';
   import {mergeProps} from '../merge-props.js';
   import {numberInputContext} from './context.svelte.js';
 
   let {asChild, ...props}: NumberInputInputProps = $props();
 
+  let field = getFieldContext();
   let numberInput = numberInputContext.get();
 
   let mergedProps = $derived(mergeProps(props, numberInput.getInputProps()));
@@ -20,5 +22,5 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <input {...mergedProps} />
+  <input aria-describedby={field?.['aria-describedby']} {...mergedProps} />
 {/if}

package/dist/pin-input/hidden-input.svelte

@@ -5,14 +5,16 @@
 </script>
 
 <script lang="ts">
+  import {getFieldContext} from '../field/context.svelte.js';
   import {mergeProps} from '../merge-props.js';
   import {pinInputContext} from './context.svelte.js';
 
   let {...props}: PinInputHiddenInputProps = $props();
 
+  let field = getFieldContext();
   let pinInput = pinInputContext.get();
 
   let mergedProps = $derived(mergeProps(props, pinInput.getHiddenInputProps()));
 </script>
 
-<input {...mergedProps} />
+<input aria-describedby={field?.['aria-describedby']} {...mergedProps} />

package/dist/qr-code/context.svelte.d.ts

@@ -1,3 +1,3 @@
 import { Context } from '../context.svelte.js';
-import type { CreateQRCodeReturn } from './create-qr-code.svelte.js';
-export declare const qrCodeContext: Context<CreateQRCodeReturn>;
+import type { CreateQrCodeReturn } from './create-qr-code.svelte.js';
+export declare const qrCodeContext: Context<CreateQrCodeReturn>;

package/dist/qr-code/create-qr-code.svelte.d.ts

@@ -1,7 +1,7 @@
 import * as qrCode from '@zag-js/qr-code';
-export interface CreateQRCodeProps extends Omit<qrCode.Context, 'id' | 'dir' | 'getRootNode'> {
+export interface CreateQrCodeProps extends Omit<qrCode.Context, 'id' | 'dir' | 'getRootNode'> {
     id?: string | null;
 }
-export interface CreateQRCodeReturn extends qrCode.Api {
+export interface CreateQrCodeReturn extends qrCode.Api {
 }
-export declare function createQRCode(props: CreateQRCodeProps): CreateQRCodeReturn;
+export declare function createQRCode(props: CreateQrCodeProps): CreateQrCodeReturn;

package/dist/qr-code/frame.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
   import type {AsChild, HTMLProps} from '../types.js';
 
-  export interface QRCodeFrameProps extends HTMLProps<'svg'> {
+  export interface QrCodeFrameProps extends HTMLProps<'svg'> {
     asChild?: AsChild;
   }
 </script>
@@ -10,7 +10,7 @@
   import {mergeProps} from '../merge-props.js';
   import {qrCodeContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: QRCodeFrameProps = $props();
+  let {asChild, children, ...props}: QrCodeFrameProps = $props();
 
   let qrCode = qrCodeContext.get();
 

package/dist/qr-code/frame.svelte.d.ts

@@ -11,7 +11,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const Frame: $$__sveltets_2_IsomorphicComponent<QRCodeFrameProps, {
+declare const Frame: $$__sveltets_2_IsomorphicComponent<QrCodeFrameProps, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "">;
 type Frame = InstanceType<typeof Frame>;

package/dist/qr-code/index.d.ts

@@ -1,6 +1,6 @@
-export * as QRCode from './qr-code.js';
-export type { QRCodeFrameProps } from './frame.svelte';
-export type { QRCodeOverlayProps } from './overlay.svelte';
-export type { QRCodePatternProps } from './pattern.svelte';
-export type { QRCodeProps } from './root.svelte';
+export * as QrCode from './qr-code.js';
+export type { QrCodeFrameProps } from './frame.svelte';
+export type { QrCodeOverlayProps } from './overlay.svelte';
+export type { QrCodePatternProps } from './pattern.svelte';
+export type { QrCodeProps } from './root.svelte';
 export { anatomy as qrCodeAnatomy } from '@zag-js/qr-code';

package/dist/qr-code/index.js

@@ -1,2 +1,2 @@
-export * as QRCode from './qr-code.js';
+export * as QrCode from './qr-code.js';
 export { anatomy as qrCodeAnatomy } from '@zag-js/qr-code';

package/dist/qr-code/overlay.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
   import type {AsChild, HTMLProps} from '../types.js';
 
-  export interface QRCodeOverlayProps extends HTMLProps<'div'> {
+  export interface QrCodeOverlayProps extends HTMLProps<'div'> {
     asChild?: AsChild;
   }
 </script>
@@ -10,7 +10,7 @@
   import {mergeProps} from '../merge-props.js';
   import {qrCodeContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: QRCodeOverlayProps = $props();
+  let {asChild, children, ...props}: QrCodeOverlayProps = $props();
 
   let qrCode = qrCodeContext.get();
 

package/dist/qr-code/overlay.svelte.d.ts

@@ -11,7 +11,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const Overlay: $$__sveltets_2_IsomorphicComponent<QRCodeOverlayProps, {
+declare const Overlay: $$__sveltets_2_IsomorphicComponent<QrCodeOverlayProps, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "">;
 type Overlay = InstanceType<typeof Overlay>;

package/dist/qr-code/pattern.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
   import type {AsChild, HTMLProps} from '../types.js';
 
-  export interface QRCodePatternProps extends HTMLProps<'path'> {
+  export interface QrCodePatternProps extends HTMLProps<'path'> {
     asChild?: AsChild;
   }
 </script>
@@ -10,7 +10,7 @@
   import {mergeProps} from '../merge-props.js';
   import {qrCodeContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: QRCodePatternProps = $props();
+  let {asChild, children, ...props}: QrCodePatternProps = $props();
 
   let qrCode = qrCodeContext.get();
 

package/dist/qr-code/pattern.svelte.d.ts

@@ -11,7 +11,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const Pattern: $$__sveltets_2_IsomorphicComponent<QRCodePatternProps, {
+declare const Pattern: $$__sveltets_2_IsomorphicComponent<QrCodePatternProps, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "">;
 type Pattern = InstanceType<typeof Pattern>;

package/dist/qr-code/root.svelte

@@ -2,14 +2,14 @@
   import type {AsChild, Assign, HTMLProps} from '../types.js';
   import type {Snippet} from 'svelte';
   import type {
-    CreateQRCodeProps,
-    CreateQRCodeReturn,
+    CreateQrCodeProps,
+    CreateQrCodeReturn,
   } from './create-qr-code.svelte.js';
 
-  export interface QRCodeProps
-    extends Assign<Omit<HTMLProps<'div'>, 'children'>, CreateQRCodeProps> {
-    asChild?: AsChild<CreateQRCodeReturn>;
-    children?: Snippet<[CreateQRCodeReturn]>;
+  export interface QrCodeProps
+    extends Assign<Omit<HTMLProps<'div'>, 'children'>, CreateQrCodeProps> {
+    asChild?: AsChild<CreateQrCodeReturn>;
+    children?: Snippet<[CreateQrCodeReturn]>;
   }
 </script>
 
@@ -20,10 +20,10 @@
   import {qrCodeContext} from './context.svelte.js';
   import {createQRCode} from './create-qr-code.svelte.js';
 
-  let {asChild, children, ...props}: QRCodeProps = $props();
+  let {asChild, children, ...props}: QrCodeProps = $props();
 
   let [qrCodeProps, otherProps] = $derived(
-    createSplitProps<CreateQRCodeProps>(['id', 'ids', 'value', 'encoding'])(
+    createSplitProps<CreateQrCodeProps>(['id', 'ids', 'value', 'encoding'])(
       props,
     ),
   );

package/dist/qr-code/root.svelte.d.ts

@@ -11,7 +11,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const Root: $$__sveltets_2_IsomorphicComponent<QRCodeProps, {
+declare const Root: $$__sveltets_2_IsomorphicComponent<QrCodeProps, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "">;
 type Root = InstanceType<typeof Root>;

package/dist/rating-group/hidden-input.svelte

@@ -5,11 +5,13 @@
 </script>
 
 <script lang="ts">
+  import {getFieldContext} from '../field/context.svelte.js';
   import {mergeProps} from '../merge-props.js';
   import {ratingGroupContext} from './context.svelte.js';
 
   let {...props}: RatingGroupHiddenInputProps = $props();
 
+  let field = getFieldContext();
   let radioGroup = ratingGroupContext.get();
 
   let mergedProps = $derived(
@@ -17,4 +19,4 @@
   );
 </script>
 
-<input {...mergedProps} />
+<input aria-describedby={field?.['aria-describedby']} {...mergedProps} />

package/dist/select/hidden-select.svelte

@@ -5,16 +5,18 @@
 </script>
 
 <script lang="ts">
+  import {getFieldContext} from '../field/context.svelte.js';
   import {mergeProps} from '../merge-props.js';
   import {selectContext} from './context.svelte.js';
 
   let {children, ...props}: SelectHiddenSelectProps = $props();
 
+  let field = getFieldContext();
   let select = selectContext.get();
 
   let mergedProps = $derived(mergeProps(props, select.getHiddenSelectProps()));
 </script>
 
-<select {...mergedProps}>
+<select aria-describedby={field?.['aria-describedby']} {...mergedProps}>
   {@render children?.()}
 </select>

package/dist/switch/hidden-input.svelte

@@ -5,14 +5,16 @@
 </script>
 
 <script lang="ts">
+  import {getFieldContext} from '../field/context.svelte.js';
   import {mergeProps} from '../merge-props.js';
   import {switchContext} from './context.svelte.js';
 
   let {...props}: SwitchHiddenInputProps = $props();
 
+  let field = getFieldContext();
   let switch$ = switchContext.get();
 
   let mergedProps = $derived(mergeProps(props, switch$.getHiddenInputProps()));
 </script>
 
-<input {...mergedProps} />
+<input aria-describedby={field?.['aria-describedby']} {...mergedProps} />

package/dist/tags-input/hidden-input.svelte

@@ -5,11 +5,13 @@
 </script>
 
 <script lang="ts">
+  import {getFieldContext} from '../field/context.svelte.js';
   import {mergeProps} from '../merge-props.js';
   import {tagsInputContext} from './context.svelte.js';
 
   let {...props}: TagsInputHiddenInputProps = $props();
 
+  let field = getFieldContext();
   let tagsInput = tagsInputContext.get();
 
   let mergedProps = $derived(
@@ -17,4 +19,4 @@
   );
 </script>
 
-<input {...mergedProps} />
+<input aria-describedby={field?.['aria-describedby']} {...mergedProps} />

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ui-ingredients",
   "type": "module",
-  "version": "0.0.34",
+  "version": "0.0.36",
   "packageManager": "pnpm@9.7.0",
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",