@heliosgraphics/ui 2.0.0-alpha.62

package/components/Progress/Progress.tsx

@@ -0,0 +1,14 @@
+import styles from "./Progress.module.css"
+import { getClasses } from "@heliosgraphics/utils"
+import { getColorClasses } from "../../utils/colors"
+import type { FC } from "react"
+import type { ProgressProps } from "./Progress.types"
+
+export const Progress: FC<ProgressProps> = ({ color = "blue", isSmall, max = 100, value = 0 }) => {
+	const progressColorClasses: Array<string> = getColorClasses(color, "dark")
+	const progressClasses: string = getClasses(styles.progress, ...progressColorClasses, {
+		[styles.progressSmall]: isSmall,
+	})
+
+	return <progress className={progressClasses} max={max} value={value} />
+}

package/components/Progress/Progress.types.ts

@@ -0,0 +1,8 @@
+import type { HeliosColorType } from "../.."
+
+export interface ProgressProps {
+	isSmall?: boolean
+	color: HeliosColorType
+	max: number
+	value: number
+}

package/components/Progress/index.ts

@@ -0,0 +1 @@
+export { Progress } from "./Progress"

package/components/Radio/Radio.meta.ts

@@ -0,0 +1,21 @@
+import type { HeliosAttributeMeta } from "../.."
+import type { BaseRadioProps } from "./Radio.types"
+
+export const meta: HeliosAttributeMeta<BaseRadioProps> = {
+	_patterns: [
+		{
+			id: "ui-radio-default",
+			description: "default",
+			content: `<Radio label={RADIO_LABEL} isSmall={IS_SMALL} color={COLOR} onChange={ON_RADIO_CHANGE} value="radio-01" isDisabled={IS_DISABLED} isChecked={IS_CHECKED} name="radio-group"/>`,
+		},
+	],
+	_status: "stable",
+	_category: "core",
+	_extends: ["BaseCheckboxProps"],
+	name: {
+		type: "string",
+	},
+	value: {
+		type: "string",
+	},
+}

package/components/Radio/Radio.module.css

@@ -0,0 +1,101 @@
+.radio {
+	--radio-size: 24px;
+	--radio-margin: 3px;
+
+	position: relative;
+
+	-webkit-tap-highlight-color: transparent;
+}
+
+.radioSmall {
+	--radio-size: 18px;
+	--radio-margin: 2px;
+}
+
+.radioDisabled {
+	pointer-events: none;
+	cursor: not-allowed;
+}
+
+.radioDisabled .radio__radioLabel {
+	color: var(--text-disabled);
+}
+
+.radioDisabled .radio__radioMark {
+	border-color: var(--ui-border-secondary);
+}
+
+.radio input {
+	position: absolute;
+	top: 0;
+	left: 0;
+
+	appearance: none;
+	display: flex;
+	overflow: hidden;
+	height: var(--radio-size);
+	width: var(--radio-size);
+
+	background-color: var(--bg);
+	border-radius: var(--radio-size);
+	outline-color: var(--border-focus);
+
+	cursor: pointer;
+}
+
+.radio input:active ~ .radio__radioMark:after {
+	transform: scale(1.1);
+}
+
+.radio input:checked ~ .radio__radioMark:after {
+	opacity: 1;
+}
+
+.radio__radioLabel {
+	position: relative;
+
+	max-width: max-content;
+
+	color: var(--border-selected);
+
+	cursor: pointer;
+	user-select: none;
+}
+
+.radio__mark {
+	position: relative;
+
+	height: var(--radio-size);
+	min-width: var(--radio-size);
+	width: var(--radio-size);
+}
+
+.radio__radioMark {
+	height: 100%;
+	overflow: hidden;
+	width: 100%;
+
+	background: var(--ui-bg-primary);
+	border-radius: var(--radio-size);
+	border: 1px solid var(--border-selected);
+
+	pointer-events: none;
+}
+
+.radio__radioMark:after {
+	left: calc(var(--radio-margin) + 1px);
+	top: calc(var(--radio-margin) + 1px);
+	position: absolute;
+
+	box-sizing: inherit;
+	height: calc(var(--radio-size) - 2 * var(--radio-margin) - 2px);
+	width: calc(var(--radio-size) - 2 * var(--radio-margin) - 2px);
+
+	background-color: var(--ui-bg-primary);
+	border-radius: 100%;
+	opacity: 0;
+	transition: all var(--speed-sm) var(--ease-in-out-sine);
+	content: " ";
+
+	pointer-events: none;
+}

