@drivenets/design-system 0.16.0 → 0.18.0

package/src/components/ds-filter-status-icon/ds-filter-status-icon.figma.ts

@@ -16,7 +16,7 @@ const activeProp = active ? '' : ' active={false}';
 
 export default {
 	example: figma.code`<DsFilterStatusIcon status="${status}"${activeProp} />`,
-	imports: ["import { DsFilterStatusIcon } from '@drivenets/design-system'"],
+	imports: ["import { DsFilterStatusIcon } from '@drivenets/design-system';"],
 	id: 'ds-filter-status-icon',
 	metadata: { nestable: true },
-};
+} satisfies figma.Template;

package/src/components/ds-form-control/ds-form-control.figma.ts

@@ -70,7 +70,7 @@ const formControlAttrs = [labelAttr, requiredAttr, hideLabelAttr, statusAttr, me
 
 export default {
 	example: figma.code`<DsFormControl ${formControlAttrs}>${description}${child}</DsFormControl>`,
-	imports: ["import { DsFormControl } from '@drivenets/design-system'"],
+	imports: ["import { DsFormControl } from '@drivenets/design-system';"],
 	id: 'ds-form-control',
 	metadata: { nestable: false },
-};
+} satisfies figma.Template;

package/src/components/ds-form-control/ds-form-control.tsx

