@drivenets/design-system 0.15.0 → 0.17.0

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

@@ -0,0 +1,45 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=33315-40861
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-checkbox
+// component=DsCheckbox
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const color = instance.getEnum('color', {
+	Default: 'default',
+	warning: 'warning',
+});
+
+const checked = instance.getEnum('checked', {
+	unchecked: 'unchecked',
+	checked: 'checked',
+	partial: 'partial',
+});
+
+const state = instance.getEnum('state', {
+	default: 'default',
+	hover: 'hover',
+	focus: 'focus',
+	disabled: 'disabled',
+});
+
+// `partial` is Ark's indeterminate state; both checked values seed the
+// uncontrolled `defaultChecked` so the snippet renders without a handler.
+const checkedAttr =
+	checked === 'partial' ? 'defaultChecked="indeterminate"' : checked === 'checked' ? 'defaultChecked' : '';
+
+const attrs = [
+	'label="Label"',
+	color === 'warning' ? 'variant="warning"' : '',
+	checkedAttr,
+	state === 'disabled' ? 'disabled' : '',
+]
+	.filter(Boolean)
+	.join(' ');
+
+export default {
+	example: figma.code`<DsCheckbox ${attrs} />`,
+	imports: ["import { DsCheckbox } from '@drivenets/design-system';"],
+	id: 'ds-checkbox',
+	metadata: { nestable: true },
+} satisfies figma.Template;

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

@@ -1,4 +1,4 @@
-@use '../../styles/root_new';
+@use '../../styles/root';
 @use '../../styles/typography';
 
 $checkbox-size: 16px;

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

