@lilydesignsystem/svelte-headless 0.1.0

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

@@ -0,0 +1,10 @@
+type $$ComponentProps = {
+    /** Accessible label for screen readers */
+    label: string;
+    /** The RAG status value to display (e.g. "red", "amber", "green") */
+    value?: string;
+    [key: string]: unknown;
+};
+declare const RedAmberGreenView: import("svelte").Component<$$ComponentProps, {}, "">;
+type RedAmberGreenView = ReturnType<typeof RedAmberGreenView>;
+export default RedAmberGreenView;

package/dist/components/RedOrangeYellowGreenBluePicker/RedOrangeYellowGreenBluePicker.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+    // RedOrangeYellowGreenBluePicker component
+    //
+    // A headless ROYGB (Red/Orange/Yellow/Green/Blue) status input that renders
+    // a native <select> element with five color-coded status options. Extends the
+    // traditional RAG model with additional orange and blue levels for more granular
+    // status reporting in risk registers, dashboards, and multi-tier alert systems.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   label — string, required. Accessible label for the select element.
+    //   value — string, default "". Currently selected status value; bindable.
+    //   ...restProps — additional HTML attributes spread onto the <select>.
+    //
+    // Syntax:
+    //   <RedOrangeYellowGreenBluePicker label="Risk level" bind:value={level} />
+    //
+    // Examples:
+    //   <!-- Pre-selected value -->
+    //   <RedOrangeYellowGreenBluePicker label="Alert status" value="green" />
+    //
+    //   <!-- Two-way binding with extra attributes -->
+    //   <RedOrangeYellowGreenBluePicker label="Project health" bind:value={level} data-dashboard="main" />
+    //
+    // Keyboard:
+    //   - Arrow Up/Down: navigate options (native select behavior)
+    //   - Enter/Space: open the dropdown (native select behavior)
+    //   - Escape: close the dropdown (native select behavior)
+    //
+    // Accessibility:
+    //   - aria-label on the <select> for screen reader context
+    //   - Native <select> provides implicit combobox/listbox role
+    //   - WCAG 2.2 AAA: properly labeled for assistive technology
+    //
+    // Internationalization:
+    //   - The label prop externalizes the accessible label string
+    //   - Option display text ("Red", "Orange", etc.) is hardcoded; wrap or fork to localize
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — consumer provides all styling
+    //   - Value uses $bindable() for two-way binding with bind:value
+    //   - Options are fixed to five values: red, orange, yellow, green, blue
+    //
+    // References:
+    //   - Traffic Light Rating System: https://en.wikipedia.org/wiki/Traffic_light_rating_system
+
+    let {
+        class: className = "",
+        label,
+        value = $bindable(""),
+        ...restProps
+    }: {
+        /** Accessible label for the select element */
+        label: string;
+        /** Currently selected ROYGB status value, bindable */
+        value?: string;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- RedOrangeYellowGreenBluePicker: a select with Red/Orange/Yellow/Green/Blue status options -->
+<select
+    class={`red-orange-yellow-green-blue-picker ${className}`}
+    aria-label={label}
+    bind:value
+    {...restProps}
+>
+    <option value="red">Red</option>
+    <option value="orange">Orange</option>
+    <option value="yellow">Yellow</option>
+    <option value="green">Green</option>
+    <option value="blue">Blue</option>
+</select>

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

@@ -0,0 +1,10 @@
+type $$ComponentProps = {
+    /** Accessible label for the select element */
+    label: string;
+    /** Currently selected ROYGB status value, bindable */
+    value?: string;
+    [key: string]: unknown;
+};
+declare const RedOrangeYellowGreenBluePicker: import("svelte").Component<$$ComponentProps, {}, "value">;
+type RedOrangeYellowGreenBluePicker = ReturnType<typeof RedOrangeYellowGreenBluePicker>;
+export default RedOrangeYellowGreenBluePicker;

package/dist/components/RedOrangeYellowGreenBluePickerButton/RedOrangeYellowGreenBluePickerButton.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+    // RedOrangeYellowGreenBluePickerButton component
+    //
+    // A headless button representing one Red/Orange/Yellow/Green/Blue status choice
+    // within a ROYGB status picker. Renders a <button> with aria-pressed to indicate
+    // the selected state and data-value for consumer CSS targeting. Used in multi-tier
+    // alert systems, dashboards, and risk registers with five severity levels.
+    //
+    // Props:
+    //   value — string, required. The status value (e.g. "red", "orange", "yellow", "green", "blue").
+    //   label — string, required. Accessible name for the button via aria-label.
+    //   selected — boolean, default false. Whether this status is currently selected.
+    //   disabled — boolean, default false. Whether the button is disabled.
+    //   onclick — (event: MouseEvent) => void, optional. Click handler.
+    //   ...restProps — additional HTML attributes spread onto the <button>.
+    //
+    // Syntax:
+    //   <RedOrangeYellowGreenBluePickerButton value="green" label="Green" onclick={handleSelect} />
+    //
+    // Examples:
+    //   <!-- Selected status button -->
+    //   <RedOrangeYellowGreenBluePickerButton value="red" label="Red" selected={true} onclick={handleSelect} />
+    //   <!-- Disabled status button -->
+    //   <RedOrangeYellowGreenBluePickerButton value="yellow" label="Yellow" disabled={true} />
+    //
+    // Keyboard:
+    //   - Tab: Move focus to the button
+    //   - Enter: Activate the button (native button behavior)
+    //   - Space: Activate the button (native button behavior)
+    //
+    // Accessibility:
+    //   - aria-label provides an accessible name for the button
+    //   - aria-pressed indicates whether the status is currently selected
+    //   - data-value exposes the status value for consumer CSS selectors
+    //
+    // Internationalization:
+    //   - The label prop provides the accessible name; no hardcoded strings
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — consumer provides all styling
+    //   - Compound component: used as a child within RedOrangeYellowGreenBluePicker
+    //   - Consumer can use [data-value] CSS selectors for status-based styling
+    //
+    // References:
+    //   - WAI-ARIA Button Pattern: https://www.w3.org/WAI/ARIA/apg/patterns/button/
+    //   - Traffic Light Rating System: https://en.wikipedia.org/wiki/Traffic_light_rating_system
+
+    let {
+        class: className = "",
+        value,
+        label,
+        selected = false,
+        disabled = false,
+        onclick = undefined,
+        ...restProps
+    }: {
+        /** The status value (e.g. "red", "orange", "yellow", "green", "blue"). */
+        value: string;
+        /** Accessible name for the button. */
+        label: string;
+        /** Whether this status is currently selected. */
+        selected?: boolean;
+        /** Whether the button is disabled. */
+        disabled?: boolean;
+        /** Click handler. */
+        onclick?: (event: MouseEvent) => void;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- RedOrangeYellowGreenBluePickerButton.svelte -->
+<button
+    class={`red-orange-yellow-green-blue-picker-button ${className}`}
+    type="button"
+    aria-label={label}
+    aria-pressed={selected}
+    {disabled}
+    data-value={value}
+    {onclick}
+    {...restProps}
+>{label}</button>

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

@@ -0,0 +1,16 @@
+type $$ComponentProps = {
+    /** The status value (e.g. "red", "orange", "yellow", "green", "blue"). */
+    value: string;
+    /** Accessible name for the button. */
+    label: string;
+    /** Whether this status is currently selected. */
+    selected?: boolean;
+    /** Whether the button is disabled. */
+    disabled?: boolean;
+    /** Click handler. */
+    onclick?: (event: MouseEvent) => void;
+    [key: string]: unknown;
+};
+declare const RedOrangeYellowGreenBluePickerButton: import("svelte").Component<$$ComponentProps, {}, "">;
+type RedOrangeYellowGreenBluePickerButton = ReturnType<typeof RedOrangeYellowGreenBluePickerButton>;
+export default RedOrangeYellowGreenBluePickerButton;

package/dist/components/RedOrangeYellowGreenBlueView/RedOrangeYellowGreenBlueView.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+    // RedOrangeYellowGreenBlueView component
+    //
+    // A headless ROYGB (Red/Orange/Yellow/Green/Blue) status view that displays
+    // a five-level color-coded status value as read-only text inside a <span>.
+    // Used to present previously captured ROYGB status data in dashboards, reports,
+    // or detail views where the five-level scale offers more granularity than RAG.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   label — string, required. Accessible label for screen readers via aria-label.
+    //   value — string, default "". The ROYGB status to display (e.g. "red", "orange", "yellow", "green", "blue").
+    //   ...restProps — additional HTML attributes spread onto the <span>.
+    //
+    // Syntax:
+    //   <RedOrangeYellowGreenBlueView label="Risk level" value="yellow" />
+    //
+    // Examples:
+    //   <!-- Display a dynamic status -->
+    //   <RedOrangeYellowGreenBlueView label="Alert status" value={level} />
+    //
+    //   <!-- With extra attributes for testing -->
+    //   <RedOrangeYellowGreenBlueView label="System health" value="blue" data-testid="health" />
+    //
+    // Keyboard:
+    //   - None — this is a passive informational display, not an interactive element.
+    //
+    // Accessibility:
+    //   - aria-label on the <span> for screen reader context
+    //   - Screen readers announce the label and displayed status value
+    //   - WCAG 2.2 AAA: properly labeled for assistive technology
+    //
+    // Internationalization:
+    //   - The label prop externalizes the accessible label string
+    //   - The value is displayed as-is, allowing localized status names
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — consumer provides all styling
+    //   - Read-only display component — not interactive, no $bindable()
+    //   - Consumer can apply color-coded backgrounds or text colors via restProps
+    //
+    // References:
+    //   - WAI-ARIA status role: https://www.w3.org/TR/wai-aria-1.2/#status
+    //   - Traffic Light Rating System: https://en.wikipedia.org/wiki/Traffic_light_rating_system
+
+    let {
+        class: className = "",
+        label,
+        value = "",
+        ...restProps
+    }: {
+        /** Accessible label for screen readers */
+        label: string;
+        /** The ROYGB status value to display */
+        value?: string;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- RedOrangeYellowGreenBlueView: displays a ROYGB status value as text -->
+<span
+    class={`red-orange-yellow-green-blue-view ${className}`}
+    aria-label={label}
+    {...restProps}>{value}</span
+>

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

@@ -0,0 +1,10 @@
+type $$ComponentProps = {
+    /** Accessible label for screen readers */
+    label: string;
+    /** The ROYGB status value to display */
+    value?: string;
+    [key: string]: unknown;
+};
+declare const RedOrangeYellowGreenBlueView: import("svelte").Component<$$ComponentProps, {}, "">;
+type RedOrangeYellowGreenBlueView = ReturnType<typeof RedOrangeYellowGreenBlueView>;
+export default RedOrangeYellowGreenBlueView;

package/dist/components/RelatedContent/RelatedContent.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        label = undefined,
+        children,
+        ...restProps
+    }: {
+        label?: string;
+        children: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- RelatedContent.svelte -->
+<aside
+    class={`related-content ${className}`}
+
+    aria-label={label}
+    {...restProps}
+>
+    {@render children?.()}
+</aside>

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

@@ -0,0 +1,9 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    label?: string;
+    children: Snippet;
+    [key: string]: unknown;
+};
+declare const RelatedContent: import("svelte").Component<$$ComponentProps, {}, "">;
+type RelatedContent = ReturnType<typeof RelatedContent>;
+export default RelatedContent;

package/dist/components/ResetInput/ResetInput.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+    // ResetInput component
+    //
+    // A headless form reset button using the native HTML <input type="reset">
+    // element. When clicked within a form, it resets all sibling form fields to
+    // their initial default values. Useful in forms where users may want to clear
+    // all entered data and start over.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   value — string, default "Reset". The visible button text.
+    //   disabled — boolean, default false. Whether the button is disabled.
+    //   ...restProps — additional HTML attributes spread onto the <input>.
+    //
+    // Syntax:
+    //   <ResetInput />
+    //
+    // Examples:
+    //   <!-- Custom label -->
+    //   <ResetInput value="Clear form" />
+    //
+    //   <!-- Conditionally disabled -->
+    //   <ResetInput value="Start over" disabled={!formDirty} />
+    //
+    // Keyboard:
+    //   - Enter: activates the reset button (native behavior)
+    //   - Space: activates the reset button (native behavior)
+    //
+    // Accessibility:
+    //   - Native <input type="reset"> has implicit button role
+    //   - The value attribute serves as the accessible name
+    //   - No additional ARIA attributes needed
+    //
+    // Internationalization:
+    //   - The value prop externalizes the button text for localization
+    //   - Default "Reset" should be overridden in non-English contexts
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — consumer provides all styling
+    //   - Uses native browser form reset behavior, no custom logic
+    //   - No children snippet — button text comes from the value prop
+    //
+    // References:
+    //   - MDN input type="reset": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/reset
+
+    let {
+        class: className = "",
+        value = "Reset",
+        disabled = false,
+        ...restProps
+    }: {
+        /** Button text. */
+        value?: string;
+        /** Whether disabled. */
+        disabled?: boolean;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- ResetInput.svelte -->
+<input
+    class={`reset-input ${className}`}
+    type="reset"
+    {value}
+    {disabled}
+    {...restProps}
+/>

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

@@ -0,0 +1,10 @@
+type $$ComponentProps = {
+    /** Button text. */
+    value?: string;
+    /** Whether disabled. */
+    disabled?: boolean;
+    [key: string]: unknown;
+};
+declare const ResetInput: import("svelte").Component<$$ComponentProps, {}, "">;
+type ResetInput = ReturnType<typeof ResetInput>;
+export default ResetInput;

package/dist/components/Resizable/Resizable.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+    // Resizable component
+    //
+    // A headless resizable container that renders a focusable <div> region with
+    // a data-resize attribute indicating the allowed resize direction. Used for
+    // adjustable panels, panes, code editors, sidebars, or preview areas where
+    // the user controls the container size.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   label — string, required. Accessible name for the region via aria-label.
+    //   direction — "both" | "horizontal" | "vertical", default "both". Which directions resizing is allowed.
+    //   children — Snippet, required. Content to render inside the container.
+    //   ...restProps — additional HTML attributes spread onto the <div>.
+    //
+    // Syntax:
+    //   <Resizable label="Resizable panel" direction="both">
+    //     <p>Content</p>
+    //   </Resizable>
+    //
+    // Examples:
+    //   <!-- Horizontal-only resizing -->
+    //   <Resizable label="Sidebar" direction="horizontal">
+    //     <nav>Links</nav>
+    //   </Resizable>
+    //
+    //   <!-- Vertical-only resizing -->
+    //   <Resizable label="Preview" direction="vertical">
+    //     <div>Preview content</div>
+    //   </Resizable>
+    //
+    // Keyboard:
+    //   - Tab: focuses the resizable region (tabindex="0")
+    //   - Consumer implements any keyboard-driven resize behavior
+    //
+    // Accessibility:
+    //   - role="region" identifies the container as a landmark
+    //   - aria-label provides the accessible name
+    //   - tabindex="0" makes the container keyboard-focusable
+    //   - data-resize attribute exposes the direction for CSS targeting
+    //
+    // Internationalization:
+    //   - The label prop externalizes the accessible label string
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — consumer provides all styling
+    //   - Consumer must apply CSS resize and overflow properties based on data-resize
+    //   - No internal resize logic — purely structural and semantic
+    //
+    // References:
+    //   - WAI-ARIA Region Role: https://www.w3.org/TR/wai-aria-1.2/#region
+    //   - WAI-ARIA Window Splitter Pattern: https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/
+
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        label,
+        direction = "both",
+        children,
+        ...restProps
+    }: {
+        /** Accessible label. */
+        label: string;
+        /** Resize direction. */
+        direction?: "both" | "horizontal" | "vertical";
+        /** Content. */
+        children: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- Resizable.svelte -->
+<div
+    class={`resizable ${className}`}
+    role="region"
+    aria-label={label}
+    tabindex="0"
+    data-resize={direction}
+    {...restProps}
+>
+    {@render children?.()}
+</div>

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

@@ -0,0 +1,13 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    /** Accessible label. */
+    label: string;
+    /** Resize direction. */
+    direction?: "both" | "horizontal" | "vertical";
+    /** Content. */
+    children: Snippet;
+    [key: string]: unknown;
+};
+declare const Resizable: import("svelte").Component<$$ComponentProps, {}, "">;
+type Resizable = ReturnType<typeof Resizable>;
+export default Resizable;

package/dist/components/ReviewDate/ReviewDate.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+    // ReviewDate component
+    //
+    // A headless review date component that renders a semantic <time> element with
+    // a machine-readable datetime attribute and human-readable display text via a
+    // children snippet. Commonly used in dashboards, compliance tracking, audit logs,
+    // and scheduling interfaces where dates must be both human-readable and machine-parseable.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   label — string, required. Accessible label for screen readers via aria-label.
+    //   datetime — string, required. Machine-readable date/time in ISO 8601 format.
+    //   children — Snippet, required. Human-readable display text for the date.
+    //   ...restProps — additional HTML attributes spread onto the <time>.
+    //
+    // Syntax:
+    //   <ReviewDate label="Next review" datetime="2025-06-15">June 15, 2025</ReviewDate>
+    //
+    // Examples:
+    //   <!-- Dynamic date with formatted output -->
+    //   <ReviewDate label="Last audit" datetime={isoDate}>{formattedDate}</ReviewDate>
+    //
+    //   <!-- With extra attributes -->
+    //   <ReviewDate label="Due date" datetime="2025-12-31" data-urgency="high">Dec 31, 2025</ReviewDate>
+    //
+    // Keyboard:
+    //   - None — this is an informational display, not an interactive element.
+    //
+    // Accessibility:
+    //   - Semantic <time> element provides machine-readable date context
+    //   - aria-label for screen reader context beyond the visible text
+    //   - The datetime attribute enables browsers and assistive technology to parse dates
+    //   - WCAG 2.2 AAA: properly labeled with semantic time element
+    //
+    // Internationalization:
+    //   - The label prop externalizes the accessible label string
+    //   - The children snippet allows localized date formatting
+    //   - The datetime attribute uses ISO 8601, which is locale-independent
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — consumer provides all styling
+    //   - Both label and datetime are required — no defaults
+    //   - Children snippet provides the human-readable date text
+    //
+    // References:
+    //   - HTML <time> element: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time
+    //   - ISO 8601 Date Format: https://en.wikipedia.org/wiki/ISO_8601
+
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        label,
+        datetime,
+        children,
+        ...restProps
+    }: {
+        /** Accessible label for screen readers */
+        label: string;
+        /** Machine-readable date/time in ISO 8601 format */
+        datetime: string;
+        /** Human-readable display text for the date */
+        children: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- ReviewDate.svelte -->
+<time
+    class={`review-date ${className}`}
+    aria-label={label}
+    {datetime}
+    {...restProps}
+>
+    {@render children?.()}
+</time>

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

@@ -0,0 +1,13 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    /** Accessible label for screen readers */
+    label: string;
+    /** Machine-readable date/time in ISO 8601 format */
+    datetime: string;
+    /** Human-readable display text for the date */
+    children: Snippet;
+    [key: string]: unknown;
+};
+declare const ReviewDate: import("svelte").Component<$$ComponentProps, {}, "">;
+type ReviewDate = ReturnType<typeof ReviewDate>;
+export default ReviewDate;

package/dist/components/RomaniaCodNumericPersonalInput/RomaniaCodNumericPersonalInput.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+    // RomaniaCodNumericPersonalInput component
+    //
+    // A headless input for entering Romania's Cod Numeric Personal (CNP).
+    // Format: 13 digits: gender and century (1/3/5/7 male; 2/4/6/8 female; 9 foreigner), date of birth (YYMMDD), country zone (01-52, or 99 for Bucharest sectors), serial (3 digits), and a Modulus-11 checksum digit.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   label — string, required. Accessible label for screen readers via aria-label.
+    //   value — string, default "". Bindable input value; supports bind:value.
+    //   required — boolean, default false. Whether the input is required for form submission.
+    //   disabled — boolean, default false. Whether the input is disabled.
+    //   ...restProps — additional HTML attributes spread onto the <input>.
+    //
+    // Syntax:
+    //   <RomaniaCodNumericPersonalInput label="Personal Numerical Code" bind:value />
+    //
+    // Accessibility:
+    //   - aria-label provides the accessible name for screen readers
+    //   - autocomplete="off" protects sensitive identifiers
+    //   - required and disabled states are conveyed to assistive technology
+    //
+    // Internationalization:
+    //   - The label prop externalizes user-facing text for translation
+    //
+    // References:
+    //   - https://en.wikipedia.org/wiki/National_identification_number#Romania
+
+    let {
+        class: className = "",
+        label,
+        value = $bindable(""),
+        required = false,
+        disabled = false,
+        ...restProps
+    }: {
+        label: string;
+        value?: string;
+        required?: boolean;
+        disabled?: boolean;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- RomaniaCodNumericPersonalInput.svelte -->
+<input
+    class={`romania-cod-numeric-personal-input ${className}`}
+    type="text"
+    aria-label={label}
+    autocomplete="off"
+    bind:value
+    {required}
+    {disabled}
+    {...restProps}
+/>

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

@@ -0,0 +1,10 @@
+type $$ComponentProps = {
+    label: string;
+    value?: string;
+    required?: boolean;
+    disabled?: boolean;
+    [key: string]: unknown;
+};
+declare const RomaniaCodNumericPersonalInput: import("svelte").Component<$$ComponentProps, {}, "value">;
+type RomaniaCodNumericPersonalInput = ReturnType<typeof RomaniaCodNumericPersonalInput>;
+export default RomaniaCodNumericPersonalInput;