@drivenets/design-system 0.3.0 → 0.5.0

package/dist/components/ds-autocomplete/ds-autocomplete.module.cjs

@@ -0,0 +1,27 @@
+
+//#region src/components/ds-autocomplete/ds-autocomplete.module.scss
+var ds_autocomplete_module_default = {
+	"root": "_root_1ah6z_1",
+	"control": "_control_1ah6z_1",
+	"input": "_input_1ah6z_1",
+	"iconButton": "_iconButton_1ah6z_1",
+	"startAdornment": "_startAdornment_1ah6z_1",
+	"iconContainer": "_iconContainer_1ah6z_1",
+	"clearButton": "_clearButton_1ah6z_1",
+	"trigger": "_trigger_1ah6z_1",
+	"positioner": "_positioner_1ah6z_1",
+	"content": "_content_1ah6z_1",
+	"expand": "_expand_1ah6z_1",
+	"collapse": "_collapse_1ah6z_1",
+	"itemGroup": "_itemGroup_1ah6z_1",
+	"item": "_item_1ah6z_1",
+	"indicator": "_indicator_1ah6z_1",
+	"itemIcon": "_itemIcon_1ah6z_1",
+	"itemText": "_itemText_1ah6z_1",
+	"noMatches": "_noMatches_1ah6z_1",
+	"disabled": "_disabled_1ah6z_1",
+	"invalid": "_invalid_1ah6z_1"
+};
+
+//#endregion
+exports.default = ds_autocomplete_module_default;

package/dist/components/ds-autocomplete/ds-autocomplete.module.js

@@ -0,0 +1,27 @@
+//#region src/components/ds-autocomplete/ds-autocomplete.module.scss
+var ds_autocomplete_module_default = {
+	"root": "_root_1ah6z_1",
+	"control": "_control_1ah6z_1",
+	"input": "_input_1ah6z_1",
+	"iconButton": "_iconButton_1ah6z_1",
+	"startAdornment": "_startAdornment_1ah6z_1",
+	"iconContainer": "_iconContainer_1ah6z_1",
+	"clearButton": "_clearButton_1ah6z_1",
+	"trigger": "_trigger_1ah6z_1",
+	"positioner": "_positioner_1ah6z_1",
+	"content": "_content_1ah6z_1",
+	"expand": "_expand_1ah6z_1",
+	"collapse": "_collapse_1ah6z_1",
+	"itemGroup": "_itemGroup_1ah6z_1",
+	"item": "_item_1ah6z_1",
+	"indicator": "_indicator_1ah6z_1",
+	"itemIcon": "_itemIcon_1ah6z_1",
+	"itemText": "_itemText_1ah6z_1",
+	"noMatches": "_noMatches_1ah6z_1",
+	"disabled": "_disabled_1ah6z_1",
+	"invalid": "_invalid_1ah6z_1"
+};
+
+//#endregion
+export { ds_autocomplete_module_default as default };
+//# sourceMappingURL=ds-autocomplete.module.js.map

