@drivenets/design-system 0.0.2 → 0.0.4

package/dist/components/ds-radio-group/ds-radio-group.types.d.cts

@@ -0,0 +1,87 @@
+import React from "react";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { RadioGroupItemProps, RadioGroupRootProps } from "@ark-ui/react/radio-group";
+
+//#region src/components/ds-radio-group/ds-radio-group.types.d.ts
+
+/**
+ * Props for the DsRadioGroup Root component
+ */
+interface DsRadioGroupRootProps extends Pick<RadioGroupRootProps, 'value' | 'defaultValue' | 'disabled' | 'name' | 'className' | 'style' | 'orientation' | 'children'> {
+  /**
+   * Event handler called when the selected value changes
+   */
+  onValueChange?: (value: string | null) => void;
+}
+/**
+ * Props for the DsRadioGroup Item component
+ */
+interface DsRadioGroupItemProps extends Pick<RadioGroupItemProps, 'value' | 'disabled' | 'className' | 'style' | 'children'> {
+  /**
+   * Optional label text for the radio item
+   */
+  label?: string;
+  /**
+   * Optional additional info text displayed below the label
+   */
+  labelInfo?: string;
+}
+/**
+ * DEPRECATED: Legacy radio option configuration
+ * Use compound component pattern instead: <DsRadioGroup.Root><DsRadioGroup.Item /></DsRadioGroup.Root>
+ * @deprecated
+ */
+interface DsRadioOptionLegacy<ValueType = string> {
+  /**
+   * Display label for the radio option
+   */
+  label: string;
+  /**
+   * Value associated with this radio option
+   */
+  value: ValueType;
+  /**
+   * Additional label info for the radio option
+   */
+  labelInfo?: string;
+  /**
+   * Whether this radio option is disabled
+   */
+  disabled?: boolean;
+}
+/**
+ * DEPRECATED: Legacy props for DsRadioGroupLegacy component
+ * Use compound component pattern instead
+ * @deprecated
+ */
+interface DsRadioGroupLegacyProps<TOption extends DsRadioOptionLegacy = DsRadioOptionLegacy> extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root> {
+  /**
+   * The radio group options
+   */
+  options: TOption[];
+  /**
+   * The selected value
+   */
+  value?: TOption['value'];
+  /**
+   * The default selected value
+   */
+  defaultValue?: TOption['value'];
+  /**
+   * Event handler called when the selected value changes
+   *
+   * @param value
+   */
+  onValueChange?: (value: TOption['value']) => void;
+  /**
+   * Additional CSS class names
+   */
+  className?: string;
+  /**
+   * Additional styles to apply to the component
+   */
+  style?: React.CSSProperties;
+}
+//#endregion
+export { DsRadioGroupItemProps, DsRadioGroupLegacyProps, DsRadioGroupRootProps, DsRadioOptionLegacy };
+//# sourceMappingURL=ds-radio-group.types.d.cts.map

package/dist/components/ds-radio-group/ds-radio-group.types.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-radio-group.types.d.cts","names":[],"sources":["../../../src/components/ds-radio-group/ds-radio-group.types.tsx"],"sourcesContent":[],"mappings":";;;;;;;;AAOA;AAaiB,UAbA,qBAAA,SAA8B,IAc9C,CAbA,mBAYkD,EAAA,OAAA,GAAA,cAAA,GAAA,UAAA,GAAA,MAAA,GAAA,WAAA,GAAA,OAAA,GAAA,aAAA,GAAA,UAAA,CAAA,CAAA;EAmBlC;AAwBjB;;EACuC,aAAA,CAAA,EAAA,CAAA,KAAA,EAAA,MAAA,GAAA,IAAA,EAAA,GAAA,IAAA;;;;;AAmBd,UA/DR,qBAAA,SAA8B,IA+DtB,CA9DxB,mBA8DwB,EAAA,OAAA,GAAA,UAAA,GAAA,WAAA,GAAA,OAAA,GAAA,UAAA,CAAA,CAAA;EAQhB;;;;;;;;;;;;;;UApDQ;;;;;;;;SAQT;;;;;;;;;;;;;;;UAgBS,wCACA,sBAAsB,6BAC7B,KAAA,CAAM,gCAAgC,mBAAA,CAAoB;;;;WAI1D;;;;UAID;;;;iBAIO;;;;;;0BAMS;;;;;;;;UAQhB,KAAA,CAAM"}

