@drivenets/design-system 0.0.1

package/src/components/ds-password-input/ds-password-input.types.tsx

@@ -0,0 +1,62 @@
+import type React from 'react';
+
+export interface DsPasswordInputProps {
+	/**
+	 * Unique identifier for the input field
+	 */
+	id?: string;
+	/**
+	 * The ref to the input field
+	 */
+	ref?: React.Ref<HTMLInputElement>;
+	/**
+	 * The name of the input field
+	 */
+	name?: string;
+	/**
+	 * The size of the input field
+	 * @default default
+	 */
+	size?: 'small' | 'default';
+	/**
+	 * Event handler called when the input field loses focus
+	 *
+	 * @param event
+	 */
+	onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+	/**
+	 * Callback when the value changes (native input onChange event)
+	 * This is provided for compatibility but onValueChange is preferred
+	 */
+	onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+	/**
+	 * Value change event handler (provides just the string value)
+	 * This is the preferred way to handle value changes
+	 */
+	onValueChange?: (value: string) => void;
+	/**
+	 * Additional CSS class names
+	 */
+	className?: string;
+	/**
+	 * Additional styles to apply to the component
+	 */
+	style?: React.CSSProperties;
+	/**
+	 * The placeholder text
+	 */
+	placeholder?: string;
+	/**
+	 * The current value (for controlled usage)
+	 */
+	value?: string;
+	/**
+	 * The initial value of the input when rendered.
+	 * Use when you don't need to control the value of the input.
+	 */
+	defaultValue?: string;
+	/**
+	 * Whether the password input is disabled
+	 */
+	disabled?: boolean;
+}

package/src/components/ds-password-input/index.tsx

@@ -0,0 +1,2 @@
+export { default as DsPasswordInput } from './ds-password-input';
+export * from './ds-password-input.types';

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

@@ -0,0 +1,23 @@
+@use '../../styles/typography';
+
+.content {
+	width: max-content;
+	// approx. 2 columns (64 * 2)
+	min-width: 128px;
+	// approx. 6 columns (64 * 6)
+	max-width: 384px;
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+	box-shadow: 0 1.25px 4px 0 rgba(0, 0, 0, 0.25);
+	border-radius: 2px;
+	background: var(--white);
+	padding: 12px;
+}
+
+.arrow {
+	fill: var(--white);
+	filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.1));
+	width: 18px;
+	height: 10px;
+}

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

@@ -0,0 +1,33 @@
+import type React from 'react';
+import * as Popover from '@radix-ui/react-popover';
+import classNames from 'classnames';
+import styles from './ds-popover.module.scss';
+import type { DsPopoverProps } from './ds-popover.types';
+
+const DsPopover: React.FC<DsPopoverProps> = ({
+	trigger,
+	children,
+	className,
+	align = 'center',
+	side = 'top',
+}) => {
+	return (
+		<Popover.Root>
+			<Popover.Trigger asChild>{trigger}</Popover.Trigger>
+			<Popover.Portal>
+				<Popover.Content
+					side={side}
+					align={align}
+					sideOffset={8}
+					collisionPadding={16}
+					className={classNames(styles.content, className)}
+				>
+					{children}
+					<Popover.Arrow className={styles.arrow} />
+				</Popover.Content>
+			</Popover.Portal>
+		</Popover.Root>
+	);
+};
+
+export default DsPopover;

package/src/components/ds-popover/ds-popover.types.tsx

@@ -0,0 +1,24 @@
+import type React from 'react';
+
+export interface DsPopoverProps {
+	/**
+	 * The element that triggers the popover
+	 */
+	trigger: React.ReactNode;
+	/**
+	 * The content to be rendered inside the popover
+	 */
+	children: React.ReactNode;
+	/**
+	 * Additional CSS class names
+	 */
+	className?: string;
+	/**
+	 * The alignment of the popover content
+	 */
+	align?: 'start' | 'center' | 'end';
+	/**
+	 * The position of the popover relative to the trigger element
+	 */
+	side?: 'top' | 'right' | 'bottom' | 'left';
+}

package/src/components/ds-popover/index.tsx

@@ -0,0 +1,2 @@
+export { default as DsPopover } from './ds-popover';
+export * from './ds-popover.types';

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