@@ -5,7 +5,13 @@ import type { DsCheckboxProps } from './ds-checkbox.types';
 import { DsIcon } from '../ds-icon';
 
 /**
- * Design system Checkbox component
+ * @summary Checkbox for single and grouped selection
+ *
+ * Checkbox for boolean and multi-select inputs. Use standalone for a single
+ * toggle, or compose inside `DsCheckboxGroup` for multi-select lists. Import
+ * `useCheckboxSelectAll` from `ds-checkbox-group` for parent "select all"
+ * checkboxes. `checked` accepts `true`, `false`, or `"indeterminate"`.
+ *
  */
 const DsCheckbox = ({
 	variant = 'default',
@@ -42,4 +48,6 @@ const DsCheckbox = ({
 	);
 };
 
+DsCheckbox.displayName = 'DsCheckbox';
+
 export default DsCheckbox;

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

@@ -0,0 +1,15 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=34859-101457
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-checkbox-group
+// component=DsCheckboxGroup
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const checkboxes = instance.getSlot('checkboxes slot');
+
+export default {
+	example: figma.code`<DsCheckboxGroup>${checkboxes}</DsCheckboxGroup>`,
+	imports: ["import { DsCheckboxGroup, DsCheckbox } from '@drivenets/design-system';"],
+	id: 'ds-checkbox-group',
+	metadata: { nestable: false },
+} satisfies figma.Template;

package/src/components/ds-checkbox-group/ds-checkbox-group.tsx

@@ -17,4 +17,6 @@ const DsCheckboxGroup: React.FC<DsCheckboxGroupProps> = ({
 	);
 };
 
+DsCheckboxGroup.displayName = 'DsCheckboxGroup';
+
 export default DsCheckboxGroup;

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

@@ -71,4 +71,6 @@ const DsChip: React.FC<DsChipProps> = ({
 	);
 };
 
+DsChip.displayName = 'DsChip';
+
 export default DsChip;

package/src/components/ds-chip-group/ds-chip-group.tsx

@@ -119,4 +119,6 @@ const DsChipGroup: React.FC<DsChipGroupProps> = ({
 	);
 };
 
+DsChipGroup.displayName = 'DsChipGroup';
+
 export default DsChipGroup;

package/src/components/ds-comment-bubble/components/ds-comment-thread/ds-comment-thread.tsx

@@ -81,3 +81,4 @@ export const DsCommentThread = ({
 		</div>
 	);
 };
+DsCommentThread.displayName = 'DsCommentThread';

package/src/components/ds-comment-bubble/components/ds-thread-item/ds-thread-item.tsx

@@ -136,3 +136,4 @@ export const DsThreadItem = ({
 		</div>
 	);
 };
+DsThreadItem.displayName = 'DsThreadItem';

package/src/components/ds-comment-bubble/ds-comment-bubble.tsx

@@ -247,3 +247,4 @@ export const DsCommentBubble = ({
 		</div>
 	);
 };
+DsCommentBubble.displayName = 'DsCommentBubble';

package/src/components/ds-comment-card/ds-comment-card.tsx

@@ -169,3 +169,4 @@ export const DsCommentCard = ({
 		</button>
 	);
 };
+DsCommentCard.displayName = 'DsCommentCard';

package/src/components/ds-comment-indicator/ds-comment-indicator.tsx

@@ -46,3 +46,4 @@ export const DsCommentIndicator = ({
 		</button>
 	);
 };
+DsCommentIndicator.displayName = 'DsCommentIndicator';

package/src/components/ds-comments-drawer/components/comments-filter-modal/index.ts

@@ -1,2 +1 @@
 export { CommentsFilterModal } from './comments-filter-modal';
-export type { CommentsFilterModalProps } from './comments-filter-modal.types';

package/src/components/ds-comments-drawer/ds-comments-drawer.tsx

@@ -207,3 +207,4 @@ export const DsCommentsDrawer = ({
 		</>
 	);
 };
+DsCommentsDrawer.displayName = 'DsCommentsDrawer';

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

@@ -1,17 +1,20 @@
 import { DsModal } from '../ds-modal';
 import type { DsConfirmationProps } from './ds-confirmation.types';
 
+const DsConfirmationRoot = (props: DsConfirmationProps) => (
+	<DsModal columns={4} closeOnEscape closeOnInteractOutside {...props} />
+);
+
 /**
  * @deprecated DsConfirmation is deprecated. Use DsModal instead.
  * @see {@link ../ds-modal} for the replacement component.
  */
-export const DsConfirmation = (props: DsConfirmationProps) => (
-	<DsModal columns={4} closeOnEscape closeOnInteractOutside {...props} />
-);
-
-DsConfirmation.Header = DsModal.Header;
-DsConfirmation.Title = DsModal.Title;
-DsConfirmation.CloseTrigger = DsModal.CloseTrigger;
-DsConfirmation.Body = DsModal.Body;
-DsConfirmation.Footer = DsModal.Footer;
-DsConfirmation.Actions = DsModal.Actions;
+export const DsConfirmation = Object.assign(DsConfirmationRoot, {
+	displayName: 'DsConfirmation',
+	Header: DsModal.Header,
+	Title: DsModal.Title,
+	CloseTrigger: DsModal.CloseTrigger,
+	Body: DsModal.Body,
+	Footer: DsModal.Footer,
+	Actions: DsModal.Actions,
+});

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

@@ -307,4 +307,6 @@ const YearView = () => (
 	</DatePicker.View>
 );
 
+DsDateInput.displayName = 'DsDateInput';
+
 export default DsDateInput;

package/src/components/ds-date-picker/ds-date-picker.figma.ts

@@ -13,7 +13,7 @@ export default {
 	example: figma.code`const [value, setValue] = useState<Date | null>(null);
 
 <DsDatePicker value={value} onChange={setValue} withTime placeholder="mm/dd/yyyy, hh:mm AM/PM" />`,
-	imports: ["import { useState } from 'react'", "import { DsDatePicker } from '@drivenets/design-system'"],
+	imports: ["import { DsDatePicker } from '@drivenets/design-system';", "import { useState } from 'react';"],
 	id: 'ds-date-picker',
 	metadata: { nestable: true, props: { fcMember: 'DatePicker', fcProps: '' } },
-};
+} satisfies figma.Template;

package/src/components/ds-date-picker/ds-date-picker.tsx

@@ -20,6 +20,13 @@ import { DayView } from './components/day-view';
 import { MonthView } from './components/month-view';
 import { YearView } from './components/year-view';
 
+/**
+ * @summary Date and optional time input with calendar popover and manual typing.
+ *
+ * Supports controlled (`value` + `onChange`) and uncontrolled (`defaultValue`) modes.
+ * Pass `withTime` to include a nested time picker. A clear button appears when a
+ * value is set unless `hideClearButton` is set.
+ */
 const DsDatePicker = ({
 	placeholder,
 	className,
@@ -211,4 +218,6 @@ const DsDatePicker = ({
 	);
 };
 
+DsDatePicker.displayName = 'DsDatePicker';
+
 export default DsDatePicker;

package/src/components/ds-date-picker/ds-date-picker.types.ts

@@ -98,7 +98,7 @@ export interface DsDatePickerProps extends Pick<
 
 	/**
 	 * Whether to hide the clear button
-	 * @default true
+	 * @default false
 	 */
 	hideClearButton?: boolean;
 

package/src/components/ds-date-range-picker/ds-date-range-picker.tsx

@@ -98,4 +98,6 @@ const DsDateRangePicker = ({
 	);
 };
 
+DsDateRangePicker.displayName = 'DsDateRangePicker';
+
 export default DsDateRangePicker;

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

@@ -5,6 +5,13 @@ import classNames from 'classnames';
 import styles from './ds-dialog.module.scss';
 import type { DsDialogProps } from './ds-dialog.types';
 
+/**
+ * @summary Lightweight controlled dialog for simple panels and popovers.
+ *
+ * Renders a Radix dialog with required accessible title, optional description,
+ * and custom body content. Use for focused overlays and menu-style panels.
+ * Prefer `DsModal` when you need structured header, body, and footer sections.
+ */
 const DsDialog: React.FC<DsDialogProps> = ({
 	open,
 	onOpenChange,
@@ -67,4 +74,6 @@ const DsDialog: React.FC<DsDialogProps> = ({
 	);
 };
 
+DsDialog.displayName = 'DsDialog';
+
 export default DsDialog;

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

@@ -36,7 +36,7 @@ export interface DsDialogProps {
 	/**
 	 * Ref to the element the dialog should be anchored to (for relative placement)
 	 */
-	anchorRef?: React.RefObject<HTMLElement>;
+	anchorRef?: React.RefObject<HTMLElement | null>;
 	/**
 	 * Custom fixed position (e.g., { top: number, left: number })
 	 */

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

@@ -0,0 +1,19 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=32735-122261
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-divider
+// component=DsDivider
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const orientation =
+	instance.getEnum('direction', {
+		Horizontal: 'horizontal',
+		Vertical: 'vertical',
+	}) ?? 'horizontal';
+
+export default {
+	example: figma.code`<DsDivider orientation="${orientation}" />`,
+	imports: ["import { DsDivider } from '@drivenets/design-system';"],
+	id: 'ds-divider',
+	metadata: { nestable: true },
+} satisfies figma.Template;

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

@@ -19,4 +19,6 @@ const DsDivider: React.FC<DsDividerProps> = ({ orientation = 'horizontal', compo
 	return <Component role="separator" aria-orientation={orientation} className={classes} style={style} />;
 };
 
+DsDivider.displayName = 'DsDivider';
+
 export default DsDivider;

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

@@ -9,7 +9,7 @@ import { DsTypography } from '../ds-typography';
 import { useArkDialogBodyLockCleanup } from '../../utils/use-ark-dialog-body-lock-cleanup';
 import { useResponsiveValue } from '../../utils/responsive';
 
-const DsDrawer = ({
+const DsDrawerRoot = ({
 	open,
 	onOpenChange,
 	onOpenAutoFocus,
@@ -170,12 +170,23 @@ const Actions = ({
 	</div>
 );
 
-DsDrawer.Header = Header;
-DsDrawer.Title = Title;
-DsDrawer.CloseTrigger = CloseTrigger;
-DsDrawer.Toolbar = Toolbar;
-DsDrawer.Body = Body;
-DsDrawer.Footer = Footer;
-DsDrawer.Actions = Actions;
+Header.displayName = 'DsDrawer.Header';
+Title.displayName = 'DsDrawer.Title';
+CloseTrigger.displayName = 'DsDrawer.CloseTrigger';
+Toolbar.displayName = 'DsDrawer.Toolbar';
+Body.displayName = 'DsDrawer.Body';
+Footer.displayName = 'DsDrawer.Footer';
+Actions.displayName = 'DsDrawer.Actions';
+
+const DsDrawer = Object.assign(DsDrawerRoot, {
+	displayName: 'DsDrawer',
+	Header,
+	Title,
+	CloseTrigger,
+	Toolbar,
+	Body,
+	Footer,
+	Actions,
+});
 
 export default DsDrawer;

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

@@ -0,0 +1,15 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=31470-130498
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-drawer
+// component=DsDrawer.Body
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const content = instance.getSlot('Drawer content slot');
+
+export default {
+	example: figma.code`<DsDrawer.Body>${content}</DsDrawer.Body>`,
+	imports: ["import { DsDrawer } from '@drivenets/design-system';"],
+	id: 'ds-drawer-content',
+	metadata: { nestable: true },
+} satisfies figma.Template;

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

@@ -0,0 +1,19 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=31416-38250
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-drawer
+// component=DsDrawer.Footer
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const button = instance.findInstance('DAP_Button_v03', { traverseInstances: true });
+let buttonCode: figma.ResultSection[] | undefined;
+if (button.type === 'INSTANCE') {
+	buttonCode = button.executeTemplate().example;
+}
+
+export default {
+	example: figma.code`<DsDrawer.Footer><DsDrawer.Actions>${buttonCode}</DsDrawer.Actions></DsDrawer.Footer>`,
+	imports: ["import { DsDrawer } from '@drivenets/design-system';"],
+	id: 'ds-drawer-footer',
+	metadata: { nestable: true },
+} satisfies figma.Template;

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

@@ -0,0 +1,16 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=31416-38215
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-drawer
+// component=DsDrawer.Header
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const titleNode = instance.findText('left side', { traverseInstances: true });
+const title = titleNode.type === 'TEXT' ? titleNode.textContent : 'Drawer title';
+
+export default {
+	example: figma.code`<DsDrawer.Header><DsDrawer.Title>${title}</DsDrawer.Title><DsDrawer.CloseTrigger /></DsDrawer.Header>`,
+	imports: ["import { DsDrawer } from '@drivenets/design-system';"],
+	id: 'ds-drawer-header',
+	metadata: { nestable: true },
+} satisfies figma.Template;

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

@@ -0,0 +1,36 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=31945-54500
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-drawer
+// component=DsDrawer
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const header = instance.findInstance('DAP_drawer-in-header_v02', { traverseInstances: true });
+let headerCode: figma.ResultSection[] | undefined;
+if (header.type === 'INSTANCE') {
+	headerCode = header.executeTemplate().example;
+}
+
+const content = instance.findInstance('DAP_drawer-content_v02', { traverseInstances: true });
+let contentCode: figma.ResultSection[] | undefined;
+if (content.type === 'INSTANCE') {
+	contentCode = content.executeTemplate().example;
+}
+
+// The footer instance is named `sheet-footer` inside the assembled drawer but the
+// standalone part is `DAP_drawer-in-footer_v02`; try both so the footer resolves.
+let footer = instance.findInstance('DAP_drawer-in-footer_v02', { traverseInstances: true });
+if (footer.type !== 'INSTANCE') {
+	footer = instance.findInstance('sheet-footer', { traverseInstances: true });
+}
+let footerCode: figma.ResultSection[] | undefined;
+if (footer.type === 'INSTANCE') {
+	footerCode = footer.executeTemplate().example;
+}
+
+export default {
+	example: figma.code`<DsDrawer open columns={4} onOpenChange={() => {}}>${headerCode}${contentCode}${footerCode}</DsDrawer>`,
+	imports: ["import { DsDrawer } from '@drivenets/design-system';"],
+	id: 'ds-drawer',
+	metadata: { nestable: false },
+} satisfies figma.Template;

package/src/components/ds-dropdown-menu/ds-dropdown-menu.module.scss

@@ -17,7 +17,8 @@
 		display: none;
 	}
 
-	&[data-nested='menu'] {
+	&[data-side='right'],
+	&[data-side='left'] {
 		margin-top: -1px;
 		z-index: 10000;
 	}
@@ -83,12 +84,20 @@
 	bottom: -1px;
 	z-index: 1;
 	display: flex;
+	border-top: 1px solid var(--border-secondary);
+	background-color: var(--background);
+}
+
+.actionsRow {
 	align-items: center;
 	justify-content: flex-end;
 	gap: var(--xs);
 	padding: var(--3xs) var(--xs);
-	border-top: 1px solid var(--border-secondary);
-	background-color: var(--background);
+}
+
+.actionsStretch {
+	flex-direction: column;
+	padding: var(--3xs);
 }
 
 .groupLabel {

package/src/components/ds-dropdown-menu/ds-dropdown-menu.tsx

@@ -35,9 +35,11 @@ interface GroupContextValue {
 
 const GroupContext = createContext<GroupContextValue | null>(null);
 
+const MENU_GUTTER = 4;
+
 const DEFAULT_POSITIONING: DsDropdownMenuPositioning = {
 	placement: 'bottom-start' as const,
-	gutter: 4,
+	gutter: MENU_GUTTER,
 };
 
 /**
@@ -158,15 +160,18 @@ const Header: React.FC<DsDropdownMenuHeaderProps> = ({ children, className, styl
 };
 
 /**
- * Actions component - footer container for action buttons
+ * Actions component - sticky bottom slot for action buttons (`align="end"`) or
+ * full-width elements like a logout item (`align="stretch"`).
  */
-const Actions: React.FC<DsDropdownMenuActionsProps> = ({ children, className, style }) => {
+const Actions: React.FC<DsDropdownMenuActionsProps> = ({ children, align = 'end', className, style }) => {
 	return (
 		<div
-			className={classNames(styles.actions, className)}
+			className={classNames(
+				styles.actions,
+				align === 'stretch' ? styles.actionsStretch : styles.actionsRow,
+				className,
+			)}
 			style={style}
-			role="menu"
-			aria-label="Menu actions"
 		>
 			{children}
 		</div>
@@ -414,3 +419,16 @@ export const DsDropdownMenu = {
 	ItemGroupContent,
 	Separator,
 };
+DsDropdownMenu.Root.displayName = 'DsDropdownMenu.Root';
+DsDropdownMenu.Trigger.displayName = 'DsDropdownMenu.Trigger';
+DsDropdownMenu.Content.displayName = 'DsDropdownMenu.Content';
+DsDropdownMenu.Item.displayName = 'DsDropdownMenu.Item';
+DsDropdownMenu.ItemIndicator.displayName = 'DsDropdownMenu.ItemIndicator';
+DsDropdownMenu.TriggerItem.displayName = 'DsDropdownMenu.TriggerItem';
+DsDropdownMenu.Header.displayName = 'DsDropdownMenu.Header';
+DsDropdownMenu.Actions.displayName = 'DsDropdownMenu.Actions';
+DsDropdownMenu.ItemGroup.displayName = 'DsDropdownMenu.ItemGroup';
+DsDropdownMenu.ItemGroupLabel.displayName = 'DsDropdownMenu.ItemGroupLabel';
+DsDropdownMenu.ItemGroupContent.displayName = 'DsDropdownMenu.ItemGroupContent';
+DsDropdownMenu.Separator.displayName = 'DsDropdownMenu.Separator';
+DsDropdownMenuLegacy.displayName = 'DsDropdownMenuLegacy';

package/src/components/ds-dropdown-menu/ds-dropdown-menu.types.ts

@@ -5,6 +5,9 @@ import type { IconType } from '../ds-icon';
 export const dropdownMenuItemVariants = ['default', 'error'] as const;
 export type DropdownMenuItemVariant = (typeof dropdownMenuItemVariants)[number];
 
+export const dropdownMenuActionsAlignments = ['end', 'stretch'] as const;
+export type DropdownMenuActionsAlign = (typeof dropdownMenuActionsAlignments)[number];
+
 /**
  * Base positioning type
  */
@@ -242,9 +245,15 @@ export interface DsDropdownMenuHeaderProps {
  */
 export interface DsDropdownMenuActionsProps {
 	/**
-	 * The action buttons or elements
+	 * The action buttons or full-width elements pinned to the bottom of the menu.
 	 */
 	children: ReactNode;
+	/**
+	 * How children are laid out. `end` is a right-aligned button row (e.g.
+	 * Cancel/Apply); `stretch` stacks full-width children (e.g. a logout item).
+	 * @default 'end'
+	 */
+	align?: DropdownMenuActionsAlign;
 	/**
 	 * Optional CSS class name
 	 */

package/src/components/ds-dropdown-menu/figma/ds-dropdown-menu-footer.figma.ts

@@ -0,0 +1,11 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=35299-7214
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-dropdown-menu
+// component=DsDropdownMenu.Actions
+import figma from 'figma';
+
+export default {
+	example: figma.code`<DsDropdownMenu.Actions>{/* action buttons */}</DsDropdownMenu.Actions>`,
+	imports: ["import { DsDropdownMenu } from '@drivenets/design-system';"],
+	id: 'ds-dropdown-menu-footer',
+	metadata: { nestable: true },
+} satisfies figma.Template;

package/src/components/ds-dropdown-menu/figma/ds-dropdown-menu-group.figma.ts

@@ -0,0 +1,23 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=13761-206276
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-dropdown-menu
+// component=DsDropdownMenu.ItemGroup
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const collapsed = instance.getEnum('Type', { Expanded: false, Collapsed: true });
+
+const labelNode = instance.findText('Menu text', { traverseInstances: true });
+const label = labelNode.type === 'TEXT' ? labelNode.textContent : 'Group name';
+
+const collapsedAttr = collapsed ? ' collapsed' : '';
+
+export default {
+	example: figma.code`<DsDropdownMenu.ItemGroup${collapsedAttr}>
+	<DsDropdownMenu.ItemGroupLabel>${label}</DsDropdownMenu.ItemGroupLabel>
+	<DsDropdownMenu.ItemGroupContent>{/* group items */}</DsDropdownMenu.ItemGroupContent>
+</DsDropdownMenu.ItemGroup>`,
+	imports: ["import { DsDropdownMenu } from '@drivenets/design-system';"],
+	id: 'ds-dropdown-menu-group',
+	metadata: { nestable: true },
+} satisfies figma.Template;

package/src/components/ds-dropdown-menu/figma/ds-dropdown-menu-item.figma.ts

@@ -0,0 +1,29 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=35298-162404
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-dropdown-menu
+// component=DsDropdownMenu.Item
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const type = instance.getEnum('type', {
+	default: 'default',
+	checkbox: 'checkbox',
+	radio: 'radio',
+	error: 'error',
+});
+
+const selected = instance.getEnum('selected', { true: true, false: false });
+
+const labelNode = instance.findText('Menu text', { traverseInstances: true });
+const label = labelNode.type === 'TEXT' ? labelNode.textContent : 'Menu item';
+
+const variantAttr = type === 'error' ? ' variant="error"' : '';
+const selectedAttr = selected ? ' selected' : '';
+const indicator = type === 'checkbox' || type === 'radio' ? '<DsDropdownMenu.ItemIndicator />' : '';
+
+export default {
+	example: figma.code`<DsDropdownMenu.Item value="item"${variantAttr}${selectedAttr}>${label}${indicator}</DsDropdownMenu.Item>`,
+	imports: ["import { DsDropdownMenu } from '@drivenets/design-system';"],
+	id: 'ds-dropdown-menu-item',
+	metadata: { nestable: true },
+} satisfies figma.Template;

package/src/components/ds-dropdown-menu/figma/ds-dropdown-menu-separator.figma.ts

@@ -0,0 +1,11 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=13683-206080
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-dropdown-menu
+// component=DsDropdownMenu.Separator
+import figma from 'figma';
+
+export default {
+	example: figma.code`<DsDropdownMenu.Separator />`,
+	imports: ["import { DsDropdownMenu } from '@drivenets/design-system';"],
+	id: 'ds-dropdown-menu-separator',
+	metadata: { nestable: true },
+} satisfies figma.Template;