package/dist/components/ds-radio-group/ds-radio-group.types.d.ts

@@ -0,0 +1,87 @@
+import React from "react";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { RadioGroupItemProps, RadioGroupRootProps } from "@ark-ui/react/radio-group";
+
+//#region src/components/ds-radio-group/ds-radio-group.types.d.ts
+
+/**
+ * Props for the DsRadioGroup Root component
+ */
+interface DsRadioGroupRootProps extends Pick<RadioGroupRootProps, 'value' | 'defaultValue' | 'disabled' | 'name' | 'className' | 'style' | 'orientation' | 'children'> {
+  /**
+   * Event handler called when the selected value changes
+   */
+  onValueChange?: (value: string | null) => void;
+}
+/**
+ * Props for the DsRadioGroup Item component
+ */
+interface DsRadioGroupItemProps extends Pick<RadioGroupItemProps, 'value' | 'disabled' | 'className' | 'style' | 'children'> {
+  /**
+   * Optional label text for the radio item
+   */
+  label?: string;
+  /**
+   * Optional additional info text displayed below the label
+   */
+  labelInfo?: string;
+}
+/**
+ * DEPRECATED: Legacy radio option configuration
+ * Use compound component pattern instead: <DsRadioGroup.Root><DsRadioGroup.Item /></DsRadioGroup.Root>
+ * @deprecated
+ */
+interface DsRadioOptionLegacy<ValueType = string> {
+  /**
+   * Display label for the radio option
+   */
+  label: string;
+  /**
+   * Value associated with this radio option
+   */
+  value: ValueType;
+  /**
+   * Additional label info for the radio option
+   */
+  labelInfo?: string;
+  /**
+   * Whether this radio option is disabled
+   */
+  disabled?: boolean;
+}
+/**
+ * DEPRECATED: Legacy props for DsRadioGroupLegacy component
+ * Use compound component pattern instead
+ * @deprecated
+ */
+interface DsRadioGroupLegacyProps<TOption extends DsRadioOptionLegacy = DsRadioOptionLegacy> extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root> {
+  /**
+   * The radio group options
+   */
+  options: TOption[];
+  /**
+   * The selected value
+   */
+  value?: TOption['value'];
+  /**
+   * The default selected value
+   */
+  defaultValue?: TOption['value'];
+  /**
+   * Event handler called when the selected value changes
+   *
+   * @param value
+   */
+  onValueChange?: (value: TOption['value']) => void;
+  /**
+   * Additional CSS class names
+   */
+  className?: string;
+  /**
+   * Additional styles to apply to the component
+   */
+  style?: React.CSSProperties;
+}
+//#endregion
+export { DsRadioGroupItemProps, DsRadioGroupLegacyProps, DsRadioGroupRootProps, DsRadioOptionLegacy };
+//# sourceMappingURL=ds-radio-group.types.d.ts.map

package/dist/components/ds-radio-group/ds-radio-group.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-radio-group.types.d.ts","names":[],"sources":["../../../src/components/ds-radio-group/ds-radio-group.types.tsx"],"sourcesContent":[],"mappings":";;;;;;;;AAOA;AAaiB,UAbA,qBAAA,SAA8B,IAc9C,CAbA,mBAYkD,EAAA,OAAA,GAAA,cAAA,GAAA,UAAA,GAAA,MAAA,GAAA,WAAA,GAAA,OAAA,GAAA,aAAA,GAAA,UAAA,CAAA,CAAA;EAmBlC;AAwBjB;;EACuC,aAAA,CAAA,EAAA,CAAA,KAAA,EAAA,MAAA,GAAA,IAAA,EAAA,GAAA,IAAA;;;;;AAmBd,UA/DR,qBAAA,SAA8B,IA+DtB,CA9DxB,mBA8DwB,EAAA,OAAA,GAAA,UAAA,GAAA,WAAA,GAAA,OAAA,GAAA,UAAA,CAAA,CAAA;EAQhB;;;;;;;;;;;;;;UApDQ;;;;;;;;SAQT;;;;;;;;;;;;;;;UAgBS,wCACA,sBAAsB,6BAC7B,KAAA,CAAM,gCAAgC,mBAAA,CAAoB;;;;WAI1D;;;;UAID;;;;iBAIO;;;;;;0BAMS;;;;;;;;UAQhB,KAAA,CAAM"}