package/dist/components/ds-autocomplete/ds-autocomplete.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-autocomplete.module.js","names":[],"sources":["../../../file:/home/runner/work/design-system/design-system/packages/design-system/src/components/ds-autocomplete/ds-autocomplete.module.scss","../../../file:/home/runner/work/design-system/design-system/packages/design-system/src/styles/shared/_input.scss","../../../file:/home/runner/work/design-system/design-system/packages/design-system/src/styles/_typography.scss","../../../file:/home/runner/work/design-system/design-system/packages/design-system/src/styles/shared/_dropdown.scss","../../../file:/home/runner/work/design-system/design-system/packages/design-system/src/styles/mixins/_bounding-box.scss"],"sourcesContent":["@use '../../styles/shared/dropdown';\n@use '../../styles/shared/input';\n\n$autocomplete-input-height: 36px;\n$autocomplete-max-visible-items: 4;\n$autocomplete-item-height: 38px;\n$autocomplete-dropdown-max-height: calc($autocomplete-max-visible-items * $autocomplete-item-height);\n$autocomplete-trigger-size: 24px;\n$autocomplete-trigger-border-radius: 4px;\n$autocomplete-highlight-border-radius: 2px;\n$autocomplete-animation-duration: 0.2s;\n$autocomplete-animation-translate: -8px;\n$autocomplete-outline-width: 2px;\n$autocomplete-outline-offset: 2px;\n$autocomplete-rotation-open: 180deg;\n$autocomplete-opacity-hidden: 0;\n$autocomplete-opacity-visible: 1;\n\n.root {\n\tposition: relative;\n\twidth: 100%;\n\tdisplay: inline-flex;\n\tflex-direction: column;\n}\n\n.control {\n\t@include input.base-input-container;\n\t@include input.input-container-states;\n\tdisplay: flex;\n\talign-items: center;\n\tgap: var(--spacing-3xs);\n\theight: $autocomplete-input-height;\n\tmin-height: $autocomplete-input-height;\n\tmax-height: $autocomplete-input-height;\n\n\t&[data-focus] {\n\t\tborder-color: var(--form-control-border-color, var(--color-border-action-primary)) !important;\n\t}\n\n\t&[data-invalid] {\n\t\tborder-color: var(--color-background-danger-strong);\n\t}\n}\n\n.input {\n\t@include input.base-input;\n\tflex: 1;\n\tmin-width: 0;\n\toutline: none;\n\n\t&::placeholder {\n\t\tcolor: var(--color-font-placeholder);\n\t}\n}\n\n.startAdornment {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tcolor: var(--color-background-action);\n\tflex-shrink: 0;\n}\n\n.iconContainer {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: var(--spacing-3xs);\n\tflex-shrink: 0;\n}\n\n.clearButton {\n\t@include input.icon-button;\n\tcursor: pointer;\n\topacity: $autocomplete-opacity-hidden;\n\tvisibility: hidden;\n\ttransition: opacity $autocomplete-animation-duration ease;\n\n\t&:hover {\n\t\tcolor: var(--color-background-action-hover);\n\t}\n}\n\n.control:hover .clearButton,\n.control[data-focus] .clearButton {\n\topacity: $autocomplete-opacity-visible;\n\tvisibility: visible;\n}\n\n.trigger {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tcolor: var(--color-background-deselected);\n\ttransition:\n\t\ttransform $autocomplete-animation-duration ease-in-out,\n\t\tbackground-color $autocomplete-animation-duration ease,\n\t\tcolor $autocomplete-animation-duration ease;\n\tcursor: pointer;\n\tbackground: transparent;\n\tborder: none;\n\tpadding: 0;\n\tborder-radius: $autocomplete-trigger-border-radius;\n\twidth: $autocomplete-trigger-size;\n\theight: $autocomplete-trigger-size;\n\n\t&:hover {\n\t\tcolor: var(--color-background-deselected-hover);\n\t\tbackground: var(--color-background-action-hover-weak);\n\t}\n\n\t&[data-state='open'] {\n\t\ttransform: rotate($autocomplete-rotation-open);\n\t\tcolor: var(--color-background-deselected-hover);\n\t\tbackground: var(--color-background-action-hover-weak);\n\t}\n\n\t&:focus-visible {\n\t\toutline: $autocomplete-outline-width solid var(--color-focus);\n\t\toutline-offset: $autocomplete-outline-offset;\n\t}\n}\n\n.control[data-focus] .trigger {\n\tcolor: var(--color-background-deselected-hover);\n\tbackground: var(--color-background-action-hover-weak);\n}\n\n.positioner {\n\tz-index: var(--z-index-dropdown, 9999);\n\twidth: var(--reference-width);\n}\n\n.content {\n\t@include dropdown.dropdown-content;\n\toverflow: hidden;\n\tanimation: expand $autocomplete-animation-duration ease;\n\twidth: 100%;\n\tmin-width: var(--reference-width);\n\tmax-height: $autocomplete-dropdown-max-height;\n\n\t&[data-state='open'] {\n\t\tanimation: expand $autocomplete-animation-duration ease;\n\t}\n\n\t&[data-state='closed'] {\n\t\tanimation: collapse $autocomplete-animation-duration ease;\n\t}\n}\n\n.itemGroup {\n\toverflow-y: auto;\n\toverflow-x: hidden;\n\tmax-height: $autocomplete-dropdown-max-height;\n\tscrollbar-width: thin;\n}\n\n.item {\n\t@include dropdown.dropdown-item;\n\tdisplay: flex;\n\talign-items: center;\n\tgap: var(--spacing-xs);\n\theight: $autocomplete-item-height;\n\tmin-height: $autocomplete-item-height;\n\n\t&[data-highlighted] {\n\t\tbackground: var(--color-background-secondary-selected-weak);\n\t}\n}\n\n.itemIcon {\n\tcolor: var(--color-background-deselected);\n\tflex-shrink: 0;\n\tdisplay: flex;\n\talign-items: center;\n}\n\n.itemText {\n\tflex: 1;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n\n\tmark {\n\t\tbackground-color: var(--color-data-yellow);\n\t\tcolor: var(--color-font-main);\n\t\tfont-weight: var(--font-weight-medium);\n\t\tpadding: 0;\n\t\tborder-radius: $autocomplete-highlight-border-radius;\n\t}\n}\n\n.noMatches {\n\tpadding: var(--spacing-xs);\n\tcolor: var(--color-font-disabled);\n\ttext-align: center;\n\tfont-size: var(--font-size-sm);\n}\n\n.disabled {\n\t.control {\n\t\tcolor: var(--color-background-deselected);\n\t\tbackground: var(--color-background-secondary);\n\t\tborder-color: var(--color-border-disabled);\n\t\tcursor: not-allowed;\n\n\t\t.input {\n\t\t\tcolor: var(--color-font-disabled);\n\t\t\tcursor: not-allowed;\n\t\t}\n\n\t\t.trigger {\n\t\t\tcolor: var(--color-background-disable);\n\t\t\tcursor: not-allowed;\n\t\t\tbackground: transparent;\n\n\t\t\t&:hover {\n\t\t\t\tbackground: transparent;\n\t\t\t\tcolor: var(--color-background-disable);\n\t\t\t}\n\t\t}\n\t}\n}\n\n.invalid {\n\t.control {\n\t\tborder-color: var(--color-background-danger-strong);\n\n\t\t&:hover,\n\t\t&[data-focus] {\n\t\t\tborder-color: var(--color-background-danger-strong) !important;\n\t\t}\n\t}\n}\n\n@keyframes expand {\n\t0% {\n\t\topacity: $autocomplete-opacity-hidden;\n\t\ttransform: translateY($autocomplete-animation-translate);\n\t}\n\n\t100% {\n\t\topacity: $autocomplete-opacity-visible;\n\t\ttransform: translateY(0);\n\t}\n}\n\n@keyframes collapse {\n\t0% {\n\t\topacity: $autocomplete-opacity-visible;\n\t\ttransform: translateY(0);\n\t}\n\n\t100% {\n\t\topacity: $autocomplete-opacity-hidden;\n\t\ttransform: translateY($autocomplete-animation-translate);\n\t}\n}\n"],"mappings":""}