package/components/Radio/Radio.tsx

@@ -0,0 +1,67 @@
+"use client"
+
+import { useId } from "react"
+import { getClasses } from "@heliosgraphics/utils/classnames"
+import { getColorClasses } from "../../utils/colors"
+import { Flex, Text } from "../.."
+import styles from "./Radio.module.css"
+import type { FC } from "react"
+import type { RadioProps } from "./Radio.types"
+
+export const Radio: FC<RadioProps> = ({
+	color = "gray",
+	isChecked,
+	isVertical,
+	isLabelHidden = false,
+	isSmall,
+	description,
+	isDisabled,
+	onChange,
+	label,
+	name,
+	value,
+}) => {
+	const radioId: string = useId()
+
+	const colorClasses = getColorClasses(color, "dark")
+	const radioClasses = getClasses(styles.radio, ...colorClasses, {
+		[styles.radioDisabled]: isDisabled,
+		[styles.radioSmall]: isSmall,
+	})
+
+	const radioLabelClasses = getClasses(styles.radio__radioLabel, "flex gap-4", {
+		"flex-x-center flex-column": isVertical,
+		"flex-y-center": !isVertical,
+	})
+
+	return (
+		<div className={radioClasses}>
+			<label className={radioLabelClasses} htmlFor={radioId}>
+				<span className={styles.radio__mark}>
+					<input
+						type="radio"
+						checked={isChecked}
+						onChange={onChange}
+						disabled={isDisabled}
+						id={radioId}
+						name={name}
+						value={value}
+					/>
+					<div className={styles.radio__radioMark} />
+				</span>
+				{!isLabelHidden && (
+					<Flex isColumn={true}>
+						<Text type={isSmall ? "tiny" : "small"} fontWeight="medium" emphasis={isDisabled ? "tertiary" : "inherit"}>
+							{label}
+						</Text>
+						{description && (
+							<Text type="tiny" emphasis="secondary">
+								{description}
+							</Text>
+						)}
+					</Flex>
+				)}
+			</label>
+		</div>
+	)
+}

package/components/Radio/Radio.types.ts

@@ -0,0 +1,8 @@
+import type { BaseCheckboxProps } from "../Checkbox/Checkbox.types"
+
+export interface BaseRadioProps {
+	name: string
+	value: string
+}
+
+export type RadioProps = BaseRadioProps & BaseCheckboxProps

package/components/Radio/index.ts

@@ -0,0 +1 @@
+export { Radio } from "./Radio"

package/components/Segments/Segments.meta.ts

@@ -0,0 +1,23 @@
+import type { HeliosAttributeMeta } from "../.."
+import type { SegmentsBaseProps } from "./Segments.types"
+
+export const meta: HeliosAttributeMeta<SegmentsBaseProps> = {
+	_extends: ["PropsWithChildren"],
+	_patterns: [
+		{
+			id: "ui-segments-default",
+			content: `<Segments isSmall={IS_SMALL} isFullWidth={false}><Segments.Button value="First" icon={ICON} isActive={true}/><Segments.Button value="Second"/></Segments>`,
+			description: "default",
+		},
+	],
+	_status: "stable",
+	_category: "core",
+	isFullWidth: {
+		type: "boolean",
+		isOptional: true,
+	},
+	isSmall: {
+		type: "boolean",
+		isOptional: true,
+	},
+}

package/components/Segments/Segments.module.css

@@ -0,0 +1,46 @@
+.segmentedControl {
+	position: relative;
+
+	display: flex;
+	height: 40px;
+	width: max-content;
+
+	background-color: var(--ui-bg-tertiary);
+	border: 1px solid var(--ui-border-secondary);
+	border-radius: var(--radius-md);
+
+	font-size: var(--font-size-small);
+}
+
+.segmentedControlSmall {
+	height: 30px;
+
+	font-size: var(--font-size-tiny);
+
+	border-radius: var(--radius-sm);
+}
+
+.segmentedControlFull {
+	width: 100%;
+}
+
+.segmentedControlFull button[data-ui-component="SegmentButton"] {
+	flex: 1;
+	justify-content: center;
+	width: 100%;
+}
+
+.segments__slider {
+	position: absolute;
+	z-index: 1;
+
+	height: 100%;
+	opacity: 0;
+
+	background-color: var(--ui-bg-primary);
+	border-radius: inherit;
+	box-shadow: var(--ui-elevation-sm);
+	transition:
+		transform var(--speed-md) var(--ease-in-out-sine),
+		width var(--speed-md) var(--ease-in-out-sine);
+}