@@ -41,7 +41,7 @@ const DsFormControlDescription: React.FC<DsFormControlDescriptionProps> = ({ chi
 	return <div className={classNames(styles.description, className)}>{children}</div>;
 };
 
-const DsFormControl = ({
+const DsFormControlRoot = ({
 	id,
 	status,
 	label,
@@ -96,18 +96,20 @@ const DsFormControl = ({
 	);
 };
 
-DsFormControl.TextInput = controlify(DsTextInput);
-DsFormControl.NumberInput = controlify(DsNumberInput);
-DsFormControl.PasswordInput = controlify(DsPasswordInput);
-/** @deprecated DsDateInput is deprecated. Use DsDatePicker or DsDateRangePicker instead. */
-DsFormControl.DateInput = controlify(DsDateInput);
-DsFormControl.DatePicker = controlify(DsDatePicker);
-DsFormControl.TimePicker = controlify(DsTimePicker);
-DsFormControl.Textarea = controlify(DsTextarea);
-DsFormControl.Select = controlify(DsSelect);
-DsFormControl.Description = DsFormControlDescription;
+DsFormControlDescription.displayName = 'DsFormControl.Description';
 
-DsFormControl.displayName = 'DsFormControl';
-DsFormControl.Description.displayName = 'DsFormControl.Description';
+const DsFormControl = Object.assign(DsFormControlRoot, {
+	displayName: 'DsFormControl',
+	TextInput: controlify(DsTextInput),
+	NumberInput: controlify(DsNumberInput),
+	PasswordInput: controlify(DsPasswordInput),
+	/** @deprecated DsDateInput is deprecated. Use DsDatePicker or DsDateRangePicker instead. */
+	DateInput: controlify(DsDateInput),
+	DatePicker: controlify(DsDatePicker),
+	TimePicker: controlify(DsTimePicker),
+	Textarea: controlify(DsTextarea),
+	Select: controlify(DsSelect),
+	Description: DsFormControlDescription,
+});
 
 export default DsFormControl;

package/src/components/ds-icon/figma/ds-icon-material.figma.batch.ts

@@ -4,7 +4,7 @@ const batch = figma.batch as { icon: string; filled: boolean; id: string };
 
 export default {
 	example: figma.code`<DsIcon icon="${batch.icon}"${batch.filled ? ' filled' : ''} />`,
-	imports: ["import { DsIcon } from '@drivenets/design-system'"],
+	imports: ["import { DsIcon } from '@drivenets/design-system';"],
 	id: batch.id,
 	metadata: { nestable: true, props: { icon: batch.icon } },
 };

package/src/components/ds-icon/figma/ds-icon-special.figma.batch.ts

@@ -12,7 +12,7 @@ export default {
 	example: icon
 		? figma.code`<DsIcon icon="${icon}" />`
 		: figma.code`{/* This icon is not available in @drivenets/design-system */}`,
-	imports: ["import { DsIcon } from '@drivenets/design-system'"],
+	imports: ["import { DsIcon } from '@drivenets/design-system';"],
 	id: batch.id,
 	metadata: { nestable: true, props: { icon } },
 };

package/src/components/ds-key-value-pair/ds-key-value-pair.figma.ts

@@ -18,7 +18,7 @@ const orientation =
 
 export default {
 	example: figma.code`<DsKeyValuePair keyLabel="Label" value="Value" orientation="${orientation}" />`,
-	imports: ["import { DsKeyValuePair } from '@drivenets/design-system'"],
+	imports: ["import { DsKeyValuePair } from '@drivenets/design-system';"],
 	id: 'ds-key-value-pair',
 	metadata: { nestable: true },
-};
+} satisfies figma.Template;

package/src/components/ds-loader/ds-loader.figma.ts

@@ -5,7 +5,7 @@ import figma from 'figma';
 
 export default {
 	example: figma.code`<DsLoader />`,
-	imports: ["import { DsLoader } from '@drivenets/design-system'"],
+	imports: ["import { DsLoader } from '@drivenets/design-system';"],
 	id: 'ds-loader',
 	metadata: { nestable: true },
-};
+} satisfies figma.Template;

package/src/components/ds-modal/ds-modal.tsx

@@ -13,7 +13,7 @@ import { DsTypography } from '../ds-typography';
  * Supports custom header, footer, and body content with grid-based sizing.
  * Use columns prop to control modal width (1-12 grid columns).
  */
-const DsModal = ({
+const DsModalRoot = ({
 	open,
 	columns = 6,
 	dividers = false,
@@ -145,13 +145,14 @@ Body.displayName = 'DsModal.Body';
 Footer.displayName = 'DsModal.Footer';
 Actions.displayName = 'DsModal.Actions';
 
-DsModal.Header = Header;
-DsModal.Title = Title;
-DsModal.CloseTrigger = CloseTrigger;
-DsModal.Body = Body;
-DsModal.Footer = Footer;
-DsModal.Actions = Actions;
-
-DsModal.displayName = 'DsModal';
+const DsModal = Object.assign(DsModalRoot, {
+	displayName: 'DsModal',
+	Header,
+	Title,
+	CloseTrigger,
+	Body,
+	Footer,
+	Actions,
+});
 
 export default DsModal;

package/src/components/ds-modal/figma/ds-modal-content.figma.ts

@@ -12,7 +12,7 @@ const content = instance.getSlot('Modal content slot');
 
 export default {
 	example: figma.code`<DsModal.Body>${content}</DsModal.Body>`,
-	imports: ["import { DsModal } from '@drivenets/design-system'"],
+	imports: ["import { DsModal } from '@drivenets/design-system';"],
 	id: 'ds-modal-content',
 	metadata: { nestable: true },
-};
+} satisfies figma.Template;

package/src/components/ds-modal/figma/ds-modal-footer.figma.ts

@@ -13,7 +13,7 @@ const rightButtons = instance.getSlot('right side buttons');
 
 export default {
 	example: figma.code`<DsModal.Footer><DsModal.Actions>${rightButtons}</DsModal.Actions></DsModal.Footer>`,
-	imports: ["import { DsModal } from '@drivenets/design-system'"],
+	imports: ["import { DsModal } from '@drivenets/design-system';"],
 	id: 'ds-modal-footer',
 	metadata: { nestable: true },
-};
+} satisfies figma.Template;

package/src/components/ds-modal/figma/ds-modal-header.figma.ts

@@ -15,7 +15,7 @@ const title = titleNode.type === 'TEXT' ? titleNode.textContent : 'Modal title';
 
 export default {
 	example: figma.code`<DsModal.Header><DsModal.Title>${title}</DsModal.Title><DsModal.CloseTrigger /></DsModal.Header>`,
-	imports: ["import { DsModal } from '@drivenets/design-system'"],
+	imports: ["import { DsModal } from '@drivenets/design-system';"],
 	id: 'ds-modal-header',
 	metadata: { nestable: true },
-};
+} satisfies figma.Template;

package/src/components/ds-modal/figma/ds-modal.figma.ts

@@ -30,7 +30,7 @@ if (footer.type === 'INSTANCE') {
 
 export default {
 	example: figma.code`<DsModal open columns={6} onOpenChange={() => {}}>${headerCode}${contentCode}${footerCode}</DsModal>`,
-	imports: ["import { DsModal } from '@drivenets/design-system'"],
+	imports: ["import { DsModal } from '@drivenets/design-system';"],
 	id: 'ds-modal',
 	metadata: { nestable: false },
-};
+} satisfies figma.Template;

package/src/components/ds-number-input/ds-number-input.tsx

@@ -35,6 +35,7 @@ const DsNumberInput: FC<DsNumberInputProps> = ({
 	return (
 		<NumberInput.Root
 			id={id}
+			ids={{ input: id }}
 			min={min}
 			max={max}
 			step={step}

package/src/components/ds-panel/ds-panel.figma.ts

@@ -10,7 +10,7 @@ const openAttr = open ? 'open' : 'open={false}';
 
 export default {
 	example: figma.code`<DsPanel ${openAttr}>{/* panel content */}</DsPanel>`,
-	imports: ["import { DsPanel } from '@drivenets/design-system'"],
+	imports: ["import { DsPanel } from '@drivenets/design-system';"],
 	id: 'ds-panel',
 	metadata: { nestable: false },
-};
+} satisfies figma.Template;

package/src/components/ds-popover/figma/ds-popover-content-item.figma.ts

@@ -12,7 +12,7 @@ const body = instance.getSlot('Slot');
 
 export default {
 	example: figma.code`<DsPopover.ContentItem${headlineAttr}>${body}</DsPopover.ContentItem>`,
-	imports: ["import { DsPopover } from '@drivenets/design-system'"],
+	imports: ["import { DsPopover } from '@drivenets/design-system';"],
 	id: 'ds-popover-content-item',
 	metadata: { nestable: true },
-};
+} satisfies figma.Template;

package/src/components/ds-popover/figma/ds-popover-content.figma.ts

@@ -9,7 +9,7 @@ const items = instance.getSlot('Slot');
 
 export default {
 	example: figma.code`<DsPopover.Content>${items}</DsPopover.Content>`,
-	imports: ["import { DsPopover } from '@drivenets/design-system'"],
+	imports: ["import { DsPopover } from '@drivenets/design-system';"],
 	id: 'ds-popover-content',
 	metadata: { nestable: true },
-};
+} satisfies figma.Template;

package/src/components/ds-popover/figma/ds-popover-footer.figma.ts

@@ -13,7 +13,7 @@ if (button.type === 'INSTANCE') {
 
 export default {
 	example: figma.code`<DsPopover.Footer>${buttonCode}</DsPopover.Footer>`,
-	imports: ["import { DsPopover } from '@drivenets/design-system'"],
+	imports: ["import { DsPopover } from '@drivenets/design-system';"],
 	id: 'ds-popover-footer',
 	metadata: { nestable: true },
-};
+} satisfies figma.Template;

package/src/components/ds-popover/figma/ds-popover-header.figma.ts

@@ -10,7 +10,7 @@ const title = titleNode.type === 'TEXT' ? titleNode.textContent : 'Popover title
 
 export default {
 	example: figma.code`<DsPopover.Header>${title}</DsPopover.Header>`,
-	imports: ["import { DsPopover } from '@drivenets/design-system'"],
+	imports: ["import { DsPopover } from '@drivenets/design-system';"],
 	id: 'ds-popover-header',
 	metadata: { nestable: true },
-};
+} satisfies figma.Template;

package/src/components/ds-popover/figma/ds-popover.figma.ts

@@ -28,7 +28,7 @@ export default {
 	<DsPopover.Trigger>{/* trigger element */}</DsPopover.Trigger>
 	<DsPopover.Panel>${headerCode}${contentCode}${footerCode}</DsPopover.Panel>
 </DsPopover.Root>`,
-	imports: ["import { DsPopover } from '@drivenets/design-system'"],
+	imports: ["import { DsPopover } from '@drivenets/design-system';"],
 	id: 'ds-popover',
 	metadata: { nestable: false },
-};
+} satisfies figma.Template;

package/src/components/ds-progress-arc/ds-progress-arc.figma.ts

@@ -17,7 +17,7 @@ const variant = instance.getEnum('State', {
 
 export default {
 	example: figma.code`<DsProgressArc variant="${variant}" size="${size}" value={0} />`,
-	imports: ["import { DsProgressArc } from '@drivenets/design-system'"],
+	imports: ["import { DsProgressArc } from '@drivenets/design-system';"],
 	id: 'ds-progress-arc',
 	metadata: { nestable: false },
-};
+} satisfies figma.Template;

package/src/components/ds-progress-donut/ds-progress-donut.figma.ts

@@ -39,7 +39,7 @@ const valueProp = typeof value === 'number' ? ` value={${String(value)}}` : '';
 
 export default {
 	example: figma.code`<DsProgressDonut variant="${variant}" size="${size}"${valueProp} />`,
-	imports: ["import { DsProgressDonut } from '@drivenets/design-system'"],
+	imports: ["import { DsProgressDonut } from '@drivenets/design-system';"],
 	id: 'ds-progress-donut',
 	metadata: { nestable: false },
-};
+} satisfies figma.Template;

package/src/components/ds-progress-linear/ds-progress-linear.figma.ts

@@ -20,7 +20,7 @@ const variant = instance.getEnum('Type', {
 
 export default {
 	example: figma.code`<DsProgressLinear variant="${variant}" size="${size}" value={0} />`,
-	imports: ["import { DsProgressLinear } from '@drivenets/design-system'"],
+	imports: ["import { DsProgressLinear } from '@drivenets/design-system';"],
 	id: 'ds-progress-linear',
 	metadata: { nestable: false },
-};
+} satisfies figma.Template;

package/src/components/ds-progress-task-bar/ds-progress-task-bar.figma.ts

@@ -23,7 +23,7 @@ const attrs = [
 
 export default {
 	example: zero ? figma.code`<DsProgressTaskBar total={999} />` : figma.code`<DsProgressTaskBar ${attrs} />`,
-	imports: ["import { DsProgressTaskBar } from '@drivenets/design-system'"],
+	imports: ["import { DsProgressTaskBar } from '@drivenets/design-system';"],
 	id: 'ds-progress-task-bar',
 	metadata: { nestable: false },
-};
+} satisfies figma.Template;

package/src/components/ds-radio-group/figma/ds-radio-group-item.figma.ts

@@ -18,7 +18,7 @@ const attrs = ['value="option"', 'label="Option"', state === 'disabled' ? 'disab
 
 export default {
 	example: figma.code`<DsRadioGroup.Item ${attrs} />`,
-	imports: ["import { DsRadioGroup } from '@drivenets/design-system'"],
+	imports: ["import { DsRadioGroup } from '@drivenets/design-system';"],
 	id: 'ds-radio-group-item',
 	metadata: { nestable: true },
-};
+} satisfies figma.Template;

package/src/components/ds-radio-group/figma/ds-radio-group.figma.ts

@@ -8,7 +8,7 @@ export default {
 	<DsRadioGroup.Item value="option-1" label="Option 1" />
 	<DsRadioGroup.Item value="option-2" label="Option 2" />
 </DsRadioGroup.Root>`,
-	imports: ["import { DsRadioGroup } from '@drivenets/design-system'"],
+	imports: ["import { DsRadioGroup } from '@drivenets/design-system';"],
 	id: 'ds-radio-group',
 	metadata: { nestable: false },
-};
+} satisfies figma.Template;

package/src/components/ds-segment-group/figma/ds-segment-group-item.figma.ts

@@ -19,7 +19,7 @@ const attrs = ['value="option"', 'label="Option"', state === 'disabled' ? 'disab
 
 export default {
 	example: figma.code`<DsSegmentGroup.Item ${attrs} />`,
-	imports: ["import { DsSegmentGroup } from '@drivenets/design-system'"],
+	imports: ["import { DsSegmentGroup } from '@drivenets/design-system';"],
 	id: 'ds-segment-group-item',
 	metadata: { nestable: true },
-};
+} satisfies figma.Template;

package/src/components/ds-segment-group/figma/ds-segment-group.figma.ts

@@ -17,7 +17,7 @@ export default {
 	<DsSegmentGroup.Item value="option-1" label="Option 1" />
 	<DsSegmentGroup.Item value="option-2" label="Option 2" />
 </DsSegmentGroup.Root>`,
-	imports: ["import { DsSegmentGroup } from '@drivenets/design-system'"],
+	imports: ["import { DsSegmentGroup } from '@drivenets/design-system';"],
 	id: 'ds-segment-group',
 	metadata: { nestable: false },
-};
+} satisfies figma.Template;

package/src/components/ds-select/ds-select.figma.ts

@@ -8,6 +8,7 @@ const instance = figma.selectedInstance;
 const size = instance.getEnum('Size', {
 	Default: 'default',
 	Small: 'small',
+	Large: 'large',
 });
 
 const state = instance.getEnum('State', {
@@ -22,7 +23,7 @@ const state = instance.getEnum('State', {
 
 const disabled = state === 'disable';
 
-const sizeAttr = size === 'small' ? 'size="small"' : '';
+const sizeAttr = size === 'small' || size === 'large' ? `size="${size}"` : '';
 
 // Multi-select is driven by the nested dropdown menu's `Type` (Checkbox = multi). The menu
 // lives inside the select tree even when collapsed, so the designer's intent is read in any
@@ -47,7 +48,7 @@ const attrs = [
 
 export default {
 	example: figma.code`<DsSelect ${attrs} />`,
-	imports: ["import { DsSelect } from '@drivenets/design-system'"],
+	imports: ["import { DsSelect } from '@drivenets/design-system';"],
 	id: 'ds-select',
 	metadata: { nestable: true, props: { fcMember: 'Select', fcProps: attrs } },
-};
+} satisfies figma.Template;

package/src/components/ds-select/ds-select.tsx

@@ -135,7 +135,12 @@ const DsSelect = ({
 			lazyMount
 		>
 			<Select.Control
-				className={classNames(styles.control, size === 'small' && styles.small, className)}
+				className={classNames(
+					styles.control,
+					size === 'small' && styles.small,
+					size === 'large' && styles.large,
+					className,
+				)}
 				style={style}
 				onBlur={onBlur}
 				onKeyDown={(e) => {

package/src/components/ds-select/ds-select.types.ts

@@ -2,7 +2,8 @@ import type React from 'react';
 import type { ReactNode } from 'react';
 import type { IconName } from '../ds-icon';
 
-export type SelectSize = 'default' | 'small';
+export const selectSizes = ['small', 'default', 'large'] as const;
+export type SelectSize = (typeof selectSizes)[number];
 
 export interface DsSelectOption {
 	/**

package/src/components/ds-site-node/ds-site-node.figma.ts

@@ -21,7 +21,7 @@ export default {
 		state === 'overflow'
 			? figma.code`<DsSiteNode state="${state}" overflowLabel="${overflowLabel}" />`
 			: figma.code`<DsSiteNode state="${state}" tier="${tier}" siteCode="${siteCode}" />`,
-	imports: ["import { DsSiteNode } from '@drivenets/design-system'"],
+	imports: ["import { DsSiteNode } from '@drivenets/design-system';"],
 	id: 'ds-site-node',
 	metadata: { nestable: true },
-};
+} satisfies figma.Template;

package/src/components/ds-slider/ds-slider.figma.ts

@@ -0,0 +1,29 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=29879-165
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-slider
+// component=DsSlider
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const type = instance.getEnum('type', {
+	value: 'value',
+	range: 'range',
+});
+
+const isRange = type === 'range';
+
+const attrs = [
+	'label="Input label"',
+	isRange ? 'type="range"' : '',
+	isRange ? 'defaultValue={[36, 60]}' : 'defaultValue={36}',
+	isRange ? "thumbLabels={['Minimum', 'Maximum']}" : '',
+]
+	.filter(Boolean)
+	.join(' ');
+
+export default {
+	example: figma.code`<DsSlider ${attrs} />`,
+	imports: ["import { DsSlider } from '@drivenets/design-system';"],
+	id: 'ds-slider',
+	metadata: { nestable: false },
+} satisfies figma.Template;

package/src/components/ds-slider/ds-slider.module.scss

@@ -0,0 +1,104 @@
+.root {
+	--ds-slider-thumb-size: var(--md);
+	--ds-slider-thumb-size-active: var(--lg);
+	--ds-slider-thumb-border: 2px;
+	--ds-slider-thumb-border-active: 4px;
+	--ds-slider-track-height: 4px;
+	--ds-slider-focus-ring: 3px;
+	--ds-slider-radius: 9999px;
+	--ds-slider-transition: 0.2s;
+
+	display: flex;
+	flex-direction: column;
+	gap: var(--sm);
+	width: 100%;
+
+	&.small {
+		--ds-slider-thumb-size: var(--standard);
+		--ds-slider-thumb-size-active: var(--md);
+		--ds-slider-track-height: 2px;
+	}
+
+	&.large {
+		--ds-slider-thumb-size: var(--lg);
+		--ds-slider-thumb-size-active: 28px;
+		--ds-slider-thumb-border: 3px;
+		--ds-slider-thumb-border-active: 5px;
+		--ds-slider-track-height: 8px;
+	}
+
+	&[data-disabled] {
+		cursor: not-allowed;
+
+		.range {
+			background: var(--background-disable);
+		}
+
+		.thumb {
+			cursor: not-allowed;
+			border-color: var(--background-disable);
+		}
+	}
+}
+
+.header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: var(--xs);
+	padding-bottom: var(--4xs);
+}
+
+.valueText {
+	margin-left: auto;
+	text-align: right;
+}
+
+.control {
+	position: relative;
+	display: flex;
+	align-items: center;
+	min-height: var(--ds-slider-thumb-size-active);
+}
+
+.track {
+	flex: 1;
+	height: var(--ds-slider-track-height);
+	background: var(--background-secondary-hover);
+	border-radius: var(--ds-slider-radius);
+}
+
+.range {
+	height: 100%;
+	background: var(--background-primary);
+	border-radius: var(--ds-slider-radius);
+}
+
+.thumb {
+	box-sizing: border-box;
+	width: var(--ds-slider-thumb-size);
+	height: var(--ds-slider-thumb-size);
+	background: var(--background);
+	border: var(--ds-slider-thumb-border) solid var(--background-primary);
+	border-radius: var(--ds-slider-radius);
+	outline: none;
+	cursor: pointer;
+	transition:
+		width var(--ds-slider-transition),
+		height var(--ds-slider-transition),
+		border-width var(--ds-slider-transition),
+		border-color var(--ds-slider-transition),
+		box-shadow var(--ds-slider-transition);
+
+	&:not([data-disabled]):hover,
+	&:focus-visible {
+		width: var(--ds-slider-thumb-size-active);
+		height: var(--ds-slider-thumb-size-active);
+		border-width: var(--ds-slider-thumb-border-active);
+		border-color: var(--background-primary-hover);
+	}
+
+	&:focus-visible {
+		box-shadow: 0 0 0 var(--ds-slider-focus-ring) var(--background-secondary-hover);
+	}
+}