package/dist/components/ds-autocomplete/ds-autocomplete.types.d.cts

@@ -0,0 +1,79 @@
+import { IconName } from "../ds-icon/ds-icon.types.cjs";
+import React from "react";
+
+//#region src/components/ds-autocomplete/ds-autocomplete.types.d.ts
+interface DsAutocompleteOption {
+  /**
+   * Label to display in the autocomplete dropdown
+   */
+  label: string;
+  /**
+   * Value to return when the option is selected
+   */
+  value: string;
+  /**
+   * Optional icon to display next to the label
+   */
+  icon?: IconName;
+}
+interface DsAutocompleteProps {
+  /**
+   * Unique identifier for the autocomplete component
+   */
+  id?: string;
+  /**
+   * Options to display in the dropdown
+   */
+  options: DsAutocompleteOption[];
+  /**
+   * Additional styles to apply to the component
+   */
+  style?: React.CSSProperties;
+  /**
+   * Additional CSS class names
+   */
+  className?: string;
+  /**
+   * Placeholder text to display when input is empty
+   */
+  placeholder?: string;
+  /**
+   * Whether the autocomplete is disabled
+   */
+  disabled?: boolean;
+  /**
+   * Whether the autocomplete is in an invalid state
+   */
+  invalid?: boolean;
+  /**
+   * Event handler called when the value changes (when an option is selected or custom value is entered)
+   */
+  onValueChange?: (value: string) => void;
+  /**
+   * Event handler called when the input value changes (on every keystroke)
+   */
+  onInputValueChange?: (value: string) => void;
+  /**
+   * Message to display when no options match the input
+   * @default 'No matches found'
+   */
+  noMatchesMessage?: string;
+  /**
+   * Whether to highlight the matching text in the dropdown options
+   * @default true
+   */
+  highlightMatch?: boolean;
+  /**
+   * Whether to show the dropdown trigger (arrow) button.
+   * If false, the dropdown will only open on typing.
+   * @default true
+   */
+  showTrigger?: boolean;
+  /**
+   * Content to display at the start of the input (e.g., a search icon).
+   */
+  startAdornment?: React.ReactNode;
+}
+//#endregion
+export { DsAutocompleteOption, DsAutocompleteProps };
+//# sourceMappingURL=ds-autocomplete.types.d.cts.map

package/dist/components/ds-autocomplete/ds-autocomplete.types.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-autocomplete.types.d.cts","names":[],"sources":["../../../src/components/ds-autocomplete/ds-autocomplete.types.tsx"],"sourcesContent":[],"mappings":";;;;UAGiB,oBAAA;;AAAjB;AAeA;EAQU,KAAA,EAAA,MAAA;EAID;;;;;;;SAfD;;UAGS,mBAAA;;;;;;;;WAQP;;;;UAID,KAAA,CAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBA4CG,KAAA,CAAM"}

package/dist/components/ds-autocomplete/ds-autocomplete.types.d.ts