package/dist/components/ds-radio-group/ds-radio-group.types.js

@@ -0,0 +1 @@
+import "@ark-ui/react/radio-group";

package/dist/components/ds-radio-group/index.cjs

@@ -0,0 +1,2 @@
+const require_ds_radio_group = require('./ds-radio-group.cjs');
+require('./ds-radio-group.types.cjs');

package/dist/components/ds-radio-group/index.d.ts

@@ -0,0 +1,2 @@
+import { DsRadioGroupItemProps, DsRadioGroupLegacyProps, DsRadioGroupRootProps, DsRadioOptionLegacy } from "./ds-radio-group.types.js";
+import { DsRadioGroup, DsRadioGroupLegacy } from "./ds-radio-group.js";

package/dist/components/ds-radio-group/index.js

@@ -0,0 +1,2 @@
+import { DsRadioGroup, DsRadioGroupLegacy } from "./ds-radio-group.js";
+import "./ds-radio-group.types.js";

package/dist/components/ds-select/ds-select.cjs

@@ -0,0 +1,276 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_ds_icon = require('../ds-icon/ds-icon.cjs');
+require('../ds-icon/index.cjs');
+const require_ds_typography = require('../ds-typography/ds-typography.cjs');
+require('../ds-typography/index.cjs');
+const require_ds_text_input = require('../ds-text-input/ds-text-input.cjs');
+require('../ds-text-input/index.cjs');
+const require_ds_checkbox = require('../ds-checkbox/ds-checkbox.cjs');
+require('../ds-checkbox/index.cjs');
+const require_ds_select_module = require('./ds-select.module.cjs');
+const require_select_items_chips = require('./select-items-chips.cjs');
+let react_compiler_runtime = require("react/compiler-runtime");
+let classnames = require("classnames");
+classnames = require_rolldown_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+let __ark_ui_react_portal = require("@ark-ui/react/portal");
+let __ark_ui_react_select = require("@ark-ui/react/select");
+
+//#region src/components/ds-select/ds-select.tsx
+const SEARCH_THRESHOLD = 13;
+const SELECT_ALL_VALUE = "__INTERNAL_SELECT_ALL_VALUE__";
+const SELECT_ALL = {
+	label: "All",
+	value: SELECT_ALL_VALUE
+};
+const DsSelect = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(35);
+	const { id, options: userOptions, value, style, size, clearable, onClear, onBlur, className, placeholder: t1, disabled, ...multiselectProps } = t0;
+	const placeholder = t1 === void 0 ? "Click to select a value" : t1;
+	const [searchTerm, setSearchTerm] = (0, react.useState)("");
+	const [showAllItems, setShowAllItems] = (0, react.useState)(false);
+	const internalOptions = multiselectProps.multiple ? [SELECT_ALL, ...userOptions] : userOptions;
+	const collection = (0, __ark_ui_react_select.createListCollection)({
+		items: internalOptions,
+		itemToValue: _temp
+	});
+	let t2;
+	if ($[0] !== searchTerm) {
+		t2 = (option) => option.label.toLowerCase().includes(searchTerm.toLowerCase());
+		$[0] = searchTerm;
+		$[1] = t2;
+	} else t2 = $[1];
+	const filteredOptions = internalOptions.filter(t2);
+	const normalizedValue = Array.isArray(value) ? value : [value].filter(_temp2);
+	let t3;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = () => {
+			setSearchTerm("");
+			setShowAllItems(false);
+		};
+		$[2] = t3;
+	} else t3 = $[2];
+	const select = (0, __ark_ui_react_select.useSelect)({
+		collection,
+		disabled,
+		multiple: multiselectProps.multiple,
+		value: normalizedValue,
+		ids: { trigger: id },
+		onOpenChange: t3,
+		onValueChange: (details) => {
+			if (!multiselectProps.multiple) {
+				multiselectProps.onValueChange?.(details.value[0]);
+				return;
+			}
+			if (details.value.includes(SELECT_ALL_VALUE)) {
+				const newValues = select.selectedItems.length === userOptions.length ? [] : userOptions.map(_temp3);
+				multiselectProps.onValueChange?.(newValues);
+				return;
+			}
+			const newValueWithoutSelectAll = details.value.filter(_temp4);
+			multiselectProps.onValueChange?.(newValueWithoutSelectAll);
+		}
+	});
+	const t4 = size === "small" && require_ds_select_module.default.small;
+	let t5;
+	if ($[3] !== className || $[4] !== t4) {
+		t5 = (0, classnames.default)(require_ds_select_module.default.control, t4, className);
+		$[3] = className;
+		$[4] = t4;
+		$[5] = t5;
+	} else t5 = $[5];
+	let t6;
+	if ($[6] !== placeholder) {
+		t6 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_typography.default, {
+			className: require_ds_select_module.default.valueText,
+			variant: "body-sm-reg",
+			asChild: true,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_select.Select.ValueText, { placeholder })
+		});
+		$[6] = placeholder;
+		$[7] = t6;
+	} else t6 = $[7];
+	const t7 = size === "small" ? "small" : "medium";
+	let t8;
+	if ($[8] !== t7) {
+		t8 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_select.Select.Indicator, {
+			className: require_ds_select_module.default.triggerIcon,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, {
+				icon: "keyboard_arrow_down",
+				size: t7
+			})
+		});
+		$[8] = t7;
+		$[9] = t8;
+	} else t8 = $[9];
+	let t9;
+	if ($[10] !== id || $[11] !== t6 || $[12] !== t8) {
+		t9 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ark_ui_react_select.Select.Trigger, {
+			id,
+			className: require_ds_select_module.default.trigger,
+			"aria-labelledby": null,
+			children: [t6, t8]
+		});
+		$[10] = id;
+		$[11] = t6;
+		$[12] = t8;
+		$[13] = t9;
+	} else t9 = $[13];
+	let t10;
+	if ($[14] !== clearable || $[15] !== onClear || $[16] !== size) {
+		t10 = clearable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_select.Select.ClearTrigger, {
+			className: require_ds_select_module.default.clearIcon,
+			onClick: onClear,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, {
+				icon: "close",
+				size: size === "small" ? "small" : "medium"
+			})
+		});
+		$[14] = clearable;
+		$[15] = onClear;
+		$[16] = size;
+		$[17] = t10;
+	} else t10 = $[17];
+	const T0 = __ark_ui_react_portal.Portal;
+	const t11 = __ark_ui_react_select.Select;
+	const t12 = require_ds_select_module.default;
+	const t13 = __ark_ui_react_select.Select;
+	const t14 = require_ds_select_module.default;
+	let t15;
+	if ($[18] !== searchTerm || $[19] !== userOptions.length) {
+		t15 = userOptions.length > SEARCH_THRESHOLD && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: require_ds_select_module.default.searchInput,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_text_input.default, {
+				placeholder: "Search",
+				value: searchTerm,
+				onChange: (e_0) => setSearchTerm(e_0.target.value),
+				onKeyDown: _temp5,
+				slots: { startAdornment: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, {
+					icon: "search",
+					size: "tiny"
+				}) }
+			})
+		});
+		$[18] = searchTerm;
+		$[19] = userOptions.length;
+		$[20] = t15;
+	} else t15 = $[20];
+	const t16 = multiselectProps.multiple && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_select_items_chips.SelectItemsChips, {
+		onValueChange: multiselectProps.onValueChange,
+		showAll: showAllItems,
+		onShowAll: () => setShowAllItems(true),
+		count: 6
+	});
+	const t17 = filteredOptions.map((item_0) => {
+		const checked = getItemCheckedState({
+			item: item_0,
+			select,
+			options: internalOptions
+		});
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_typography.default, {
+			variant: "body-sm-reg",
+			asChild: true,
+			className: require_ds_select_module.default.item,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ark_ui_react_select.Select.Item, {
+				item: item_0,
+				children: [
+					multiselectProps.multiple && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_checkbox.default, { checked }),
+					item_0.icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, {
+						className: require_ds_select_module.default.itemIcon,
+						icon: item_0.icon,
+						"aria-hidden": "true"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_select.Select.ItemText, { children: item_0.label })
+				]
+			})
+		}, collection.getItemValue(item_0));
+	});
+	let t18;
+	if ($[21] !== t13.Content || $[22] !== t14.content || $[23] !== t15 || $[24] !== t16 || $[25] !== t17) {
+		t18 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(t13.Content, {
+			className: t14.content,
+			children: [
+				t15,
+				t16,
+				t17
+			]
+		});
+		$[21] = t13.Content;
+		$[22] = t14.content;
+		$[23] = t15;
+		$[24] = t16;
+		$[25] = t17;
+		$[26] = t18;
+	} else t18 = $[26];
+	let t19;
+	if ($[27] !== t11.Positioner || $[28] !== t12.viewport || $[29] !== t18) {
+		t19 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(t11.Positioner, {
+			className: t12.viewport,
+			children: t18
+		});
+		$[27] = t11.Positioner;
+		$[28] = t12.viewport;
+		$[29] = t18;
+		$[30] = t19;
+	} else t19 = $[30];
+	let t20;
+	if ($[31] !== T0 || $[32] !== t19) {
+		t20 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(T0, { children: t19 });
+		$[31] = T0;
+		$[32] = t19;
+		$[33] = t20;
+	} else t20 = $[33];
+	let t21;
+	if ($[34] === Symbol.for("react.memo_cache_sentinel")) {
+		t21 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_select.Select.HiddenSelect, { style: { display: "none" } });
+		$[34] = t21;
+	} else t21 = $[34];
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ark_ui_react_select.Select.RootProvider, {
+		value: select,
+		lazyMount: true,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ark_ui_react_select.Select.Control, {
+				className: t5,
+				style,
+				onBlur,
+				onKeyDown: (e) => {
+					if (!clearable) return;
+					if (select.open) return;
+					if (e.key === "Backspace" || e.key === "Delete") {
+						if (multiselectProps.multiple) multiselectProps.onValueChange?.([]);
+						else multiselectProps.onValueChange?.("");
+						onClear?.();
+					}
+				},
+				children: [t9, t10]
+			}),
+			t20,
+			t21
+		]
+	});
+};
+function getItemCheckedState({ item, select, options }) {
+	if (item.value !== SELECT_ALL_VALUE) return select.getItemState({ item }).selected;
+	if (select.selectedItems.length === options.length - 1) return true;
+	return select.hasSelectedItems ? "indeterminate" : false;
+}
+var ds_select_default = DsSelect;
+function _temp(item) {
+	return item.value;
+}
+function _temp2(value_0) {
+	return !!value_0;
+}
+function _temp3(opt) {
+	return opt.value;
+}
+function _temp4(val) {
+	return val !== SELECT_ALL_VALUE;
+}
+function _temp5(e_1) {
+	if (e_1.key === " ") e_1.stopPropagation();
+}
+
+//#endregion
+exports.default = ds_select_default;

