@ui-organized/svelte 0.0.0-stage → 0.1.0

package/dist/components/ScrollArea/ScrollArea.svelte

@@ -0,0 +1,65 @@
+<!--
+  A scrollable container with a custom, themed scrollbar. Give the Root a bounded
+  height (via `style="height: 200px"`, or a class that sets one) so its content
+  can overflow.
+-->
+<script module lang="ts">
+  import type { StyleValue } from "./ScrollArea.types.js";
+
+  /**
+   * A style record collapsed to the string the DOM attribute takes.
+   *
+   * Svelte's `style` attribute is a string and React's `style` prop is an
+   * object, so a component that accepts both has to bridge the two somewhere.
+   * Here rather than at the call site, so a props object written once works
+   * against every library — see `StyleValue`.
+   */
+  function toStyleText(style: StyleValue | undefined): string | undefined {
+    if (style == null) return undefined;
+    if (typeof style === "string") return style || undefined;
+    const declarations = Object.entries(style)
+      .filter(([, value]) => value != null && value !== "")
+      .map(([property, value]) => `${property.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`)}:${value}`);
+    return declarations.length ? declarations.join(";") : undefined;
+  }
+</script>
+
+<script lang="ts">
+  import { ScrollArea as ArkScrollArea } from "@ark-ui/svelte";
+  import { clsx } from "clsx";
+  import type { ScrollAreaProps } from "./ScrollArea.types.js";
+  import "@ui-organized/core/components/ScrollArea/ScrollArea.css";
+
+  let { orientation = "vertical", style, class: className, children }: ScrollAreaProps = $props();
+
+  const showVertical = $derived(orientation === "vertical" || orientation === "both");
+  const showHorizontal = $derived(orientation === "horizontal" || orientation === "both");
+  const styleText = $derived(toStyleText(style));
+</script>
+
+<ArkScrollArea.Root class={clsx("scroll-area", className)} style={styleText}>
+  <!--
+    The viewport is the element that scrolls, and a pointer drag is the only way
+    to reach content below the fold unless it can take focus. Content that is
+    itself focusable (links, inputs) makes this redundant but harmless; content
+    that isn't — prose, a long table — depends on it.
+  -->
+  <ArkScrollArea.Viewport class="scroll-area__viewport" tabindex={0}>
+    <ArkScrollArea.Content class="scroll-area__content">
+      {@render children?.()}
+    </ArkScrollArea.Content>
+  </ArkScrollArea.Viewport>
+  {#if showVertical}
+    <ArkScrollArea.Scrollbar orientation="vertical" class="scroll-area__scrollbar">
+      <ArkScrollArea.Thumb class="scroll-area__thumb" />
+    </ArkScrollArea.Scrollbar>
+  {/if}
+  {#if showHorizontal}
+    <ArkScrollArea.Scrollbar orientation="horizontal" class="scroll-area__scrollbar">
+      <ArkScrollArea.Thumb class="scroll-area__thumb" />
+    </ArkScrollArea.Scrollbar>
+  {/if}
+  {#if orientation === "both"}
+    <ArkScrollArea.Corner class="scroll-area__corner" />
+  {/if}
+</ArkScrollArea.Root>

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollArea.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/ScrollArea/ScrollArea.svelte.ts"],"names":[],"mappings":"AAyBA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,yDAAyD,CAAC;AA0CjE,QAAA,MAAM,UAAU,qDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

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

@@ -0,0 +1,25 @@
+import type { Snippet } from "svelte";
+/**
+ * An inline style, in either dialect.
+ *
+ * A string is what a Svelte consumer writes. The record is React's spelling, and
+ * it is accepted rather than rejected so that one props object drives the same
+ * component in every library — the Vue package gets this for free from Vue's own
+ * style normaliser, and the parity gate hands all three the same input.
+ *
+ * A number is written through unchanged, so give lengths their unit.
+ */
+export type StyleValue = string | Record<string, string | number>;
+export interface ScrollAreaProps {
+    /**
+     * Which scrollbars to render. Defaults to 'vertical'.
+     * The Root needs a bounded height/width (via `style` or `class`) to scroll.
+     */
+    orientation?: "vertical" | "horizontal" | "both";
+    /** Inline styles applied to the Root — typically a `height`/`maxHeight`. */
+    style?: StyleValue;
+    class?: string;
+    /** Scrollable content. */
+    children?: Snippet;
+}
+//# sourceMappingURL=ScrollArea.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollArea.types.d.ts","sourceRoot":"","sources":["../../../src/lib/components/ScrollArea/ScrollArea.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC;;;;;;;;;GASG;AACH,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;AAElE,MAAM,WAAW,eAAe;IAC9B;;;OAGG;IACH,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,GAAG,MAAM,CAAC;IACjD,4EAA4E;IAC5E,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB"}

package/dist/components/ScrollArea/ScrollArea.types.js

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

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

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

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

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

package/dist/components/ScrollArea/index.js

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

package/dist/components/SearchInput/SearchInput.svelte

@@ -0,0 +1,111 @@
+<script lang="ts">
+  import { Field } from "@ark-ui/svelte";
+  import { clsx } from "clsx";
+  import { CONTROL_ICON_SIZE, searchInputFieldStyles } from "@ui-organized/core";
+  import Icon from "../Icon/Icon.svelte";
+  import FieldError from "../FieldError/FieldError.svelte";
+  import type { SearchInputProps } from "./SearchInput.types.js";
+  // Shares the Input field surface/state styling; InputAffix.css layers on the
+  // leading icon and clear button.
+  import "@ui-organized/core/components/Input/Input.css";
+  import "@ui-organized/core/components/Input/InputAffix.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());
+
+  let {
+    label,
+    helperText,
+    error,
+    size,
+    required,
+    clearable = true,
+    onClear,
+    class: className,
+    value = $bindable(),
+    defaultValue,
+    disabled,
+    ...inputProps
+  }: SearchInputProps = $props();
+
+  const isInvalid = $derived(!!error);
+  const errorMessage = $derived(typeof error === "string" ? error : undefined);
+
+  let inputEl = $state<HTMLInputElement | null>(null);
+
+  // React has to mirror the value into state and re-sync it from an effect,
+  // because a controlled input's value lives outside the component. `bind:value`
+  // puts it here whether or not the consumer binds as well, so the clear button
+  // can just be derived — no second copy to keep in step.
+  const hasValue = $derived(String((value ?? defaultValue) ?? "").length > 0);
+  const showClear = $derived(clearable && hasValue && !disabled);
+
+  function clear() {
+    if (inputEl) {
+      // Assigning `.value` fires no event, so a consumer listening on `oninput`
+      // rather than binding would never learn the field was cleared.
+      inputEl.value = "";
+      inputEl.dispatchEvent(new Event("input", { bubbles: true }));
+      inputEl.focus();
+    }
+    value = "";
+    onClear?.();
+  }
+</script>
+
+<Field.Root class={clsx(searchInputFieldStyles({ 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}
+  <div class="input-affix">
+    <span class="input-affix__adornment input-affix__adornment--start" aria-hidden="true">
+      <Icon name={glyph("search")} size={CONTROL_ICON_SIZE[size ?? "md"]} />
+    </span>
+    <Field.Input
+      bind:ref={inputEl}
+      type="search"
+      class={clsx(
+        "field__control",
+        "field__control--affix-start",
+        showClear && "field__control--affix-end",
+      )}
+      {required}
+      {disabled}
+      bind:value
+      {defaultValue}
+      {...inputProps}
+    />
+    {#if showClear}
+      <!--
+        Out of the tab order: the field it clears is the next stop anyway, and a
+        control that appears and disappears as you type would otherwise shift the
+        tab sequence under the keyboard user mid-word.
+      -->
+      <button
+        type="button"
+        class="input-affix__adornment input-affix__adornment--end input-affix__action"
+        onclick={clear}
+        aria-label="Clear search"
+        tabindex={-1}
+      >
+        <Icon name={glyph("close")} size={CONTROL_ICON_SIZE[size ?? "md"]} />
+      </button>
+    {/if}
+  </div>
+  {#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/SearchInput/SearchInput.svelte.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/SearchInput/SearchInput.svelte.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAG/D,OAAO,+CAA+C,CAAC;AACvD,OAAO,oDAAoD,CAAC;AAoG5D,QAAA,MAAM,WAAW,2DAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

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

@@ -0,0 +1,26 @@
+import type { HTMLInputAttributes } from "svelte/elements";
+import type { ControlSize } from "@ui-organized/core";
+import type { ArkForwardable } from "../../types.js";
+export interface SearchInputProps extends ArkForwardable<Omit<HTMLInputAttributes, "size" | "type" | "class">> {
+    /** 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;
+    /** Size variant. Defaults to 'md'. */
+    size?: ControlSize;
+    /**
+     * Show the clear (x) button while the field has a value. Defaults to `true`.
+     */
+    clearable?: boolean;
+    /** Called after the field is cleared via the clear button. */
+    onClear?: () => void;
+    class?: string;
+    /** The control's value. Bindable: `bind:value`. */
+    value?: string | number | null;
+}
+//# sourceMappingURL=SearchInput.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.types.d.ts","sourceRoot":"","sources":["../../../src/lib/components/SearchInput/SearchInput.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAErD,MAAM,WAAW,gBACf,SAAQ,cAAc,CAAC,IAAI,CAAC,mBAAmB,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;IAC5E,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,sCAAsC;IACtC,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,8DAA8D;IAC9D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;CAChC"}

package/dist/components/SearchInput/SearchInput.types.js

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/SearchInput/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,YAAY,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,YAAY,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/components/SearchInput/index.js

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

package/dist/components/SegmentedControl/SegmentedControl.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+  import { SegmentGroup as ArkSegmentGroup } from "@ark-ui/svelte";
+  import { clsx } from "clsx";
+  import { OMIT_ARIA, segmentedControlStyles } from "@ui-organized/core";
+  import Icon from "../Icon/Icon.svelte";
+  import type { SegmentedControlProps } from "./SegmentedControl.types.js";
+  import "@ui-organized/core/components/SegmentedControl/SegmentedControl.css";
+
+  /** Leading icons render at 16px across every size. */
+  const ICON_SIZE = 16;
+
+  let {
+    items,
+    value = $bindable(),
+    defaultValue,
+    onValueChange,
+    size = "md",
+    disabled,
+    name,
+    class: className,
+    "aria-label": ariaLabel,
+  }: SegmentedControlProps = $props();
+
+  // Uncontrolled controls default to the first segment so the indicator has a
+  // starting position; ignored when a controlled `value` is supplied.
+  const resolvedDefault = $derived(
+    value == null ? (defaultValue ?? items[0]?.value) : undefined,
+  );
+</script>
+
+<!--
+  The control is named by `aria-label`; it renders no Label part, so Ark's
+  `aria-labelledby` would point at an element that never exists — and a dangling
+  IDREF outranks the label that is actually there.
+-->
+<ArkSegmentGroup.Root
+  {value}
+  defaultValue={resolvedDefault}
+  onValueChange={(details) => {
+    if (details.value != null) {
+      value = details.value;
+      onValueChange?.(details.value);
+    }
+  }}
+  {disabled}
+  {name}
+  orientation="horizontal"
+  aria-label={ariaLabel}
+  aria-labelledby={OMIT_ARIA}
+  class={clsx(segmentedControlStyles({ size }), className)}
+>
+  <!-- Sliding highlight behind the selected segment. -->
+  <ArkSegmentGroup.Indicator class="segmented__indicator" />
+  {#each items as item (item.value)}
+    <ArkSegmentGroup.Item value={item.value} disabled={item.disabled} class="segmented__item">
+      {#if item.icon}
+        <Icon name={item.icon} size={ICON_SIZE} class="segmented__item-icon" />
+      {/if}
+      <ArkSegmentGroup.ItemText class="segmented__item-text">
+        {#if typeof item.label === "string"}{item.label}{:else}{@render item.label()}{/if}
+      </ArkSegmentGroup.ItemText>
+      <ArkSegmentGroup.ItemHiddenInput />
+    </ArkSegmentGroup.Item>
+  {/each}
+</ArkSegmentGroup.Root>

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/SegmentedControl/SegmentedControl.svelte.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,6BAA6B,CAAC;AACzE,OAAO,qEAAqE,CAAC;AAwD7E,QAAA,MAAM,gBAAgB,gEAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

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

@@ -0,0 +1,39 @@
+import type { IconComponent, IconName } from "../Icon/Icon.types.js";
+import type { Snippet } from "svelte";
+import type { ControlSize } from "@ui-organized/core";
+export interface SegmentedControlItem {
+    /** Unique value reported (and submitted) when this segment is selected. */
+    value: string;
+    /**
+     * Visible 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;
+    /** Optional leading icon. */
+    icon?: IconName | IconComponent;
+    /** Disable just this segment. */
+    disabled?: boolean;
+}
+export interface SegmentedControlProps {
+    /** Segments to render, left to right. */
+    items: SegmentedControlItem[];
+    /** Selected value. Bindable: `bind:value`. */
+    value?: string;
+    /** Uncontrolled initial value. Defaults to the first item's value. */
+    defaultValue?: string;
+    /** Called with the newly selected value. */
+    onValueChange?: (value: string) => void;
+    /** Size. Defaults to 'md'. */
+    size?: ControlSize;
+    /** Disable the entire control. */
+    disabled?: boolean;
+    /** Form field name for the underlying radio inputs. */
+    name?: string;
+    /** Accessible label for the group. */
+    "aria-label"?: string;
+    class?: string;
+}
+//# sourceMappingURL=SegmentedControl.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl.types.d.ts","sourceRoot":"","sources":["../../../src/lib/components/SegmentedControl/SegmentedControl.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACrE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAEtD,MAAM,WAAW,oBAAoB;IACnC,2EAA2E;IAC3E,KAAK,EAAE,MAAM,CAAC;IACd;;;;;;OAMG;IACH,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,6BAA6B;IAC7B,IAAI,CAAC,EAAE,QAAQ,GAAG,aAAa,CAAC;IAChC,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,qBAAqB;IACpC,yCAAyC;IACzC,KAAK,EAAE,oBAAoB,EAAE,CAAC;IAC9B,8CAA8C;IAC9C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sEAAsE;IACtE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,4CAA4C;IAC5C,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,8BAA8B;IAC9B,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uDAAuD;IACvD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB"}

package/dist/components/SegmentedControl/SegmentedControl.types.js

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/SegmentedControl/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,YAAY,EACV,qBAAqB,EAAE,oBAAoB,GAC5C,MAAM,6BAA6B,CAAC;AACrC,YAAY,EAAE,wBAAwB,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/components/SegmentedControl/index.js

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

package/dist/components/Select/Select.svelte

@@ -0,0 +1,144 @@
+<script lang="ts">
+  import { Field, Select as ArkSelect, Portal, createListCollection } from "@ark-ui/svelte";
+  import { clsx } from "clsx";
+  import { CONTROL_ICON_SIZE, selectFieldStyles, OMIT_ARIA } from "@ui-organized/core";
+  import Icon from "../Icon/Icon.svelte";
+  import FieldError from "../FieldError/FieldError.svelte";
+  import SelectTrigger from "./SelectTrigger.svelte";
+  import type { SelectProps } from "./Select.types.js";
+  import "@ui-organized/core/components/Select/Select.css";
+  import { glyph } from "../../icons/glyph.js";
+
+  let {
+    options,
+    value = $bindable(),
+    defaultValue,
+    onValueChange,
+    open = $bindable(),
+    defaultOpen,
+    onOpenChange,
+    placeholder,
+    label,
+    helperText,
+    error,
+    size,
+    variant,
+    disabled,
+    name,
+    required,
+    class: className,
+    portalContainer,
+  }: SelectProps = $props();
+
+  const isInvalid = $derived(!!error);
+  const errorMessage = $derived(typeof error === "string" ? error : undefined);
+  const iconSize = $derived(CONTROL_ICON_SIZE[size ?? "md"]);
+
+  // The ghost variant shows no label. It still renders one — visually hidden —
+  // because Ark names the trigger, the listbox and the hidden <select> after the
+  // Label part, and an `aria-label` on the trigger alone can neither replace a
+  // dangling reference nor reach the other two.
+  const isGhost = $derived(variant === "ghost");
+
+  // Ark drives the dropdown off a collection rather than children; build it from
+  // the `options` array (label -> display text, value -> form value).
+  const collection = $derived(
+    createListCollection({
+      items: options,
+      itemToValue: (item) => item.value,
+      itemToString: (item) => item.label,
+      isItemDisabled: (item) => !!item.disabled,
+    }),
+  );
+</script>
+
+<Field.Root
+  class={clsx(selectFieldStyles({ size, variant }), className)}
+  invalid={isInvalid}
+  {disabled}
+>
+  <!--
+    Ark Select.Root renders a wrapping <div>; `display:contents` keeps the label,
+    trigger and helper as direct flex children of the field.
+  -->
+  <!--
+    `open` is passed as a plain prop rather than bound: Ark's Select.Root does
+    not declare it bindable the way Popover and Dialog do. The local state is
+    kept in step through onOpenChange instead, so `bind:open` still works on
+    *this* component.
+  -->
+  <ArkSelect.Root
+    class="select-field__control"
+    {collection}
+    value={value != null ? [value] : undefined}
+    defaultValue={defaultValue != null ? [defaultValue] : undefined}
+    onValueChange={(details) => {
+      const next = details.value[0];
+      if (next != null) {
+        value = next;
+        onValueChange?.(next);
+      }
+    }}
+    {open}
+    {defaultOpen}
+    onOpenChange={(details) => {
+      open = details.open;
+      onOpenChange?.(details.open);
+    }}
+    invalid={isInvalid}
+    {disabled}
+    {name}
+    {required}
+    positioning={{ placement: "bottom-start", gutter: 4, strategy: "fixed" }}
+  >
+    {#if label}
+      <ArkSelect.Label class={isGhost ? "select-field__label--hidden" : "field__label"}>
+        {label}
+        {#if required && !isGhost}<span class="field__required" aria-hidden="true"></span>{/if}
+      </ArkSelect.Label>
+    {/if}
+    <SelectTrigger hasLabel={!!label}>
+      {#snippet children()}
+        <ArkSelect.ValueText class="select-field__value" {placeholder} />
+        <ArkSelect.Indicator class="select-field__icon">
+          <Icon name={glyph("chevron-down")} size={iconSize} />
+        </ArkSelect.Indicator>
+      {/snippet}
+    </SelectTrigger>
+    <Portal container={portalContainer ?? undefined}>
+      <ArkSelect.Positioner class="select-positioner">
+        <ArkSelect.Content
+          class={clsx("select-popup", isGhost && "select-popup--ghost")}
+          aria-labelledby={label ? undefined : OMIT_ARIA}
+        >
+          <!--
+            Items sit directly in Content: with the default composite select,
+            Content *is* the listbox, and Select.List is a second labelled
+            wrapper meant for the non-composite mode. Between the listbox and its
+            options it counts as a child that isn't an option, which a listbox
+            may not have.
+          -->
+          {#each options as opt (opt.value)}
+            <ArkSelect.Item item={opt} class="select-popup__item text-default-body-large">
+              <ArkSelect.ItemText>{opt.label}</ArkSelect.ItemText>
+              <ArkSelect.ItemIndicator class="select-popup__item-indicator">
+                <Icon name={glyph("check")} size={iconSize} />
+              </ArkSelect.ItemIndicator>
+            </ArkSelect.Item>
+          {/each}
+        </ArkSelect.Content>
+      </ArkSelect.Positioner>
+    </Portal>
+    <ArkSelect.HiddenSelect aria-labelledby={label ? undefined : OMIT_ARIA} />
+  </ArkSelect.Root>
+  {#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/Select/Select.svelte.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Select.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Select/Select.svelte.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,iDAAiD,CAAC;AAmHzD,QAAA,MAAM,MAAM,+DAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

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

@@ -0,0 +1,54 @@
+import type { ControlSize } from "@ui-organized/core";
+export interface SelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+export interface SelectProps {
+    /** Selectable options. */
+    options: SelectOption[];
+    /** Selected value. Bindable: `bind:value`. */
+    value?: string;
+    /** Initial selected value for uncontrolled usage. */
+    defaultValue?: string;
+    /** Callback fired when the selected value changes. */
+    onValueChange?: (value: string) => void;
+    /** Open state of the dropdown. Bindable: `bind:open`. */
+    open?: boolean;
+    /** Initial open state for uncontrolled usage. */
+    defaultOpen?: boolean;
+    /** Callback fired when the dropdown opens or closes. */
+    onOpenChange?: (open: boolean) => void;
+    /** Placeholder text shown when nothing is selected. */
+    placeholder?: string;
+    /** Accessible label rendered above the trigger. */
+    label?: string;
+    /** Helper text rendered below the trigger. Hidden when 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;
+    /** Size variant. Defaults to 'md'. */
+    size?: ControlSize;
+    /**
+     * Visual variant. Defaults to 'default'. `'ghost'` renders a borderless,
+     * label-less trigger that mirrors the ghost Button's color states.
+     */
+    variant?: "default" | "ghost";
+    /** Whether the select should ignore user interaction. */
+    disabled?: boolean;
+    /** Name attribute for form submission. */
+    name?: string;
+    /** Whether a value is required for form submission. */
+    required?: boolean;
+    class?: string;
+    /**
+     * DOM element to portal the dropdown popup into. Defaults to `document.body`.
+     * Set this to a themed container when theme variables are scoped to a subtree
+     * so the popup inherits them instead of the document defaults.
+     */
+    portalContainer?: HTMLElement | null;
+}
+//# sourceMappingURL=Select.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Select.types.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Select/Select.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAEtD,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,WAAW;IAC1B,0BAA0B;IAC1B,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,8CAA8C;IAC9C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qDAAqD;IACrD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,sDAAsD;IACtD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,yDAAyD;IACzD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,iDAAiD;IACjD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,wDAAwD;IACxD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,uDAAuD;IACvD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0EAA0E;IAC1E,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,sCAAsC;IACtC,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC9B,yDAAyD;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uDAAuD;IACvD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,eAAe,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CACtC"}

package/dist/components/Select/Select.types.js

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