@domphy/ui 0.18.1 → 0.18.3

package/dist/index.d.cts

@@ -602,6 +602,21 @@ declare function inputNumber(props?: {
     accentColor?: ValueOrState<ThemeColor>;
 }): PartialElement;
 
+/**
+ * Password input wrapper: a styled `<div>` that inserts an `<input type="password">`
+ * and a show/hide toggle button. The outer div carries the focus-ring outline via
+ * `:focus-within`. Apply to an empty `<div>`.
+ *
+ * @hostTag div
+ * @param props.color - Base color tone for border/background/text. Defaults to `"neutral"`.
+ * @param props.accentColor - Accent outline color on focus-within. Defaults to `"primary"`.
+ * @example { div: null, $: [inputPassword()] }
+ */
+declare function inputPassword(props?: {
+    color?: ValueOrState<ThemeColor>;
+    accentColor?: ValueOrState<ThemeColor>;
+}): PartialElement;
+
 /**
  * Lays out a one-time-password container as a horizontal row of inputs and
  * wires keyboard navigation: auto-advance on input, backspace/arrow movement,
@@ -1003,6 +1018,42 @@ declare function rating(props?: {
     color?: ThemeColor;
 }): PartialElement;
 
+/**
+ * Circular ring progress indicator rendered via CSS `conic-gradient` and a
+ * circular `mask`. Progress starts at 12 o'clock and advances clockwise.
+ * Exposes `role="progressbar"` with `aria-valuenow/min/max`. Apply to a `<div>`.
+ *
+ * @hostTag div
+ * @param props.value - Progress percentage 0–100. Accepts a value or reactive state. Defaults to `0`.
+ * @param props.color - Theme color for the filled arc. Accepts a value or reactive state. Defaults to `"primary"`.
+ * @param props.trackColor - Theme color for the background track. Accepts a value or reactive state. Defaults to `"neutral"`.
+ * @param props.size - Diameter in `themeSpacing` units. Defaults to `16` (= `4em`).
+ * @param props.thickness - Ring stroke as a fraction of the radius (0–0.5). Defaults to `0.25`.
+ * @example { div: null, $: [ringProgress({ value: 65 })] }
+ * @example { div: null, $: [ringProgress({ value: loadingState, color: "success", size: 20 })] }
+ */
+declare function ringProgress(props?: {
+    value?: ValueOrState<number>;
+    color?: ValueOrState<ThemeColor>;
+    trackColor?: ValueOrState<ThemeColor>;
+    size?: number;
+    thickness?: number;
+}): PartialElement;
+
+/**
+ * Applies thin, themed overlay scrollbars to any scrollable container.
+ * Covers WebKit (Chrome/Safari/Edge) via `::-webkit-scrollbar` pseudo-elements
+ * and Firefox via `scrollbar-width`/`scrollbar-color`. Sets `overflow: auto`.
+ * No host-tag check; apply to any block element.
+ *
+ * @param props.color - Theme color for the scrollbar thumb. Accepts a value or
+ *   reactive state. Defaults to `"neutral"`.
+ * @example { div: [...], style: { maxHeight: "300px" }, $: [scrollArea()] }
+ */
+declare function scrollArea(props?: {
+    color?: ValueOrState<ThemeColor>;
+}): PartialElement;
+
 /**
  * Container patch that establishes a `segmented` context for single-select navigation.
  * Style: inline pill-shaped control with muted background. Use with `segmentedItem` patches on child `<button>` elements.
@@ -1469,4 +1520,4 @@ declare function unorderedList(props?: {
     color?: ValueOrState<ThemeColor>;
 }): PartialElement;
 
-export { type DatePickerProps, type DatePickerValue, type MotionKeyframe, type MotionProps, abbreviation, accordion, alert, avatar, badge, blockquote, breadcrumb, breadcrumbEllipsis, button, buttonGhost, buttonSwitch, card, code, combobox, command, commandItem, commandSearch, datePicker, descriptionList, details, dialog, divider, drawer, emphasis, empty, errorBoundary, fab, figure, formGroup, heading, horizontalRule, icon, image, inputCheckbox, inputColor, inputDateTime, inputFile, inputNumber, inputOTP, inputRadio, inputRange, inputSearch, inputSwitch, inputText, keyboard, label, link, list, listItem, listItemButton, mark, menu, menuItem, motion, orderedList, pagination, paragraph, popover, popoverArrow, preformated, progress, rating, segmented, segmentedItem, select, selectBox, selectItem, selectList, skeleton, small, spinner, splitter, splitterHandle, splitterPanel, stepItem, steps, strong, subscript, superscript, tab, tabPanel, table, tabs, tag, textarea, timeline, timelineItem, toast, toggle, toggleGroup, toolbar, toolbarSpacer, tooltip, transitionGroup, unorderedList };
+export { type DatePickerProps, type DatePickerValue, type MotionKeyframe, type MotionProps, abbreviation, accordion, alert, avatar, badge, blockquote, breadcrumb, breadcrumbEllipsis, button, buttonGhost, buttonSwitch, card, code, combobox, command, commandItem, commandSearch, datePicker, descriptionList, details, dialog, divider, drawer, emphasis, empty, errorBoundary, fab, figure, formGroup, heading, horizontalRule, icon, image, inputCheckbox, inputColor, inputDateTime, inputFile, inputNumber, inputOTP, inputPassword, inputRadio, inputRange, inputSearch, inputSwitch, inputText, keyboard, label, link, list, listItem, listItemButton, mark, menu, menuItem, motion, orderedList, pagination, paragraph, popover, popoverArrow, preformated, progress, rating, ringProgress, scrollArea, segmented, segmentedItem, select, selectBox, selectItem, selectList, skeleton, small, spinner, splitter, splitterHandle, splitterPanel, stepItem, steps, strong, subscript, superscript, tab, tabPanel, table, tabs, tag, textarea, timeline, timelineItem, toast, toggle, toggleGroup, toolbar, toolbarSpacer, tooltip, transitionGroup, unorderedList };

package/dist/index.d.ts

@@ -602,6 +602,21 @@ declare function inputNumber(props?: {
     accentColor?: ValueOrState<ThemeColor>;
 }): PartialElement;
 
+/**
+ * Password input wrapper: a styled `<div>` that inserts an `<input type="password">`
+ * and a show/hide toggle button. The outer div carries the focus-ring outline via
+ * `:focus-within`. Apply to an empty `<div>`.
+ *
+ * @hostTag div
+ * @param props.color - Base color tone for border/background/text. Defaults to `"neutral"`.
+ * @param props.accentColor - Accent outline color on focus-within. Defaults to `"primary"`.
+ * @example { div: null, $: [inputPassword()] }
+ */
+declare function inputPassword(props?: {
+    color?: ValueOrState<ThemeColor>;
+    accentColor?: ValueOrState<ThemeColor>;
+}): PartialElement;
+
 /**
  * Lays out a one-time-password container as a horizontal row of inputs and
  * wires keyboard navigation: auto-advance on input, backspace/arrow movement,
@@ -1003,6 +1018,42 @@ declare function rating(props?: {
     color?: ThemeColor;
 }): PartialElement;
 
+/**
+ * Circular ring progress indicator rendered via CSS `conic-gradient` and a
+ * circular `mask`. Progress starts at 12 o'clock and advances clockwise.
+ * Exposes `role="progressbar"` with `aria-valuenow/min/max`. Apply to a `<div>`.
+ *
+ * @hostTag div
+ * @param props.value - Progress percentage 0–100. Accepts a value or reactive state. Defaults to `0`.
+ * @param props.color - Theme color for the filled arc. Accepts a value or reactive state. Defaults to `"primary"`.
+ * @param props.trackColor - Theme color for the background track. Accepts a value or reactive state. Defaults to `"neutral"`.
+ * @param props.size - Diameter in `themeSpacing` units. Defaults to `16` (= `4em`).
+ * @param props.thickness - Ring stroke as a fraction of the radius (0–0.5). Defaults to `0.25`.
+ * @example { div: null, $: [ringProgress({ value: 65 })] }
+ * @example { div: null, $: [ringProgress({ value: loadingState, color: "success", size: 20 })] }
+ */
+declare function ringProgress(props?: {
+    value?: ValueOrState<number>;
+    color?: ValueOrState<ThemeColor>;
+    trackColor?: ValueOrState<ThemeColor>;
+    size?: number;
+    thickness?: number;
+}): PartialElement;
+
+/**
+ * Applies thin, themed overlay scrollbars to any scrollable container.
+ * Covers WebKit (Chrome/Safari/Edge) via `::-webkit-scrollbar` pseudo-elements
+ * and Firefox via `scrollbar-width`/`scrollbar-color`. Sets `overflow: auto`.
+ * No host-tag check; apply to any block element.
+ *
+ * @param props.color - Theme color for the scrollbar thumb. Accepts a value or
+ *   reactive state. Defaults to `"neutral"`.
+ * @example { div: [...], style: { maxHeight: "300px" }, $: [scrollArea()] }
+ */
+declare function scrollArea(props?: {
+    color?: ValueOrState<ThemeColor>;
+}): PartialElement;
+
 /**
  * Container patch that establishes a `segmented` context for single-select navigation.
  * Style: inline pill-shaped control with muted background. Use with `segmentedItem` patches on child `<button>` elements.
@@ -1469,4 +1520,4 @@ declare function unorderedList(props?: {
     color?: ValueOrState<ThemeColor>;
 }): PartialElement;
 
-export { type DatePickerProps, type DatePickerValue, type MotionKeyframe, type MotionProps, abbreviation, accordion, alert, avatar, badge, blockquote, breadcrumb, breadcrumbEllipsis, button, buttonGhost, buttonSwitch, card, code, combobox, command, commandItem, commandSearch, datePicker, descriptionList, details, dialog, divider, drawer, emphasis, empty, errorBoundary, fab, figure, formGroup, heading, horizontalRule, icon, image, inputCheckbox, inputColor, inputDateTime, inputFile, inputNumber, inputOTP, inputRadio, inputRange, inputSearch, inputSwitch, inputText, keyboard, label, link, list, listItem, listItemButton, mark, menu, menuItem, motion, orderedList, pagination, paragraph, popover, popoverArrow, preformated, progress, rating, segmented, segmentedItem, select, selectBox, selectItem, selectList, skeleton, small, spinner, splitter, splitterHandle, splitterPanel, stepItem, steps, strong, subscript, superscript, tab, tabPanel, table, tabs, tag, textarea, timeline, timelineItem, toast, toggle, toggleGroup, toolbar, toolbarSpacer, tooltip, transitionGroup, unorderedList };
+export { type DatePickerProps, type DatePickerValue, type MotionKeyframe, type MotionProps, abbreviation, accordion, alert, avatar, badge, blockquote, breadcrumb, breadcrumbEllipsis, button, buttonGhost, buttonSwitch, card, code, combobox, command, commandItem, commandSearch, datePicker, descriptionList, details, dialog, divider, drawer, emphasis, empty, errorBoundary, fab, figure, formGroup, heading, horizontalRule, icon, image, inputCheckbox, inputColor, inputDateTime, inputFile, inputNumber, inputOTP, inputPassword, inputRadio, inputRange, inputSearch, inputSwitch, inputText, keyboard, label, link, list, listItem, listItemButton, mark, menu, menuItem, motion, orderedList, pagination, paragraph, popover, popoverArrow, preformated, progress, rating, ringProgress, scrollArea, segmented, segmentedItem, select, selectBox, selectItem, selectList, skeleton, small, spinner, splitter, splitterHandle, splitterPanel, stepItem, steps, strong, subscript, superscript, tab, tabPanel, table, tabs, tag, textarea, timeline, timelineItem, toast, toggle, toggleGroup, toolbar, toolbarSpacer, tooltip, transitionGroup, unorderedList };