package/components/Segments/Segments.tsx

@@ -0,0 +1,92 @@
+"use client"
+
+import {
+	type FC,
+	type Ref,
+	useState,
+	useRef,
+	useEffect,
+	Children,
+	isValidElement,
+	cloneElement,
+	type ReactElement,
+} from "react"
+import { Flex } from "../.."
+import styles from "./Segments.module.css"
+import { getClasses } from "@heliosgraphics/utils"
+import { SegmentButton } from "./components/SegmentButton"
+import type { SegmentsProps } from "./Segments.types"
+import type { SegmentButtonProps } from "./components/SegmentButton/SegmentButton.types"
+
+type SegmentButtonWithRef = SegmentButtonProps & {
+	ref?: Ref<HTMLButtonElement>
+}
+
+export const Segments: FC<SegmentsProps> = ({ children, isFullWidth, isSmall }) => {
+	const validChildren: ReactElement<SegmentButtonProps>[] = Children.toArray(children).filter(
+		(child): child is ReactElement<SegmentButtonProps> => isValidElement(child) && child.type === SegmentButton,
+	)
+
+	const firstValue: string = validChildren.length > 0 ? validChildren[0]?.props?.value || "" : ""
+	const defaultValue: string = ""
+
+	const [activeValue, setActiveValue] = useState<string>(defaultValue || firstValue)
+	const buttonRefs = useRef<(HTMLButtonElement | null)[]>([])
+	const containerRef = useRef<HTMLDivElement>(null)
+	const sliderRef = useRef<HTMLDivElement>(null)
+
+	const updateSliderPosition = (): void => {
+		if (!containerRef.current || !sliderRef.current || !activeValue) return
+
+		const activeIndex: number = validChildren.findIndex((child) => child.props.value === activeValue)
+		const activeButton: HTMLButtonElement | null | undefined = buttonRefs.current[activeIndex]
+
+		if (!activeButton) return
+
+		const containerRect: DOMRect = containerRef.current.getBoundingClientRect()
+		const buttonRect: DOMRect = activeButton.getBoundingClientRect()
+
+		const left: number = buttonRect.left - containerRect.left - 1
+		const width: number = buttonRect.width
+
+		sliderRef.current.style.transform = `translateX(${left}px)`
+		sliderRef.current.style.width = `${width}px`
+		sliderRef.current.style.opacity = "1"
+	}
+
+	useEffect(() => {
+		const timer: ReturnType<typeof setTimeout> = setTimeout(updateSliderPosition, 0)
+		const handleResize = (): void => updateSliderPosition()
+
+		globalThis.addEventListener("resize", handleResize)
+
+		return (): void => {
+			globalThis.clearTimeout(timer)
+			globalThis.removeEventListener("resize", handleResize)
+		}
+	}, [activeValue])
+
+	const segmentedControlClasses: string = getClasses(styles.segmentedControl, {
+		[styles.segmentedControlSmall]: isSmall,
+		[styles.segmentedControlFull]: isFullWidth,
+	})
+
+	return (
+		<Flex className={segmentedControlClasses} isYCentered={true} gap={2} isInline={!isFullWidth} ref={containerRef}>
+			{validChildren.map((child: ReactElement<SegmentButtonProps>, index: number) =>
+				cloneElement<SegmentButtonWithRef>(child, {
+					key: child.props.value,
+					isActive: child.props.value === activeValue,
+					onClick: () => {
+						setActiveValue(child.props.value)
+						child.props.onClick?.()
+					},
+					ref: (el: HTMLButtonElement | null) => {
+						buttonRefs.current[index] = el
+					},
+				}),
+			)}
+			<div ref={sliderRef} className={styles.segments__slider} />
+		</Flex>
+	)
+}

package/components/Segments/Segments.types.ts

@@ -0,0 +1,14 @@
+import type { SegmentButtonProps } from "./components/SegmentButton/SegmentButton.types"
+import type { FC, PropsWithChildren, ReactElement } from "react"
+
+export interface SegmentsBaseProps {
+	isFullWidth?: boolean
+	isSmall?: boolean
+}
+
+export type SegmentsProps = PropsWithChildren<SegmentsBaseProps>
+
+export interface SegmentsComposition {
+	(props: SegmentsProps): ReactElement
+	Button: FC<SegmentButtonProps>
+}