@@ -0,0 +1,80 @@
+import { IconName } from "../ds-icon/ds-icon.types.js";
+import "../ds-icon/index.js";
+import React from "react";
+
+//#region src/components/ds-autocomplete/ds-autocomplete.types.d.ts
+interface DsAutocompleteOption {
+  /**
+   * Label to display in the autocomplete dropdown
+   */
+  label: string;
+  /**
+   * Value to return when the option is selected
+   */
+  value: string;
+  /**
+   * Optional icon to display next to the label
+   */
+  icon?: IconName;
+}
+interface DsAutocompleteProps {
+  /**
+   * Unique identifier for the autocomplete component
+   */
+  id?: string;
+  /**
+   * Options to display in the dropdown
+   */
+  options: DsAutocompleteOption[];
+  /**
+   * Additional styles to apply to the component
+   */
+  style?: React.CSSProperties;
+  /**
+   * Additional CSS class names
+   */
+  className?: string;
+  /**
+   * Placeholder text to display when input is empty
+   */
+  placeholder?: string;
+  /**
+   * Whether the autocomplete is disabled
+   */
+  disabled?: boolean;
+  /**
+   * Whether the autocomplete is in an invalid state
+   */
+  invalid?: boolean;
+  /**
+   * Event handler called when the value changes (when an option is selected or custom value is entered)
+   */
+  onValueChange?: (value: string) => void;
+  /**
+   * Event handler called when the input value changes (on every keystroke)
+   */
+  onInputValueChange?: (value: string) => void;
+  /**
+   * Message to display when no options match the input
+   * @default 'No matches found'
+   */
+  noMatchesMessage?: string;
+  /**
+   * Whether to highlight the matching text in the dropdown options
+   * @default true
+   */
+  highlightMatch?: boolean;
+  /**
+   * Whether to show the dropdown trigger (arrow) button.
+   * If false, the dropdown will only open on typing.
+   * @default true
+   */
+  showTrigger?: boolean;
+  /**
+   * Content to display at the start of the input (e.g., a search icon).
+   */
+  startAdornment?: React.ReactNode;
+}
+//#endregion
+export { DsAutocompleteOption, DsAutocompleteProps };
+//# sourceMappingURL=ds-autocomplete.types.d.ts.map

package/dist/components/ds-autocomplete/ds-autocomplete.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-autocomplete.types.d.ts","names":[],"sources":["../../../src/components/ds-autocomplete/ds-autocomplete.types.tsx"],"sourcesContent":[],"mappings":";;;;;UAGiB,oBAAA;;;AAAjB;EAeiB,KAAA,EAAA,MAAA;EAQP;;;EAgDuB,KAAA,EAAA,MAAA;;;;SA3DzB;;UAGS,mBAAA;;;;;;;;WAQP;;;;UAID,KAAA,CAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBA4CG,KAAA,CAAM"}

package/dist/components/ds-autocomplete/index.cjs

@@ -0,0 +1 @@
+const require_ds_autocomplete = require('./ds-autocomplete.cjs');

package/dist/components/ds-autocomplete/index.d.ts

@@ -0,0 +1,2 @@
+import { DsAutocompleteOption, DsAutocompleteProps } from "./ds-autocomplete.types.js";
+import { DsAutocomplete } from "./ds-autocomplete.js";

package/dist/components/ds-autocomplete/index.js

@@ -0,0 +1 @@
+import { DsAutocomplete } from "./ds-autocomplete.js";

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