@@ -0,0 +1,138 @@
+@use '../../styles/typography';
+
+.radioGroupRoot {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+}
+
+.radioItemContainer {
+	position: relative;
+	display: flex;
+	align-items: center;
+	gap: 4px;
+	cursor: pointer;
+	padding-right: 1px;
+	border: 1px solid transparent;
+	border-radius: 4px;
+
+	&:has([data-disabled]) {
+		cursor: not-allowed;
+
+		.labelInfo {
+			color: var(--color-secondary-500-net-4);
+		}
+	}
+
+	&:has([data-state='checked']:focus-visible) {
+		border-radius: 4px;
+		border-color: var(--color-primary-700-net-1);
+	}
+
+	&:has([data-state='unchecked']:focus-visible) {
+		border-color: var(--color-primary-800);
+	}
+
+	&:has(.labelInfo) {
+		margin-bottom: 4px;
+	}
+}
+
+.radioItem {
+	all: unset;
+	position: relative;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border: 2px solid transparent;
+	border-radius: 50%;
+	transition:
+		background-color 0.2s ease-in-out,
+		border-color 0.2s ease-in-out;
+
+	.radioItemWrapper {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 16px;
+		width: 16px;
+		border: 2px solid var(--color-secondary-500-net-4);
+		padding: 2px;
+		border-radius: 50%;
+		background: none;
+	}
+
+	&[data-state='checked'],
+	[data-state='checked'] > & {
+		.radioItemWrapper {
+			border-color: var(--color-primary-700-default);
+		}
+
+		&:hover {
+			border-color: var(--color-primary-100);
+		}
+	}
+
+	&[data-state='checked'][data-disabled],
+	[data-state='checked'][data-disabled] > & {
+		.radioIndicator {
+			background: var(--color-secondary-300);
+		}
+	}
+
+	&[data-state='unchecked'],
+	[data-state='unchecked'] > & {
+		&:hover {
+			border-color: var(--color-secondary-100);
+			background-color: var(--color-secondary-100);
+		}
+	}
+
+	&[data-disabled],
+	[data-disabled] > & {
+		pointer-events: none;
+
+		& + label {
+			pointer-events: none;
+		}
+
+		.radioItemWrapper {
+			border-color: var(--color-secondary-300);
+		}
+	}
+}
+
+.radioIndicator {
+	width: 8px;
+	height: 8px;
+	background: var(--color-primary-700-default);
+	border-radius: 50%;
+
+	&[data-part='indicator'] {
+		opacity: 0;
+		transform: scale(0);
+		transition:
+			opacity 0.15s ease-in-out,
+			transform 0.15s ease-in-out;
+
+		[data-state='checked'] & {
+			opacity: 1;
+			transform: scale(1);
+		}
+	}
+}
+
+.radioLabel {
+	@include typography.body-sm-reg;
+	color: var(--color-secondary-800);
+	cursor: pointer;
+}
+
+.labelInfo {
+	@include typography.body-xs-reg;
+	@include typography.ellipsis;
+	position: absolute;
+	color: var(--color-secondary-600-net-2);
+	cursor: pointer;
+	width: 100%;
+}

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

