@drivenets/design-system 0.0.4 → 0.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drivenets/design-system",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "license": "Apache-2.0",
   "type": "module",
   "types": "./dist/index.d.cts",
@@ -97,7 +97,7 @@
     "vite": "^7.3.0",
     "vitest": "^4.0.16",
     "zod": "^3.24.2",
-    "@drivenets/vite-plugin-design-system": "0.0.3"
+    "@drivenets/vite-plugin-design-system": "0.0.4"
   },
   "scripts": {
     "lint": "eslint --max-warnings=0 .",

package/src/components/ds-segment-group/ds-segment-group.module.scss

@@ -0,0 +1,99 @@
+.segmentGroupRoot {
+	display: inline-flex;
+	align-items: center;
+	position: relative;
+	background: var(--color-background-secondary);
+	border: 1px solid var(--color-border-contrast);
+	border-radius: 4px;
+	gap: var(--spacing-2xs);
+	height: 36px;
+	padding: var(--spacing-3xs);
+
+	&.small {
+		height: 28px;
+		padding: var(--spacing-4xs);
+
+		.segmentItem {
+			padding: var(--spacing-4xs) var(--spacing-xs);
+		}
+	}
+}
+
+.segmentItem {
+	position: relative;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: var(--spacing-3xs) var(--spacing-sm);
+	gap: var(--spacing-2xs);
+	flex: 1;
+	z-index: 1;
+	cursor: pointer;
+	border-radius: 4px;
+
+	&[data-state='checked'] {
+		.segmentItemText {
+			color: var(--color-font-main);
+			font-weight: var(--font-weight-medium);
+		}
+	}
+
+	&[data-state='unchecked'] {
+		background: transparent;
+
+		.segmentItemText {
+			color: var(--color-background-action);
+		}
+
+		&:hover:not([data-disabled]) {
+			background: var(--color-background-action-secondary);
+		}
+
+		&:active:not([data-disabled]) {
+			background: var(--color-background);
+			border-color: var(--color-border-contrast);
+		}
+	}
+
+	&[data-disabled] {
+		cursor: not-allowed;
+		background: var(--color-background-secondary);
+
+		.segmentItemText {
+			color: var(--color-font-disabled);
+		}
+	}
+
+	&:focus-visible {
+		outline: 2px solid var(--color-border-action-secondary);
+		outline-offset: 2px;
+	}
+}
+
+[data-scope='segment-group'][data-part='item-control'] {
+	position: absolute;
+	inset: 0;
+	pointer-events: none;
+}
+
+.segmentItemText {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	white-space: nowrap;
+	transition: color 150ms ease-in-out;
+}
+
+.segmentIndicator {
+	position: absolute;
+	background: var(--color-background);
+	border: 1px solid var(--color-border-contrast);
+	border-radius: 4px;
+	box-shadow: 0 1.25px 4px 0 rgba(0, 0, 0, 0.25);
+	z-index: 0;
+	pointer-events: none;
+	width: var(--width);
+	height: var(--height);
+	left: var(--left);
+	top: var(--top);
+}

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

@@ -0,0 +1,76 @@
+import type React from 'react';
+import { SegmentGroup } from '@ark-ui/react/segment-group';
+import classNames from 'classnames';
+import styles from './ds-segment-group.module.scss';
+import DsTypography from '../ds-typography/ds-typography';
+import {
+	type DsSegmentGroupItemProps,
+	type DsSegmentGroupItemTextProps,
+	type DsSegmentGroupRootProps,
+} from './ds-segment-group.types';
+
+/**
+ * Root component - provides segment group context
+ */
+const Root: React.FC<DsSegmentGroupRootProps> = ({
+	className,
+	children,
+	onValueChange,
+	size = 'default',
+	...props
+}) => (
+	<SegmentGroup.Root
+		className={classNames(styles.segmentGroupRoot, size === 'small' && styles.small, className)}
+		onValueChange={(details) => onValueChange?.(details.value)}
+		{...props}
+	>
+		<SegmentGroup.Indicator className={styles.segmentIndicator} />
+		{children}
+	</SegmentGroup.Root>
+);
+
+/**
+ * Item component - renders a single segment button
+ */
+const Item: React.FC<DsSegmentGroupItemProps> = ({ value, label, className, style, children, ...props }) => {
+	return (
+		<SegmentGroup.Item
+			value={value}
+			className={classNames(styles.segmentItem, className)}
+			style={style}
+			{...props}
+		>
+			{label ? <ItemText>{label}</ItemText> : children}
+			<SegmentGroup.ItemControl />
+			<SegmentGroup.ItemHiddenInput />
+		</SegmentGroup.Item>
+	);
+};
+
+/**
+ * ItemText component - renders text content within an item
+ */
+const ItemText: React.FC<DsSegmentGroupItemTextProps> = ({ className, children, ...props }) => (
+	<SegmentGroup.ItemText className={classNames(styles.segmentItemText, className)} {...props} asChild>
+		<DsTypography variant="body-sm-reg">{children}</DsTypography>
+	</SegmentGroup.ItemText>
+);
+
+/**
+ * Design system SegmentGroup component
+ *
+ * @example
+ * <DsSegmentGroup.Root value={value} onValueChange={setValue} size="default">
+ *   <DsSegmentGroup.Indicator />
+ *   <DsSegmentGroup.Item value="option1" label="Option 1" />
+ *   <DsSegmentGroup.Item value="option2">
+ *     <DsIcon icon="settings" />
+ *     <DsSegmentGroup.ItemText>Option 2</DsSegmentGroup.ItemText>
+ *   </DsSegmentGroup.Item>
+ * </DsSegmentGroup.Root>
+ */
+export const DsSegmentGroup = {
+	Root,
+	Item,
+	ItemText,
+};

package/src/components/ds-segment-group/ds-segment-group.types.tsx

@@ -0,0 +1,64 @@
+import { type ReactNode } from 'react';
+import {
+	type SegmentGroupItemProps,
+	type SegmentGroupItemTextProps,
+	type SegmentGroupRootProps,
+} from '@ark-ui/react/segment-group';
+
+/**
+ * Size variants for the segment group
+ */
+export type DsSegmentGroupSize = 'small' | 'default';
+
+/**
+ * Props for the DsSegmentGroup Root component
+ */
+export interface DsSegmentGroupRootProps extends Pick<
+	SegmentGroupRootProps,
+	'value' | 'defaultValue' | 'disabled' | 'name' | 'className' | 'style' | 'children'
+> {
+	/**
+	 * Size variant of the segment group
+	 * @default 'default'
+	 */
+	size?: DsSegmentGroupSize;
+	/**
+	 * Event handler called when the selected value changes
+	 */
+	onValueChange?: (value: string | null) => void;
+}
+
+/**
+ * Props for the DsSegmentGroup Item component
+ */
+export type DsSegmentGroupItemProps = Pick<
+	SegmentGroupItemProps,
+	'id' | 'value' | 'disabled' | 'className' | 'style'
+> &
+	(
+		| {
+				/**
+				 * The segment group item content
+				 */
+				children: ReactNode;
+				/**
+				 * Optional label text for the segment item
+				 */
+				label?: never;
+		  }
+		| {
+				/**
+				 * The segment group item content
+				 */
+				children?: never;
+				/**
+				 * Optional label text for the segment item
+				 */
+				label: string;
+		  }
+	);
+
+/**
+ * Props for the DsSegmentGroup ItemText component
+ */
+export type DsSegmentGroupItemTextProps = Pick<SegmentGroupItemTextProps, 'className' | 'style' | 'children'>;

package/src/components/ds-segment-group/index.tsx

@@ -0,0 +1,2 @@
+export { DsSegmentGroup } from './ds-segment-group';
+export * from './ds-segment-group.types';

package/src/index.ts

@@ -19,6 +19,7 @@ export * from './components/ds-panel';
 export * from './components/ds-password-input';
 export * from './components/ds-popover';
 export * from './components/ds-radio-group';
+export * from './components/ds-segment-group';
 export * from './components/ds-select';
 export * from './components/ds-smart-tabs';
 export * from './components/ds-spinner';