@@ -6,7 +6,7 @@ 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 __ark_ui_react_avatar = require("@ark-ui/react/avatar");
+let _ark_ui_react_avatar = require("@ark-ui/react/avatar");
 
 //#region src/components/ds-avatar/ds-avatar.tsx
 /**
@@ -42,7 +42,7 @@ const DsAvatar = (t0) => {
 	} else t7 = $[7];
 	let t8;
 	if ($[8] !== t7) {
-		t8 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_avatar.Avatar.Fallback, {
+		t8 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_avatar.Avatar.Fallback, {
 			className: require_ds_avatar_module.default.fallback,
 			children: t7
 		});
@@ -51,7 +51,7 @@ const DsAvatar = (t0) => {
 	} else t8 = $[9];
 	let t9;
 	if ($[10] !== alt || $[11] !== name || $[12] !== src) {
-		t9 = src && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_avatar.Avatar.Image, {
+		t9 = src && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_avatar.Avatar.Image, {
 			src,
 			alt: alt || name
 		});
@@ -62,7 +62,7 @@ const DsAvatar = (t0) => {
 	} else t9 = $[13];
 	let t10;
 	if ($[14] !== style || $[15] !== t3 || $[16] !== t6 || $[17] !== t8 || $[18] !== t9) {
-		t10 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ark_ui_react_avatar.Avatar.Root, {
+		t10 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_ark_ui_react_avatar.Avatar.Root, {
 			onStatusChange: t3,
 			className: t6,
 			style,

package/dist/components/ds-avatar/ds-avatar.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"ds-avatar.module.js","names":[],"sources":["../../../file:/home/runner/work/design-system/design-system/packages/design-system/src/components/ds-avatar/ds-avatar.module.scss","../../../file:/home/runner/work/design-system/design-system/packages/design-system/src/components/ds-avatar/_mixins.scss"],"sourcesContent":["@import './mixins';\n\n.avatar {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\tposition: relative;\n\toverflow: hidden;\n\tbackground-color: var(--color-background-deselected);\n\tcolor: var(--color-font-on-action);\n\tflex-shrink: 0;\n\tuser-select: none;\n\n\t&.circle {\n\t\tborder-radius: 50%;\n\t}\n\n\t&.rounded {\n\t\t&.xsm,\n\t\t&.sm {\n\t\t\tborder-radius: $avatar-border-radius-small;\n\t\t}\n\t\t&.regular,\n\t\t&.md,\n\t\t&.lg,\n\t\t&.xl {\n\t\t\tborder-radius: $avatar-border-radius-large;\n\t\t}\n\t}\n\n\t@include avatar-sizes;\n\n\timg {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tobject-fit: cover;\n\t\tdisplay: block;\n\t}\n\n\t.fallback {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tfont-weight: var(--font-weight-medium);\n\t\ttext-transform: uppercase;\n\t}\n}\n"],"mappings":""}
+{"version":3,"file":"ds-avatar.module.js","names":[],"sources":["../../../file:/home/runner/work/design-system/design-system/packages/design-system/src/components/ds-avatar/ds-avatar.module.scss","../../../file:/home/runner/work/design-system/design-system/packages/design-system/src/components/ds-avatar/_mixins.scss"],"sourcesContent":["@use './mixins' as *;\n\n.avatar {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\tposition: relative;\n\toverflow: hidden;\n\tbackground-color: var(--color-background-deselected);\n\tcolor: var(--color-font-on-action);\n\tflex-shrink: 0;\n\tuser-select: none;\n\n\t&.circle {\n\t\tborder-radius: 50%;\n\t}\n\n\t&.rounded {\n\t\t&.xsm,\n\t\t&.sm {\n\t\t\tborder-radius: $avatar-border-radius-small;\n\t\t}\n\t\t&.regular,\n\t\t&.md,\n\t\t&.lg,\n\t\t&.xl {\n\t\t\tborder-radius: $avatar-border-radius-large;\n\t\t}\n\t}\n\n\t@include avatar-sizes;\n\n\timg {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tobject-fit: cover;\n\t\tdisplay: block;\n\t}\n\n\t.fallback {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tfont-weight: var(--font-weight-medium);\n\t\ttext-transform: uppercase;\n\t}\n}\n"],"mappings":""}

package/dist/components/ds-avatar-group/ds-avatar-group.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"ds-avatar-group.module.js","names":[],"sources":["../../../file:/home/runner/work/design-system/design-system/packages/design-system/src/components/ds-avatar-group/ds-avatar-group.module.scss","../../../file:/home/runner/work/design-system/design-system/packages/design-system/src/components/ds-avatar/_mixins.scss"],"sourcesContent":["@import '../ds-avatar/mixins';\n\n.avatarGroup {\n\tdisplay: flex;\n\talign-items: center;\n\n\t.avatarItem {\n\t\tborder: $avatar-border-width solid var(--color-background);\n\n\t\t&:not(:first-child) {\n\t\t\tmargin-left: $avatar-overlap-default;\n\t\t}\n\n\t\t&.xsm:not(:first-child) {\n\t\t\tmargin-left: $avatar-overlap-xsm;\n\t\t}\n\n\t\t&.sm:not(:first-child) {\n\t\t\tmargin-left: $avatar-overlap-sm;\n\t\t}\n\t}\n\n\t.moreAvatar {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tbackground-color: var(--color-background);\n\t\tcolor: var(--color-font-action);\n\t\tborder: $avatar-border-width solid var(--color-background);\n\t\tmargin-left: $avatar-overlap-default;\n\t\tfont-weight: var(--font-weight-medium);\n\t\tz-index: 1;\n\t\tcursor: default;\n\t\tflex-shrink: 0;\n\n\t\t&.circle {\n\t\t\tborder-radius: 50%;\n\t\t}\n\n\t\t&.rounded {\n\t\t\t&.xsm,\n\t\t\t&.sm {\n\t\t\t\tborder-radius: $avatar-border-radius-small;\n\t\t\t}\n\t\t\t&.regular,\n\t\t\t&.md,\n\t\t\t&.lg,\n\t\t\t&.xl {\n\t\t\t\tborder-radius: $avatar-border-radius-large;\n\t\t\t}\n\t\t}\n\n\t\t@include avatar-sizes;\n\n\t\t&.xsm {\n\t\t\tmargin-left: $avatar-overlap-xsm;\n\t\t}\n\n\t\t&.sm {\n\t\t\tmargin-left: $avatar-overlap-sm;\n\t\t}\n\t}\n\n\t.tooltipList {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: var(--spacing-3xs);\n\t\tpadding: var(--spacing-3xs) 0;\n\t}\n}\n"],"mappings":""}
+{"version":3,"file":"ds-avatar-group.module.js","names":[],"sources":["../../../file:/home/runner/work/design-system/design-system/packages/design-system/src/components/ds-avatar-group/ds-avatar-group.module.scss","../../../file:/home/runner/work/design-system/design-system/packages/design-system/src/components/ds-avatar/_mixins.scss"],"sourcesContent":["@use '../ds-avatar/mixins' as *;\n\n.avatarGroup {\n\tdisplay: flex;\n\talign-items: center;\n\n\t.avatarItem {\n\t\tborder: $avatar-border-width solid var(--color-background);\n\n\t\t&:not(:first-child) {\n\t\t\tmargin-left: $avatar-overlap-default;\n\t\t}\n\n\t\t&.xsm:not(:first-child) {\n\t\t\tmargin-left: $avatar-overlap-xsm;\n\t\t}\n\n\t\t&.sm:not(:first-child) {\n\t\t\tmargin-left: $avatar-overlap-sm;\n\t\t}\n\t}\n\n\t.moreAvatar {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tbackground-color: var(--color-background);\n\t\tcolor: var(--color-font-action);\n\t\tborder: $avatar-border-width solid var(--color-background);\n\t\tmargin-left: $avatar-overlap-default;\n\t\tfont-weight: var(--font-weight-medium);\n\t\tz-index: 1;\n\t\tcursor: default;\n\t\tflex-shrink: 0;\n\n\t\t&.circle {\n\t\t\tborder-radius: 50%;\n\t\t}\n\n\t\t&.rounded {\n\t\t\t&.xsm,\n\t\t\t&.sm {\n\t\t\t\tborder-radius: $avatar-border-radius-small;\n\t\t\t}\n\t\t\t&.regular,\n\t\t\t&.md,\n\t\t\t&.lg,\n\t\t\t&.xl {\n\t\t\t\tborder-radius: $avatar-border-radius-large;\n\t\t\t}\n\t\t}\n\n\t\t@include avatar-sizes;\n\n\t\t&.xsm {\n\t\t\tmargin-left: $avatar-overlap-xsm;\n\t\t}\n\n\t\t&.sm {\n\t\t\tmargin-left: $avatar-overlap-sm;\n\t\t}\n\t}\n\n\t.tooltipList {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: var(--spacing-3xs);\n\t\tpadding: var(--spacing-3xs) 0;\n\t}\n}\n"],"mappings":""}

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

@@ -13,7 +13,7 @@ let classnames = require("classnames");
 classnames = require_rolldown_runtime.__toESM(classnames);
 let react_jsx_runtime = require("react/jsx-runtime");
 let react = require("react");
-let __tanstack_react_router = require("@tanstack/react-router");
+let _tanstack_react_router = require("@tanstack/react-router");
 
 //#region src/components/ds-breadcrumb/ds-breadcrumb.tsx
 /**
@@ -22,7 +22,7 @@ let __tanstack_react_router = require("@tanstack/react-router");
 const DsBreadcrumb = (t0) => {
 	const $ = (0, react_compiler_runtime.c)(17);
 	const { items, onSelect, className } = t0;
-	const location = (0, __tanstack_react_router.useLocation)();
+	const location = (0, _tanstack_react_router.useLocation)();
 	const [search, setSearch] = (0, react.useState)("");
 	let t1;
 	if ($[0] !== className) {
@@ -39,7 +39,7 @@ const DsBreadcrumb = (t0) => {
 				const filteredOptions = item.type === "dropdown" ? item.options.filter((opt) => opt.label.toLowerCase().includes(search.toLowerCase())) : [];
 				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
 					className: require_ds_breadcrumb_module.default.breadcrumbItem,
-					children: item.type === "link" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__tanstack_react_router.Link, {
+					children: item.type === "link" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_tanstack_react_router.Link, {
 						to: item.href,
 						className: (0, classnames.default)(require_ds_breadcrumb_module.default.link),
 						"aria-current": index === items.length - 1 ? "page" : void 0,

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

@@ -1,8 +1,8 @@
 import { DsButtonUnifiedProps } from "./ds-button.types.cjs";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime4 from "react/jsx-runtime";
 
 //#region src/components/ds-button/ds-button.d.ts
-declare const DsButton: (props: DsButtonUnifiedProps) => react_jsx_runtime0.JSX.Element;
+declare const DsButton: (props: DsButtonUnifiedProps) => react_jsx_runtime4.JSX.Element;
 //#endregion
 export { DsButton };
 //# sourceMappingURL=ds-button.d.cts.map

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

@@ -1,8 +1,8 @@
 import { DsButtonUnifiedProps } from "./ds-button.types.js";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime24 from "react/jsx-runtime";
 
 //#region src/components/ds-button/ds-button.d.ts
-declare const DsButton: (props: DsButtonUnifiedProps) => react_jsx_runtime0.JSX.Element;
+declare const DsButton: (props: DsButtonUnifiedProps) => react_jsx_runtime24.JSX.Element;
 //#endregion
 export { DsButton };
 //# sourceMappingURL=ds-button.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ds-button.d.ts","names":[],"sources":["../../../src/components/ds-button/ds-button.tsx"],"sourcesContent":[],"mappings":";;;;cAIM,kBAAmB,yBAAoB,kBAAA,CAAA,GAAA,CAAA"}
+{"version":3,"file":"ds-button.d.ts","names":[],"sources":["../../../src/components/ds-button/ds-button.tsx"],"sourcesContent":[],"mappings":";;;;cAIM,kBAAmB,yBAAoB,mBAAA,CAAA,GAAA,CAAA"}

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

@@ -0,0 +1,263 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_ds_card_module = require('./ds-card.module.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");
+
+//#region src/components/ds-card/ds-card.tsx
+/**
+* Card root component - container with optional selectable behavior.
+* Use composition with DsCard.Header, DsCard.Body, DsCard.Footer for full flexibility.
+*/
+const Root = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(33);
+	let children;
+	let className;
+	let onClick;
+	let onKeyDown;
+	let ref;
+	let rest;
+	let style;
+	let t1;
+	let t2;
+	let t3;
+	let t4;
+	let t5;
+	if ($[0] !== t0) {
+		({ref, size: t1, selectable: t2, selected: t3, highlightSelected: t4, disabled: t5, className, style, children, onClick, onKeyDown, ...rest} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = onClick;
+		$[4] = onKeyDown;
+		$[5] = ref;
+		$[6] = rest;
+		$[7] = style;
+		$[8] = t1;
+		$[9] = t2;
+		$[10] = t3;
+		$[11] = t4;
+		$[12] = t5;
+	} else {
+		children = $[1];
+		className = $[2];
+		onClick = $[3];
+		onKeyDown = $[4];
+		ref = $[5];
+		rest = $[6];
+		style = $[7];
+		t1 = $[8];
+		t2 = $[9];
+		t3 = $[10];
+		t4 = $[11];
+		t5 = $[12];
+	}
+	const size = t1 === void 0 ? "medium" : t1;
+	const selectable = t2 === void 0 ? false : t2;
+	const selected = t3 === void 0 ? false : t3;
+	const highlightSelected = t4 === void 0 ? false : t4;
+	const disabled = t5 === void 0 ? false : t5;
+	let t6;
+	if ($[13] !== disabled || $[14] !== selectable || $[15] !== selected) {
+		t6 = selectable ? {
+			role: "button",
+			tabIndex: disabled ? -1 : 0,
+			"aria-pressed": selected,
+			"aria-disabled": disabled || void 0
+		} : {};
+		$[13] = disabled;
+		$[14] = selectable;
+		$[15] = selected;
+		$[16] = t6;
+	} else t6 = $[16];
+	const interactiveProps = t6;
+	const t7 = disabled ? void 0 : onClick;
+	const t8 = disabled ? void 0 : onKeyDown;
+	const t9 = selectable || void 0;
+	const t10 = selected || void 0;
+	const t11 = disabled || void 0;
+	const t12 = selected && highlightSelected || void 0;
+	let t13;
+	if ($[17] !== className) {
+		t13 = (0, classnames.default)(require_ds_card_module.default.root, className);
+		$[17] = className;
+		$[18] = t13;
+	} else t13 = $[18];
+	let t14;
+	if ($[19] !== children || $[20] !== interactiveProps || $[21] !== ref || $[22] !== rest || $[23] !== size || $[24] !== style || $[25] !== t10 || $[26] !== t11 || $[27] !== t12 || $[28] !== t13 || $[29] !== t7 || $[30] !== t8 || $[31] !== t9) {
+		t14 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			ref,
+			...rest,
+			...interactiveProps,
+			onClick: t7,
+			onKeyDown: t8,
+			"data-size": size,
+			"data-selectable": t9,
+			"data-selected": t10,
+			"data-disabled": t11,
+			"data-highlight": t12,
+			className: t13,
+			style,
+			children
+		});
+		$[19] = children;
+		$[20] = interactiveProps;
+		$[21] = ref;
+		$[22] = rest;
+		$[23] = size;
+		$[24] = style;
+		$[25] = t10;
+		$[26] = t11;
+		$[27] = t12;
+		$[28] = t13;
+		$[29] = t7;
+		$[30] = t8;
+		$[31] = t9;
+		$[32] = t14;
+	} else t14 = $[32];
+	return t14;
+};
+/**
+* Card header - contains title and extra content.
+* Use with DsCard.Title and DsCard.Extra for standard layout,
+* or provide custom children for full flexibility.
+*/
+const Header = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(12);
+	let children;
+	let className;
+	let ref;
+	let rest;
+	if ($[0] !== t0) {
+		({className, children, ref, ...rest} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = ref;
+		$[4] = rest;
+	} else {
+		children = $[1];
+		className = $[2];
+		ref = $[3];
+		rest = $[4];
+	}
+	let t1;
+	if ($[5] !== className) {
+		t1 = (0, classnames.default)(require_ds_card_module.default.header, className);
+		$[5] = className;
+		$[6] = t1;
+	} else t1 = $[6];
+	let t2;
+	if ($[7] !== children || $[8] !== ref || $[9] !== rest || $[10] !== t1) {
+		t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			ref,
+			className: t1,
+			...rest,
+			children
+		});
+		$[7] = children;
+		$[8] = ref;
+		$[9] = rest;
+		$[10] = t1;
+		$[11] = t2;
+	} else t2 = $[11];
+	return t2;
+};
+/**
+* Card body - main content area.
+*/
+const Body = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(12);
+	let children;
+	let className;
+	let ref;
+	let rest;
+	if ($[0] !== t0) {
+		({className, children, ref, ...rest} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = ref;
+		$[4] = rest;
+	} else {
+		children = $[1];
+		className = $[2];
+		ref = $[3];
+		rest = $[4];
+	}
+	let t1;
+	if ($[5] !== className) {
+		t1 = (0, classnames.default)(require_ds_card_module.default.body, className);
+		$[5] = className;
+		$[6] = t1;
+	} else t1 = $[6];
+	let t2;
+	if ($[7] !== children || $[8] !== ref || $[9] !== rest || $[10] !== t1) {
+		t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			ref,
+			className: t1,
+			...rest,
+			children
+		});
+		$[7] = children;
+		$[8] = ref;
+		$[9] = rest;
+		$[10] = t1;
+		$[11] = t2;
+	} else t2 = $[11];
+	return t2;
+};
+/**
+* Card footer - bottom section for actions or additional info.
+*/
+const Footer = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(12);
+	let children;
+	let className;
+	let ref;
+	let rest;
+	if ($[0] !== t0) {
+		({className, children, ref, ...rest} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = ref;
+		$[4] = rest;
+	} else {
+		children = $[1];
+		className = $[2];
+		ref = $[3];
+		rest = $[4];
+	}
+	let t1;
+	if ($[5] !== className) {
+		t1 = (0, classnames.default)(require_ds_card_module.default.footer, className);
+		$[5] = className;
+		$[6] = t1;
+	} else t1 = $[6];
+	let t2;
+	if ($[7] !== children || $[8] !== ref || $[9] !== rest || $[10] !== t1) {
+		t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			ref,
+			className: t1,
+			...rest,
+			children
+		});
+		$[7] = children;
+		$[8] = ref;
+		$[9] = rest;
+		$[10] = t1;
+		$[11] = t2;
+	} else t2 = $[11];
+	return t2;
+};
+const DsCard = {
+	Root,
+	Header,
+	Body,
+	Footer
+};
+
+//#endregion
+exports.DsCard = DsCard;

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