package/components/Segments/components/SegmentButton/SegmentButton.meta.ts

@@ -0,0 +1,32 @@
+import type { HeliosAttributeMeta } from "../../../.."
+import type { SegmentButtonProps } from "./SegmentButton.types"
+
+export const meta: HeliosAttributeMeta<SegmentButtonProps> = {
+	_extends: [],
+	_patterns: [],
+	_status: "internal",
+	_category: "content",
+	icon: {
+		type: "HeliosIconType",
+		isOptional: true,
+	},
+	iconLeft: {
+		type: "HeliosIconType",
+		isOptional: true,
+	},
+	iconRight: {
+		type: "HeliosIconType",
+		isOptional: true,
+	},
+	isActive: {
+		type: "boolean",
+		isOptional: true,
+	},
+	onClick: {
+		type: "() => void",
+		isOptional: true,
+	},
+	value: {
+		type: "string",
+	},
+}

package/components/Segments/components/SegmentButton/SegmentButton.module.css

@@ -0,0 +1,34 @@
+.segmentButton {
+	position: relative;
+	z-index: 2;
+
+	align-items: center;
+	display: flex;
+	gap: 4px;
+	height: 100%;
+	padding: 0 10px;
+
+	background-color: transparent;
+	border: none;
+	border-radius: inherit;
+	color: var(--ui-bg-secondary);
+	outline: none;
+	transition: color var(--speed-lg) var(--ease-in-out-sine);
+
+	color: var(--ui-text-secondary);
+	cursor: pointer;
+	font-family: var(--font-family-sans);
+	font-size: inherit;
+	font-weight: var(--font-weight-semi-bold);
+	text-align: center;
+	user-select: none;
+}
+
+.segmentButton:focus-visible {
+	outline: 2px solid var(--ui-border-active-orange);
+	outline-offset: 2px;
+}
+
+.segmentButtonActive {
+	color: var(--ui-text-primary);
+}

package/components/Segments/components/SegmentButton/SegmentButton.tsx

@@ -0,0 +1,24 @@
+import styles from "./SegmentButton.module.css"
+import { forwardRef } from "react"
+import { getClasses } from "@heliosgraphics/utils"
+import { Icon } from "../../../.."
+import type { HeliosIconType } from "../../../.."
+import type { SegmentButtonProps } from "./SegmentButton.types"
+
+export const SegmentButton = forwardRef<HTMLButtonElement, SegmentButtonProps>(
+	({ isActive, value, icon, iconLeft, iconRight, onClick }, ref) => {
+		const segmentButtonClasses: string = getClasses(styles.segmentButton, {
+			[styles.segmentButtonActive]: isActive,
+		})
+
+		const iconL: HeliosIconType | undefined = iconLeft || icon
+
+		return (
+			<button ref={ref} className={segmentButtonClasses} onClick={onClick} data-ui-component="SegmentButton">
+				{iconL && <Icon icon={iconL} size={16} />}
+				{value}
+				{iconRight && <Icon icon={iconRight} size={16} />}
+			</button>
+		)
+	},
+)

package/components/Segments/components/SegmentButton/SegmentButton.types.ts

@@ -0,0 +1,10 @@
+import type { HeliosIconType } from "../../../.."
+
+export interface SegmentButtonProps {
+	icon?: HeliosIconType
+	iconLeft?: HeliosIconType
+	iconRight?: HeliosIconType
+	isActive?: boolean
+	onClick?: () => void
+	value: string
+}

package/components/Segments/components/SegmentButton/index.ts

@@ -0,0 +1 @@
+export { SegmentButton } from "./SegmentButton"

package/components/Segments/index.ts

@@ -0,0 +1,9 @@
+import type { SegmentsComposition } from "./Segments.types"
+import { SegmentButton } from "./components/SegmentButton/SegmentButton"
+import { Segments as SC } from "./Segments"
+
+const SegmentedComponent = SC as SegmentsComposition
+
+SegmentedComponent.Button = SegmentButton
+
+export { SegmentedComponent as Segments }

package/components/Select/Select.meta.ts