@@ -0,0 +1,115 @@
+import type React from 'react';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import { RadioGroup } from '@ark-ui/react/radio-group';
+import classNames from 'classnames';
+import styles from './ds-radio-group.module.scss';
+import type {
+	DsRadioGroupItemProps,
+	DsRadioGroupLegacyProps,
+	DsRadioGroupRootProps,
+} from './ds-radio-group.types';
+
+/**
+ * Root component - provides radio group context
+ */
+const Root: React.FC<DsRadioGroupRootProps> = ({ className, children, onValueChange, ...props }) => (
+	<RadioGroup.Root
+		className={classNames(styles.radioGroupRoot, className)}
+		onValueChange={(details) => onValueChange?.(details.value)}
+		{...props}
+	>
+		{children}
+	</RadioGroup.Root>
+);
+
+/**
+ * Item component - renders a single radio button with optional label
+ */
+const Item: React.FC<DsRadioGroupItemProps> = ({
+	value,
+	label,
+	labelInfo,
+	className,
+	style,
+	children,
+	...props
+}) => {
+	return (
+		<RadioGroup.Item
+			value={value}
+			className={classNames(styles.radioItemContainer, className)}
+			style={style}
+			{...props}
+		>
+			<RadioGroup.ItemControl className={styles.radioItem}>
+				<div className={styles.radioItemWrapper}>
+					<div className={styles.radioIndicator} data-part="indicator" />
+				</div>
+			</RadioGroup.ItemControl>
+			<RadioGroup.ItemHiddenInput />
+			{label ? (
+				<RadioGroup.ItemText className={styles.radioLabel}>
+					{label}
+					{labelInfo && <div className={styles.labelInfo}>{labelInfo}</div>}
+				</RadioGroup.ItemText>
+			) : (
+				children
+			)}
+		</RadioGroup.Item>
+	);
+};
+
+/**
+ * DEPRECATED: Legacy DsRadioGroup component with options array
+ * Use compound component pattern instead: DsRadioGroup.Root + DsRadioGroup.Item
+ * @deprecated
+ */
+export const DsRadioGroupLegacy: React.FC<DsRadioGroupLegacyProps> = ({
+	options,
+	value,
+	defaultValue,
+	onValueChange,
+	className,
+	...props
+}) => (
+	<RadioGroupPrimitive.Root
+		className={classNames(styles.radioGroupRoot, className)}
+		value={value}
+		defaultValue={defaultValue}
+		onValueChange={onValueChange}
+		{...props}
+	>
+		{options.map((option) => (
+			<div key={option.value} className={styles.radioItemContainer}>
+				<RadioGroupPrimitive.Item
+					className={styles.radioItem}
+					value={option.value}
+					disabled={option.disabled}
+					id={option.value}
+				>
+					<div className={styles.radioItemWrapper}>
+						<RadioGroupPrimitive.Indicator className={styles.radioIndicator} />
+					</div>
+				</RadioGroupPrimitive.Item>
+				<label className={styles.radioLabel} htmlFor={option.value}>
+					{option.label}
+					{option.labelInfo && <div className={styles.labelInfo}>{option.labelInfo}</div>}
+				</label>
+			</div>
+		))}
+	</RadioGroupPrimitive.Root>
+);
+
+/**
+ * Design system RadioGroup component
+ *
+ * @example
+ * <DsRadioGroup.Root value={value} onValueChange={setValue}>
+ *   <DsRadioGroup.Item value="option1" label="Option 1" />
+ *   <DsRadioGroup.Item value="option2" label="Option 2" />
+ * </DsRadioGroup.Root>
+ */
+export const DsRadioGroup = {
+	Root,
+	Item,
+};

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

@@ -0,0 +1,93 @@
+import type React from 'react';
+import type * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import { type RadioGroupItemProps, type RadioGroupRootProps } from '@ark-ui/react/radio-group';
+
+/**
+ * Props for the DsRadioGroup Root component
+ */
+export 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
+ */
+export 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
+ */
+export 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
+ */
+export 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;
+}

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

@@ -0,0 +1,2 @@
+export { DsRadioGroup, DsRadioGroupLegacy } from './ds-radio-group';
+export * from './ds-radio-group.types';

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

@@ -0,0 +1,66 @@
+@use '../../styles/typography';
+@use '../../styles/shared/dropdown';
+@use '../../styles/shared/input';
+
+.control {
+	@include input.selectControl;
+}
+
+.trigger {
+	@include input.selectTrigger;
+}
+
+.content {
+	@include dropdown.dropdown-content;
+}
+
+.searchInput {
+	@include input.searchInput;
+}
+
+.viewport {
+	@include dropdown.dropdown-viewport;
+	max-height: 256px;
+
+	& > .content {
+		overflow-y: auto;
+		overflow-x: hidden;
+		scrollbar-width: thin;
+	}
+}
+
+.item {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	color: var(--color-font-secondary);
+	padding: var(--spacing-xs);
+	border-radius: 2px;
+	cursor: pointer;
+	outline: none;
+
+	&[data-highlighted],
+	&:hover {
+		background: var(--color-background-selected-weak);
+
+		.itemIcon {
+			color: var(--color-background-selected);
+		}
+	}
+}
+
+.valueText {
+	@include typography.ellipsis;
+	grid-column: 1;
+	grid-row: 1;
+	color: var(--color-font-secondary);
+	text-align: start;
+}
+
+.multiSelectItemsContainer {
+	display: flex;
+	flex-wrap: wrap;
+	gap: var(--spacing-3xs);
+	padding: var(--spacing-3xs);
+	border-bottom: 1px solid var(--color-border-secondary);
+}