@ui-organized/svelte 0.0.0-stage → 0.1.0

package/dist/components/Switch/Switch.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.types.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Switch/Switch.types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,WAAW;IAC1B,oEAAoE;IACpE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4CAA4C;IAC5C,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,oDAAoD;IACpD,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yDAAyD;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iCAAiC;IACjC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6EAA6E;IAC7E,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB"}

package/dist/components/Switch/Switch.types.js

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

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

@@ -0,0 +1,3 @@
+export { default as Switch } from "./Switch.svelte";
+export type { SwitchProps } from "./Switch.types.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Switch/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Switch/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,YAAY,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/components/Switch/index.js

@@ -0,0 +1 @@
+export { default as Switch } from "./Switch.svelte";

package/dist/components/Tabs/Tabs.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  import { Tabs as ArkTabs } from "@ark-ui/svelte";
+  import { clsx } from "clsx";
+  import { tabsStyles } from "@ui-organized/core";
+  import type { TabsProps } from "./Tabs.types.js";
+  import "@ui-organized/core/components/Tabs/Tabs.css";
+
+  let {
+    tabs,
+    value = $bindable(),
+    defaultValue,
+    onValueChange,
+    orientation = "horizontal",
+    size = "default",
+    class: className,
+  }: TabsProps = $props();
+
+  // Zag tabs are keyed by string; coerce at the boundary so numeric tab values
+  // keep working.
+  const resolvedDefault = $derived(
+    defaultValue != null
+      ? String(defaultValue)
+      : tabs[0] != null
+        ? String(tabs[0].value)
+        : undefined,
+  );
+</script>
+
+<ArkTabs.Root
+  value={value != null ? String(value) : undefined}
+  defaultValue={resolvedDefault}
+  onValueChange={(details) => {
+    value = details.value;
+    onValueChange?.(details.value);
+  }}
+  {orientation}
+  class={clsx(tabsStyles({ orientation, size }), className)}
+>
+  <ArkTabs.List class="tabs__list">
+    {#each tabs as tab (tab.value)}
+      <ArkTabs.Trigger
+        value={String(tab.value)}
+        disabled={tab.disabled}
+        class="tabs__tab text-emphasis-body-large"
+      >
+        {#if typeof tab.label === "string"}{tab.label}{:else}{@render tab.label()}{/if}
+      </ArkTabs.Trigger>
+    {/each}
+  </ArkTabs.List>
+  <div class="tabs__panels">
+    {#each tabs as tab (tab.value)}
+      <ArkTabs.Content value={String(tab.value)} class="tabs__panel">
+        {#if typeof tab.content === "string"}{tab.content}{:else}{@render tab.content()}{/if}
+      </ArkTabs.Content>
+    {/each}
+  </div>
+</ArkTabs.Root>

package/dist/components/Tabs/Tabs.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { TabsProps } from "./Tabs.types.js";
+import "@ui-organized/core/components/Tabs/Tabs.css";
+declare const Tabs: import("svelte").Component<TabsProps, {}, "value">;
+type Tabs = ReturnType<typeof Tabs>;
+export default Tabs;
+//# sourceMappingURL=Tabs.svelte.d.ts.map

package/dist/components/Tabs/Tabs.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Tabs/Tabs.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,6CAA6C,CAAC;AAoDrD,QAAA,MAAM,IAAI,oDAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}

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

@@ -0,0 +1,33 @@
+import type { Snippet } from "svelte";
+export interface TabItem {
+    /** Unique value identifier for this tab. */
+    value: string | number;
+    /**
+     * Tab label. A string, or a snippet for anything richer.
+     *
+     * React takes a ReactNode here, which can be either. Svelte has no single type
+     * that covers both, so the union is explicit and the component renders
+     * whichever it was given.
+     */
+    label: string | Snippet;
+    /** Panel content for this tab. */
+    content: string | Snippet;
+    /** Whether this tab is disabled. */
+    disabled?: boolean;
+}
+export interface TabsProps {
+    /** Tab definitions including labels and panel content. */
+    tabs: TabItem[];
+    /** Active tab value. Bindable: `bind:value`. */
+    value?: string | number;
+    /** Initial active tab value for uncontrolled usage. Defaults to first tab. */
+    defaultValue?: string | number;
+    /** Callback fired when the active tab changes. */
+    onValueChange?: (value: string | number) => void;
+    /** Whether tabs render horizontally or vertically. Defaults to 'horizontal'. */
+    orientation?: "horizontal" | "vertical";
+    /** Tab sizing. 'default' uses body-large type, 'small' uses body-medium. Defaults to 'default'. */
+    size?: "default" | "small";
+    class?: string;
+}
+//# sourceMappingURL=Tabs.types.d.ts.map

package/dist/components/Tabs/Tabs.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.types.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Tabs/Tabs.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,MAAM,WAAW,OAAO;IACtB,4CAA4C;IAC5C,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB;;;;;;OAMG;IACH,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,kCAAkC;IAClC,OAAO,EAAE,MAAM,GAAG,OAAO,CAAC;IAC1B,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,SAAS;IACxB,0DAA0D;IAC1D,IAAI,EAAE,OAAO,EAAE,CAAC;IAChB,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,8EAA8E;IAC9E,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,kDAAkD;IAClD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IACjD,gFAAgF;IAChF,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,mGAAmG;IACnG,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB"}

package/dist/components/Tabs/Tabs.types.js

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

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

@@ -0,0 +1,3 @@
+export { default as Tabs } from "./Tabs.svelte";
+export type { TabsProps, TabItem } from "./Tabs.types.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Tabs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC;AAChD,YAAY,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/components/Tabs/index.js

@@ -0,0 +1 @@
+export { default as Tabs } from "./Tabs.svelte";

package/dist/components/Tag/Tag.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { clsx } from "clsx";
+  import { tagStyles } from "@ui-organized/core";
+  import Icon from "../Icon/Icon.svelte";
+  import type { TagProps } from "./Tag.types.js";
+  import "@ui-organized/core/components/Tag/Tag.css";
+
+  /** Icons render at 16px across every tag size. */
+  const ICON_SIZE = 16;
+
+  let {
+    variant,
+    size,
+    emphasized = true,
+    icon,
+    iconPosition = "left",
+    class: className,
+    children,
+    ...rest
+  }: TagProps = $props();
+</script>
+
+<span
+  class={clsx(tagStyles({ variant, size }), !emphasized && "tag--subdued", className)}
+  {...rest}
+>
+  {#if icon && iconPosition === "left"}
+    <Icon name={icon} size={ICON_SIZE} class="tag__icon" />
+  {/if}
+  <span class="tag__label">{@render children?.()}</span>
+  {#if icon && iconPosition === "right"}
+    <Icon name={icon} size={ICON_SIZE} class="tag__icon" />
+  {/if}
+</span>

package/dist/components/Tag/Tag.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { TagProps } from "./Tag.types.js";
+import "@ui-organized/core/components/Tag/Tag.css";
+declare const Tag: import("svelte").Component<TagProps, {}, "">;
+type Tag = ReturnType<typeof Tag>;
+export default Tag;
+//# sourceMappingURL=Tag.svelte.d.ts.map

package/dist/components/Tag/Tag.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Tag/Tag.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,2CAA2C,CAAC;AAoCnD,QAAA,MAAM,GAAG,8CAAwC,CAAC;AAClD,KAAK,GAAG,GAAG,UAAU,CAAC,OAAO,GAAG,CAAC,CAAC;AAClC,eAAe,GAAG,CAAC"}

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

@@ -0,0 +1,27 @@
+import type { IconName } from "../Icon/Icon.types.js";
+import type { HTMLAttributes } from "svelte/elements";
+import type { Snippet } from "svelte";
+import type { IconComponent } from "../../icons/registry.js";
+import type { ControlSize } from "@ui-organized/core";
+export interface TagProps extends Omit<HTMLAttributes<HTMLSpanElement>, "class"> {
+    /** Status color variant. */
+    variant?: "success" | "info" | "info-secondary" | "caution" | "error";
+    /** Size variant. Defaults to 'md'. */
+    size?: ControlSize;
+    /**
+     * When true (default), renders a solid filled tag with high-contrast text.
+     * When false, renders a subdued tinted-background tag with colored text.
+     */
+    emphasized?: boolean;
+    /**
+     * Optional icon rendered inside the tag — its native name in the active
+     * library or an icon component. Rendered at 16px across every tag size, `spacing-01` from the
+     * label.
+     */
+    icon?: IconName | IconComponent;
+    /** Which side of the label the icon sits on. Defaults to 'left'. */
+    iconPosition?: "left" | "right";
+    class?: string;
+    children?: Snippet;
+}
+//# sourceMappingURL=Tag.types.d.ts.map

package/dist/components/Tag/Tag.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.types.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Tag/Tag.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAEtD,MAAM,WAAW,QAAS,SAAQ,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC9E,4BAA4B;IAC5B,OAAO,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,gBAAgB,GAAG,SAAS,GAAG,OAAO,CAAC;IACtE,sCAAsC;IACtC,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,aAAa,CAAC;IAChC,oEAAoE;IACpE,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB"}

package/dist/components/Tag/Tag.types.js

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

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

@@ -0,0 +1,3 @@
+export { default as Tag } from "./Tag.svelte";
+export type { TagProps } from "./Tag.types.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Tag/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Tag/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,cAAc,CAAC;AAC9C,YAAY,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/components/Tag/index.js

@@ -0,0 +1 @@
+export { default as Tag } from "./Tag.svelte";

package/dist/components/TagsInput/TagsInput.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+  import { TagsInput as ArkTagsInput } from "@ark-ui/svelte";
+  import { clsx } from "clsx";
+  import { tagsInputStyles } from "@ui-organized/core";
+  import Icon from "../Icon/Icon.svelte";
+  import FieldError from "../FieldError/FieldError.svelte";
+  import type { TagsInputProps } from "./TagsInput.types.js";
+  import "@ui-organized/core/components/TagsInput/TagsInput.css";
+  import { glyph } from "../../icons/glyph.js";
+  import { onMount } from "svelte";
+  import { trackFocusModality } from "@ui-organized/core/focus-modality";
+
+  // Text fields read pointer vs keyboard for a quiet focus state on click.
+  onMount(() => trackFocusModality());
+
+  /** Delete affordance inside a tag — always the small edge, at every control
+   *  size, because it sits inside the chip rather than beside it. */
+  const DELETE_ICON_SIZE = 12;
+
+  let {
+    label,
+    helperText,
+    error,
+    value = $bindable(),
+    defaultValue,
+    onValueChange,
+    placeholder,
+    size,
+    max,
+    editable,
+    delimiter,
+    addOnPaste,
+    required,
+    disabled,
+    readOnly,
+    name,
+    class: className,
+  }: TagsInputProps = $props();
+
+  const isInvalid = $derived(!!error);
+  const errorMessage = $derived(typeof error === "string" ? error : undefined);
+</script>
+
+<ArkTagsInput.Root
+  class={clsx(tagsInputStyles({ size }), className)}
+  {value}
+  {defaultValue}
+  onValueChange={(details) => {
+    value = details.value;
+    onValueChange?.(details.value);
+  }}
+  {max}
+  {editable}
+  {delimiter}
+  {addOnPaste}
+  invalid={isInvalid}
+  {required}
+  {disabled}
+  {readOnly}
+  {name}
+>
+  {#if label}
+    <ArkTagsInput.Label class="field__label">
+      {label}
+      {#if required}<span class="field__required" aria-hidden="true"></span>{/if}
+    </ArkTagsInput.Label>
+  {/if}
+  <ArkTagsInput.Control class="tags-input__control">
+    <!--
+      The tags are machine state, not children, so the list is read back from the
+      context rather than mapped over the `value` prop — that keeps in-place
+      editing (ItemInput) working on the machine's copy. The Svelte context part
+      hands the api over as an accessor, hence `api()`.
+    -->
+    <ArkTagsInput.Context>
+      {#snippet render(api)}
+        {#each api().value as tag, index (`${tag}-${index}`)}
+          <ArkTagsInput.Item {index} value={tag}>
+            <ArkTagsInput.ItemPreview class="tags-input__tag">
+              <ArkTagsInput.ItemText class="tags-input__tag-label">{tag}</ArkTagsInput.ItemText>
+              <ArkTagsInput.ItemDeleteTrigger class="tags-input__tag-delete">
+                <Icon name={glyph("close")} size={DELETE_ICON_SIZE} />
+              </ArkTagsInput.ItemDeleteTrigger>
+            </ArkTagsInput.ItemPreview>
+            <ArkTagsInput.ItemInput class="tags-input__tag-input" />
+          </ArkTagsInput.Item>
+        {/each}
+      {/snippet}
+    </ArkTagsInput.Context>
+    <ArkTagsInput.Input class="tags-input__entry" {placeholder} />
+  </ArkTagsInput.Control>
+  {#if helperText && !isInvalid}
+    <span class="field__description">{helperText}</span>
+  {/if}
+  {#if isInvalid && errorMessage}
+    <FieldError message={errorMessage} />
+  {/if}
+  <ArkTagsInput.HiddenInput />
+</ArkTagsInput.Root>

package/dist/components/TagsInput/TagsInput.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { TagsInputProps } from "./TagsInput.types.js";
+import "@ui-organized/core/components/TagsInput/TagsInput.css";
+declare const TagsInput: import("svelte").Component<TagsInputProps, {}, "value">;
+type TagsInput = ReturnType<typeof TagsInput>;
+export default TagsInput;
+//# sourceMappingURL=TagsInput.svelte.d.ts.map

package/dist/components/TagsInput/TagsInput.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TagsInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/TagsInput/TagsInput.svelte.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAC3D,OAAO,uDAAuD,CAAC;AAwF/D,QAAA,MAAM,SAAS,yDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

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

@@ -0,0 +1,39 @@
+export interface TagsInputProps {
+    /** Accessible label text rendered above the control. */
+    label?: string;
+    /** Helper text rendered below the control. Hidden when an error is shown. */
+    helperText?: string;
+    /**
+     * Error state. Pass a string to show an error message.
+     * Pass `true` to mark the field invalid without a message.
+     */
+    error?: string | boolean;
+    /** Controlled list of tags. Bindable: `bind:value`. */
+    value?: string[];
+    /** Initial tags for the uncontrolled case. */
+    defaultValue?: string[];
+    /** Called with the full list whenever a tag is added or removed. */
+    onValueChange?: (value: string[]) => void;
+    /** Placeholder shown in the entry field. */
+    placeholder?: string;
+    /** Size variant. Defaults to 'md'. */
+    size?: "sm" | "md" | "lg";
+    /** Maximum number of tags. Further entries are rejected once reached. */
+    max?: number;
+    /** Allows a double-click to edit an existing tag in place. Defaults to true. */
+    editable?: boolean;
+    /** Splits pasted or typed text into several tags. Defaults to ','. */
+    delimiter?: string;
+    /** Creates tags from pasted text. Defaults to false. */
+    addOnPaste?: boolean;
+    /** Marks the field required and shows the required indicator. */
+    required?: boolean;
+    /** Disables the control. */
+    disabled?: boolean;
+    /** Makes the tags read-only while keeping them focusable. */
+    readOnly?: boolean;
+    /** Form field name for the hidden inputs. */
+    name?: string;
+    class?: string;
+}
+//# sourceMappingURL=TagsInput.types.d.ts.map

package/dist/components/TagsInput/TagsInput.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TagsInput.types.d.ts","sourceRoot":"","sources":["../../../src/lib/components/TagsInput/TagsInput.types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,cAAc;IAC7B,wDAAwD;IACxD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6EAA6E;IAC7E,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,8CAA8C;IAC9C,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,oEAAoE;IACpE,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC1C,4CAA4C;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sCAAsC;IACtC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,yEAAyE;IACzE,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,gFAAgF;IAChF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sEAAsE;IACtE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wDAAwD;IACxD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iEAAiE;IACjE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB"}

package/dist/components/TagsInput/TagsInput.types.js

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

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

@@ -0,0 +1,4 @@
+export { default as TagsInput } from "./TagsInput.svelte";
+export type { TagsInputProps } from "./TagsInput.types.js";
+export type { TagsInputVariants } from "@ui-organized/core";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/TagsInput/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/TagsInput/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC1D,YAAY,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAC3D,YAAY,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/components/TagsInput/index.js

@@ -0,0 +1 @@
+export { default as TagsInput } from "./TagsInput.svelte";

package/dist/components/TextArea/TextArea.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  import { Field } from "@ark-ui/svelte";
+  import { clsx } from "clsx";
+  import { textAreaFieldStyles } from "@ui-organized/core";
+  import FieldError from "../FieldError/FieldError.svelte";
+  import type { TextAreaProps } from "./TextArea.types.js";
+  // Shares the Input field surface/state styling; TextArea.css layers on the
+  // multi-line specifics (min-height, resize).
+  import "@ui-organized/core/components/Input/Input.css";
+  import "@ui-organized/core/components/TextArea/TextArea.css";
+  import { onMount } from "svelte";
+  import { trackFocusModality } from "@ui-organized/core/focus-modality";
+
+  // Text fields read pointer vs keyboard for a quiet focus state on click.
+  onMount(() => trackFocusModality());
+
+  let {
+    label,
+    helperText,
+    error,
+    size,
+    resize = "both",
+    required,
+    class: className,
+    value = $bindable(),
+    ...textareaProps
+  }: TextAreaProps = $props();
+
+  const isInvalid = $derived(!!error);
+  const errorMessage = $derived(typeof error === "string" ? error : undefined);
+</script>
+
+<Field.Root class={clsx(textAreaFieldStyles({ size }), className)} invalid={isInvalid}>
+  {#if label}
+    <Field.Label class="field__label">
+      {label}
+      {#if required}<span class="field__required" aria-hidden="true"></span>{/if}
+    </Field.Label>
+  {/if}
+  <Field.Textarea
+    class="field__control textarea-field__control"
+    {required}
+    data-resize={resize}
+    bind:value
+    {...textareaProps}
+  />
+  {#if helperText && !isInvalid}
+    <Field.HelperText class="field__description">{helperText}</Field.HelperText>
+  {/if}
+  {#if isInvalid && errorMessage}
+    <Field.ErrorText>
+      {#snippet asChild(props)}
+        <FieldError {...props()} message={errorMessage} />
+      {/snippet}
+    </Field.ErrorText>
+  {/if}
+</Field.Root>

package/dist/components/TextArea/TextArea.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { TextAreaProps } from "./TextArea.types.js";
+import "@ui-organized/core/components/Input/Input.css";
+import "@ui-organized/core/components/TextArea/TextArea.css";
+declare const TextArea: import("svelte").Component<TextAreaProps, {}, "value">;
+type TextArea = ReturnType<typeof TextArea>;
+export default TextArea;
+//# sourceMappingURL=TextArea.svelte.d.ts.map

package/dist/components/TextArea/TextArea.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/TextArea/TextArea.svelte.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAGzD,OAAO,+CAA+C,CAAC;AACvD,OAAO,qDAAqD,CAAC;AA0D7D,QAAA,MAAM,QAAQ,wDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

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

@@ -0,0 +1,29 @@
+import type { HTMLTextareaAttributes } from "svelte/elements";
+import type { ControlSize } from "@ui-organized/core";
+import type { ArkForwardable } from "../../types.js";
+export interface TextAreaProps extends ArkForwardable<Omit<HTMLTextareaAttributes, "class">> {
+    /** Accessible label text rendered above the control. */
+    label?: string;
+    /**
+     * Helper text rendered below the control. Hidden when an error is shown.
+     * Commonly used as a character counter (e.g. "Characters 0/500").
+     */
+    helperText?: string;
+    /**
+     * Error state. Pass a string to show an error message.
+     * Pass `true` to mark the field invalid without a message.
+     */
+    error?: string | boolean;
+    /** Size variant. Defaults to 'md'. */
+    size?: ControlSize;
+    /**
+     * Native resize affordance. Defaults to 'both' (horizontal resizing is capped
+     * at the field's container width). Use 'vertical', 'horizontal', or 'none' to
+     * constrain it.
+     */
+    resize?: "none" | "vertical" | "horizontal" | "both";
+    class?: string;
+    /** The control's value. Bindable: `bind:value`. */
+    value?: string | number | null;
+}
+//# sourceMappingURL=TextArea.types.d.ts.map

package/dist/components/TextArea/TextArea.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.types.d.ts","sourceRoot":"","sources":["../../../src/lib/components/TextArea/TextArea.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AAC9D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAErD,MAAM,WAAW,aACf,SAAQ,cAAc,CAAC,IAAI,CAAC,sBAAsB,EAAE,OAAO,CAAC,CAAC;IAC7D,wDAAwD;IACxD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,sCAAsC;IACtC,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,YAAY,GAAG,MAAM,CAAC;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;CAChC"}

package/dist/components/TextArea/TextArea.types.js

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

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

@@ -0,0 +1,3 @@
+export { default as TextArea } from "./TextArea.svelte";
+export type { TextAreaProps } from "./TextArea.types.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/TextArea/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/TextArea/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,YAAY,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/components/TextArea/index.js

@@ -0,0 +1 @@
+export { default as TextArea } from "./TextArea.svelte";

package/dist/components/Timer/Timer.svelte

@@ -0,0 +1,111 @@
+<script lang="ts">
+  import { Timer as ArkTimer } from "@ark-ui/svelte";
+  import { clsx } from "clsx";
+  import { timerStyles } from "@ui-organized/core";
+  import Button from "../Button/Button.svelte";
+  import type { TimerPart, TimerProps } from "./Timer.types.js";
+  import "@ui-organized/core/components/Timer/Timer.css";
+  import { glyph } from "../../icons/glyph.js";
+
+  const DEFAULT_PARTS: TimerPart[] = ["hours", "minutes", "seconds"];
+
+  let {
+    parts = DEFAULT_PARTS,
+    countdown,
+    startMs,
+    targetMs,
+    autoStart,
+    interval,
+    onComplete,
+    showControls = false,
+    size = "md",
+    variant,
+    showLabels = false,
+    class: className,
+  }: TimerProps = $props();
+
+  /**
+   * Drops `action` from the projected trigger props.
+   *
+   * `action` is a machine prop, not an attribute. `@ark-ui/react` splits it off
+   * with `createSplitProps` and `@ark-ui/vue` declares it as a prop, so neither
+   * puts it on the DOM; `@ark-ui/svelte` merges the whole props object back onto
+   * the element and would render `action="start"` on a <button>, which is not a
+   * valid attribute there. Stripping it keeps the four libraries emitting the
+   * same button.
+   */
+  function withoutAction<T extends object>(props: T): Omit<T, "action"> {
+    const { ...rest } = props;
+    delete (rest as Record<string, unknown>).action;
+    return rest;
+  }
+</script>
+
+<ArkTimer.Root
+  class={clsx(timerStyles({ size, variant }), className)}
+  {countdown}
+  {startMs}
+  {targetMs}
+  {autoStart}
+  {interval}
+  {onComplete}
+>
+  <ArkTimer.Area class="timer__area">
+    {#each parts as part, index (part)}
+      {#if index > 0}
+        <ArkTimer.Separator class="timer__separator" aria-hidden="true">:</ArkTimer.Separator>
+      {/if}
+      <div class="timer__segment">
+        <ArkTimer.Item type={part} class="timer__value" />
+        {#if showLabels}<span class="timer__label">{part}</span>{/if}
+      </div>
+    {/each}
+  </ArkTimer.Area>
+
+  {#if showControls}
+    <ArkTimer.Control class="timer__control">
+      <!--
+        zag hides whichever trigger does not apply to the current state, so
+        start and resume can both be present without a conditional here.
+
+        Each is the library Button projected through Ark's asChild, so they
+        inherit every interactive token instead of restating them. `class` is
+        pulled out and handed over separately because Ark types the projected
+        props in Svelte's own shapes, where it is a `ClassValue` that may be
+        null while the Button takes a string.
+      -->
+      <ArkTimer.ActionTrigger action="start">
+        {#snippet asChild(props)}
+          {@const { class: arkClass, ...triggerProps } = withoutAction(props())}
+          <Button intent="primary" {size} icon={glyph("play")} type="button" class={clsx(arkClass)} {...triggerProps}>
+            Start
+          </Button>
+        {/snippet}
+      </ArkTimer.ActionTrigger>
+      <ArkTimer.ActionTrigger action="pause">
+        {#snippet asChild(props)}
+          {@const { class: arkClass, ...triggerProps } = withoutAction(props())}
+          <Button intent="secondary" {size} icon={glyph("pause")} type="button" class={clsx(arkClass)} {...triggerProps}>
+            Pause
+          </Button>
+        {/snippet}
+      </ArkTimer.ActionTrigger>
+      <ArkTimer.ActionTrigger action="resume">
+        {#snippet asChild(props)}
+          {@const { class: arkClass, ...triggerProps } = withoutAction(props())}
+          <Button intent="secondary" {size} icon={glyph("play")} type="button" class={clsx(arkClass)} {...triggerProps}>
+            Resume
+          </Button>
+        {/snippet}
+      </ArkTimer.ActionTrigger>
+      <ArkTimer.ActionTrigger action="reset">
+        {#snippet asChild(props)}
+          {@const { class: arkClass, ...triggerProps } = withoutAction(props())}
+          <Button intent="ghost" {size} icon={glyph("refresh")} type="button" class={clsx(arkClass)} {...triggerProps}>
+            Reset
+          </Button>
+        {/snippet}
+      </ArkTimer.ActionTrigger>
+    </ArkTimer.Control>
+  {/if}
+</ArkTimer.Root>