@@ -0,0 +1,41 @@
+import { DsCardBodyProps, DsCardFooterProps, DsCardHeaderProps, DsCardRootProps } from "./ds-card.types.cjs";
+import * as react_jsx_runtime13 from "react/jsx-runtime";
+
+//#region src/components/ds-card/ds-card.d.ts
+declare const DsCard: {
+  Root: ({
+    ref,
+    size,
+    selectable,
+    selected,
+    highlightSelected,
+    disabled,
+    className,
+    style,
+    children,
+    onClick,
+    onKeyDown,
+    ...rest
+  }: DsCardRootProps) => react_jsx_runtime13.JSX.Element;
+  Header: ({
+    className,
+    children,
+    ref,
+    ...rest
+  }: DsCardHeaderProps) => react_jsx_runtime13.JSX.Element;
+  Body: ({
+    className,
+    children,
+    ref,
+    ...rest
+  }: DsCardBodyProps) => react_jsx_runtime13.JSX.Element;
+  Footer: ({
+    className,
+    children,
+    ref,
+    ...rest
+  }: DsCardFooterProps) => react_jsx_runtime13.JSX.Element;
+};
+//#endregion
+export { DsCard };
+//# sourceMappingURL=ds-card.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-card.d.cts","names":[],"sources":["../../../src/components/ds-card/ds-card.tsx"],"sourcesContent":[],"mappings":";;;;cAiFa;;;;;;;;;;;;;;KA3DV,oBAAe,mBAAA,CAAA,GAAA,CAAA;;;;;;KAmCqC,sBAAiB,mBAAA,CAAA,GAAA,CAAA;EAwB3D,IAAA,EAAA,CAAA;IAKZ,SAAA;IAAA,QAAA;IAAA,GAAA;IAAA,GAAA;EAAA,CAAA,EApBoD,eAoBpD,EAAA,GApBmE,mBAAA,CAAA,GAAA,CAAA,OAoBnE;;;;;;KAXsD,sBAAiB,mBAAA,CAAA,GAAA,CAAA"}