@@ -0,0 +1,39 @@
+import type { HeliosAttributeMeta } from "../.."
+import type { SelectProps } from "./Select.types"
+
+export const meta: HeliosAttributeMeta<SelectProps> = {
+	_patterns: [
+		{
+			id: "ui-select-default",
+			description: "default",
+			content: `<Select label="Select Item" items={SELECT_ITEMS} onChange={ON_SELECT_ITEM}/>`,
+		},
+	],
+	_status: "stable",
+	_category: "core",
+	isDisabled: {
+		type: "boolean",
+		isOptional: true,
+	},
+	isLabelHidden: {
+		type: "boolean",
+		isOptional: true,
+	},
+	isSmall: {
+		type: "boolean",
+		isOptional: true,
+	},
+	items: {
+		type: "string",
+	},
+	label: {
+		type: "string",
+	},
+	onChange: {
+		type: "ChangeEventHandler<HTMLSelectElement>",
+	},
+	selectedValue: {
+		type: "string",
+		isOptional: true,
+	},
+}

package/components/Select/Select.module.css

@@ -0,0 +1,76 @@
+.select {
+	position: relative;
+
+	max-width: max-content;
+	width: 100%;
+}
+
+.select select {
+	padding-right: 64px;
+
+	background-color: var(--ui-bg-secondary);
+}
+
+.selectDisabled select {
+	background-color: var(--ui-bg-action);
+	color: var(--ui-text-secondary);
+
+	pointer-events: none;
+}
+
+.select select:active:not(:disabled),
+.select select:focus-visible:not(:disabled) {
+	box-shadow: 0 0 0 4px var(--ui-border-secondary);
+	border-color: var(--ui-border-primary);
+}
+
+.select__select {
+	height: 42px;
+	margin: 0;
+	padding: 0 10px;
+	width: 100%;
+
+	appearance: none;
+	background-color: transparent;
+	border: none;
+	outline: none;
+	border: 1px solid var(--ui-border-secondary);
+	border-radius: var(--radius-md);
+	transition: all var(--speed-sm) var(--ease-in-out-sine);
+
+	font-family: var(--font-family-mono);
+	font-size: var(--font-size-small);
+	cursor: inherit;
+	line-height: 42px;
+}
+
+.select__icon {
+	position: absolute;
+	top: 29px;
+	right: 0;
+
+	padding-top: 2px;
+	height: 40px;
+	width: 42px;
+
+	color: var(--ui-text-secondary);
+
+	border-left: 1px solid var(--ui-border-secondary);
+	pointer-events: none;
+}
+
+.selectHiddenLabel .select__icon {
+	top: 1px;
+}
+
+.selectSmall .select__select {
+	height: 30px;
+
+	line-height: 30px;
+}
+
+.selectSmall .select__icon {
+	/* padding-top: 2px; */
+	height: 28px;
+	width: 32px;
+}

package/components/Select/Select.tsx

@@ -0,0 +1,46 @@
+"use client"
+
+import { Flex, Icon } from "../.."
+import { getClasses } from "@heliosgraphics/utils/classnames"
+import { useId, type FC } from "react"
+import { InputLabel } from "../shared/InputLabel"
+import styles from "./Select.module.css"
+import type { SelectProps } from "./Select.types"
+
+export const Select: FC<SelectProps> = ({
+	selectedValue,
+	onChange,
+	isLabelHidden,
+	isSmall,
+	isDisabled,
+	items,
+	label,
+}) => {
+	const htmlFor: string = useId()
+
+	const selectClasses: string = getClasses(styles.select, {
+		[styles.selectDisabled]: isDisabled,
+		[styles.selectSmall]: isSmall,
+		[styles.selectHiddenLabel]: !label || isLabelHidden,
+	})
+
+	return (
+		<Flex isColumn={true} className={selectClasses}>
+			<InputLabel label={label} id={htmlFor} isHidden={!!isLabelHidden} isDisabled={!!isDisabled} />
+			<Flex>
+				<select className={styles.select__select} onChange={onChange} id={htmlFor} value={selectedValue}>
+					{items?.map((item, key) => {
+						return (
+							<option key={key} value={item.value} disabled={item.isDisabled}>
+								{item.name}
+							</option>
+						)
+					})}
+				</select>
+				<Flex className={styles.select__icon} isCentered={true}>
+					<Icon icon="chevron-down" size={20} />
+				</Flex>
+			</Flex>
+		</Flex>
+	)
+}