package/dist/components/ds-select/ds-select.d.cts

@@ -0,0 +1,21 @@
+import { DsSelectProps } from "./ds-select.types.cjs";
+import * as react_jsx_runtime34 from "react/jsx-runtime";
+
+//#region src/components/ds-select/ds-select.d.ts
+declare const DsSelect: ({
+  id,
+  options: userOptions,
+  value,
+  style,
+  size,
+  clearable,
+  onClear,
+  onBlur,
+  className,
+  placeholder,
+  disabled,
+  ...multiselectProps
+}: DsSelectProps) => react_jsx_runtime34.JSX.Element;
+//#endregion
+export { DsSelect };
+//# sourceMappingURL=ds-select.d.cts.map

package/dist/components/ds-select/ds-select.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-select.d.cts","names":[],"sources":["../../../src/components/ds-select/ds-select.tsx"],"sourcesContent":[],"mappings":";;;;cAoBM;;WAAY;;;;;;;;;;;GAaf,kBAAa,mBAAA,CAAA,GAAA,CAAA"}

package/dist/components/ds-select/ds-select.d.ts

@@ -0,0 +1,21 @@
+import { DsSelectProps } from "./ds-select.types.js";
+import * as react_jsx_runtime39 from "react/jsx-runtime";
+
+//#region src/components/ds-select/ds-select.d.ts
+declare const DsSelect: ({
+  id,
+  options: userOptions,
+  value,
+  style,
+  size,
+  clearable,
+  onClear,
+  onBlur,
+  className,
+  placeholder,
+  disabled,
+  ...multiselectProps
+}: DsSelectProps) => react_jsx_runtime39.JSX.Element;
+//#endregion
+export { DsSelect };
+//# sourceMappingURL=ds-select.d.ts.map

package/dist/components/ds-select/ds-select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-select.d.ts","names":[],"sources":["../../../src/components/ds-select/ds-select.tsx"],"sourcesContent":[],"mappings":";;;;cAoBM;;WAAY;;;;;;;;;;;GAaf,kBAAa,mBAAA,CAAA,GAAA,CAAA"}