@heliosgraphics/ui 2.0.0-alpha.95 → 2.0.0-alpha.97

package/components/Segments/Segments.tsx

@@ -1,41 +1,22 @@
 "use client"
 
-import {
-	type FC,
-	useState,
-	useRef,
-	useEffect,
-	useCallback,
-	Children,
-	isValidElement,
-	cloneElement,
-	type ReactElement,
-} from "react"
+import { type FC, useState, useRef, useEffect, useCallback } from "react"
 import { Flex } from "../Flex"
 import styles from "./Segments.module.css"
 import { getClasses } from "@heliosgraphics/utils"
-import { SegmentButton } from "./components/SegmentButton"
+import { SegmentsContext } from "./Segments.context"
 import type { SegmentsProps } from "./Segments.types"
-import type { SegmentButtonProps } from "./components/SegmentButton/SegmentButton.types"
 
-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)[]>([])
+export const Segments: FC<SegmentsProps> = ({ children, isFullWidth, isSmall, defaultValue }) => {
+	const [activeValue, setActiveValue] = useState<string>(defaultValue ?? "")
+	const buttonRefs = useRef<Map<string, HTMLButtonElement>>(new Map())
 	const containerRef = useRef<HTMLDivElement>(null)
 	const sliderRef = useRef<HTMLDivElement>(null)
 
 	const updateSliderPosition = useCallback((): 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]
+		const activeButton: HTMLButtonElement | undefined = buttonRefs.current.get(activeValue)
 
 		if (!activeButton) return
 
@@ -48,7 +29,7 @@ export const Segments: FC<SegmentsProps> = ({ children, isFullWidth, isSmall })
 		sliderRef.current.style.transform = `translateX(${left}px)`
 		sliderRef.current.style.width = `${width}px`
 		sliderRef.current.style.opacity = "1"
-	}, [activeValue, validChildren])
+	}, [activeValue])
 
 	useEffect(() => {
 		const timer: ReturnType<typeof setTimeout> = setTimeout(updateSliderPosition, 0)
@@ -61,27 +42,38 @@ export const Segments: FC<SegmentsProps> = ({ children, isFullWidth, isSmall })
 		}
 	}, [updateSliderPosition])
 
+	const onSelect = useCallback((value: string): void => {
+		setActiveValue(value)
+	}, [])
+
+	const registerRef = useCallback((value: string, el: HTMLButtonElement | null): void => {
+		if (el) {
+			buttonRefs.current.set(value, el)
+		} else {
+			buttonRefs.current.delete(value)
+		}
+	}, [])
+
 	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<SegmentButtonProps>(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>
+		<SegmentsContext value={{ activeValue, onSelect, registerRef }}>
+			<Flex
+				className={segmentedControlClasses}
+				isYCentered={true}
+				gap={2}
+				isInline={!isFullWidth}
+				ref={containerRef}
+				data-ui-component="Segments"
+			>
+				{children}
+				<div ref={sliderRef} className={styles.segments__slider} />
+			</Flex>
+		</SegmentsContext>
 	)
 }
+
+Segments.displayName = "Segments"

package/components/Segments/Segments.types.ts

@@ -2,6 +2,7 @@ import type { SegmentButtonProps } from "./components/SegmentButton/SegmentButto
 import type { FC, PropsWithChildren, ReactElement } from "react"
 
 export interface SegmentsBaseProps {
+	defaultValue?: string
 	isFullWidth?: boolean
 	isSmall?: boolean
 }

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

@@ -26,10 +26,6 @@ export const meta: HeliosAttributeMeta<SegmentButtonProps> = {
 		type: "() => void",
 		isOptional: true,
 	},
-	ref: {
-		type: "Ref<HTMLButtonElement>",
-		isOptional: true,
-	},
 	value: {
 		type: "string",
 	},

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

@@ -1,22 +1,47 @@
 import styles from "./SegmentButton.module.css"
 import { getClasses } from "@heliosgraphics/utils"
 import { Icon } from "../../../Icon"
-import type { FC } from "react"
+import { useSegments } from "../../Segments.context"
+import { useCallback, type FC } from "react"
 import type { HeliosIconType } from "../../../../types/icons"
 import type { SegmentButtonProps } from "./SegmentButton.types"
 
-export const SegmentButton: FC<SegmentButtonProps> = ({ isActive, value, icon, iconLeft, iconRight, onClick, ref }) => {
+export const SegmentButton: FC<SegmentButtonProps> = ({
+	value,
+	icon,
+	iconLeft,
+	iconRight,
+	isActive: isActiveProp,
+	onClick,
+}) => {
+	const { activeValue, onSelect, registerRef } = useSegments()
+	const isActive: boolean = isActiveProp ?? value === activeValue
+
 	const segmentButtonClasses: string = getClasses(styles.segmentButton, {
 		[styles.segmentButtonActive]: isActive,
 	})
 
 	const iconL: HeliosIconType | undefined = iconLeft || icon
 
+	const handleClick = useCallback((): void => {
+		onSelect(value)
+		onClick?.()
+	}, [value, onSelect, onClick])
+
+	const handleRef = useCallback(
+		(el: HTMLButtonElement | null): void => {
+			registerRef(value, el)
+		},
+		[value, registerRef],
+	)
+
 	return (
-		<button ref={ref} className={segmentButtonClasses} onClick={onClick} data-ui-component="SegmentButton">
+		<button ref={handleRef} className={segmentButtonClasses} onClick={handleClick} data-ui-component="SegmentButton">
 			{iconL && <Icon icon={iconL} size={16} />}
 			{value}
 			{iconRight && <Icon icon={iconRight} size={16} />}
 		</button>
 	)
 }
+
+SegmentButton.displayName = "SegmentButton"

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

@@ -1,4 +1,3 @@
-import type { Ref } from "react"
 import type { HeliosIconType } from "../../../../types/icons"
 
 export interface SegmentButtonProps {
@@ -7,6 +6,5 @@ export interface SegmentButtonProps {
 	iconRight?: HeliosIconType
 	isActive?: boolean
 	onClick?: () => void
-	ref?: Ref<HTMLButtonElement>
 	value: string
 }

package/components/Select/Select.tsx

@@ -3,54 +3,51 @@
 import { Flex } from "../Flex"
 import { Icon } from "../Icon"
 import { getClasses } from "@heliosgraphics/utils"
-import { useId, type FC } from "react"
+import { useId, forwardRef } 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,
-	isRequired,
-	items,
-	label,
-}) => {
-	const htmlFor: string = useId()
+export const Select = forwardRef<HTMLSelectElement, SelectProps>(
+	({ selectedValue, onChange, isLabelHidden, isSmall, isDisabled, isRequired, items, label }, ref) => {
+		const htmlFor: string = useId()
 
-	const selectClasses: string = getClasses(styles.select, {
-		[styles.selectDisabled]: isDisabled,
-		[styles.selectSmall]: isSmall,
-		[styles.selectHiddenLabel]: !label || isLabelHidden,
-	})
+		const selectClasses: string = getClasses(styles.select, {
+			[styles.selectDisabled]: isDisabled,
+			[styles.selectSmall]: isSmall,
+			[styles.selectHiddenLabel]: !label || isLabelHidden,
+		})
 
-	return (
-		<Flex isColumn={true} className={selectClasses} data-ui-component="Select">
-			<InputLabel label={label} id={htmlFor} isHidden={!!isLabelHidden} isDisabled={!!isDisabled} />
-			<Flex>
-				<select
-					className={styles.select__select}
-					onChange={onChange}
-					id={htmlFor}
-					value={selectedValue}
-					disabled={isDisabled}
-					required={isRequired}
-					aria-label={isLabelHidden ? label : undefined}
-				>
-					{items?.map((item) => {
-						return (
-							<option key={item.value} value={item.value} disabled={item.isDisabled}>
-								{item.name}
-							</option>
-						)
-					})}
-				</select>
-				<Flex className={styles.select__icon} isCentered={true}>
-					<Icon icon="chevron-down" size={20} />
+		return (
+			<Flex isColumn={true} className={selectClasses} data-ui-component="Select">
+				<InputLabel label={label} id={htmlFor} isHidden={!!isLabelHidden} isDisabled={!!isDisabled} />
+				<Flex>
+					<select
+						ref={ref}
+						className={styles.select__select}
+						onChange={onChange}
+						id={htmlFor}
+						value={selectedValue}
+						disabled={isDisabled}
+						required={isRequired}
+						aria-label={isLabelHidden ? label : undefined}
+						aria-required={isRequired || undefined}
+					>
+						{items?.map((item) => {
+							return (
+								<option key={item.value} 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>
-		</Flex>
-	)
-}
+		)
+	},
+)
+
+Select.displayName = "Select"

package/components/Separator/Separator.tsx

@@ -32,3 +32,5 @@ export const Separator: FC<SeparatorProps> = ({
 
 	return <HorizontalSeparator {...separatorProps} />
 }
+
+Separator.displayName = "Separator"

package/components/Separator/components/HRMarkup/HRMarkup.tsx

@@ -6,3 +6,5 @@ export const HRMarkup: FC<HRMarkupProps> = (props) => {
 
 	return <hr {...goodProps} data-ui-component="Separator" />
 }
+
+HRMarkup.displayName = "HRMarkup"

package/components/Separator/components/HorizontalSeparator/HorizontalSeparator.tsx

@@ -18,3 +18,5 @@ export const HorizontalSeparator: FC<HorizontalSeparatorProps> = ({ lineStyle, c
 
 	return <HRMarkup className={hrClassNames} style={horizontalStyle} />
 }
+
+HorizontalSeparator.displayName = "HorizontalSeparator"

package/components/Separator/components/VerticalSeparator/VerticalSeparator.tsx

@@ -18,3 +18,5 @@ export const VerticalSeparator: FC<VerticalSeparatorProps> = ({ height, classNam
 
 	return <HRMarkup style={verticalStyle} className={hrClassNames} aria-orientation="vertical" />
 }
+
+VerticalSeparator.displayName = "VerticalSeparator"

package/components/Setup/Setup.tsx

@@ -41,6 +41,7 @@ export const Setup: FC<SetupProps> = ({ theme = "system", fixedTheme }) => {
 				<link key={`stylesheet-${linkProps.id}`} {...linkProps} />
 			))}
 			<script
+				data-ui-component="Setup"
 				dangerouslySetInnerHTML={{
 					__html: `(${code.toString()})("${theme}", ${fixedThemeArg});`,
 				}}
@@ -48,3 +49,5 @@ export const Setup: FC<SetupProps> = ({ theme = "system", fixedTheme }) => {
 		</>
 	)
 }
+
+Setup.displayName = "Setup"

package/components/Shimmer/Shimmer.tsx

@@ -27,3 +27,5 @@ export const Shimmer: FC<ShimmerProps> = ({ isRounded, paddingTop, paddingBottom
 		</div>
 	)
 }
+
+Shimmer.displayName = "Shimmer"

package/components/Slider/Slider.tsx

@@ -14,3 +14,5 @@ export const Slider: FC<SliderProps> = ({ "aria-label": ariaLabel, items }) => {
 		</ul>
 	)
 }
+
+Slider.displayName = "Slider"

package/components/Spacer/Spacer.tsx

@@ -4,3 +4,5 @@ import type { SpacerProps } from "./Spacer.types"
 export const Spacer: FC<SpacerProps> = ({ gap }) => {
 	return <div style={{ height: `${gap ?? 0}px` }} data-ui-component="Spacer" />
 }
+
+Spacer.displayName = "Spacer"

package/components/Table/Table.tsx

@@ -17,3 +17,5 @@ export const Table: FC<TableProps> = ({ children, hasBorder, isMonoHeader }) =>
 		</div>
 	)
 }
+
+Table.displayName = "Table"

package/components/Tabs/Tabs.meta.ts

@@ -2,23 +2,23 @@ import type { HeliosAttributeMeta } from "../../types/meta"
 import type { TabsProps } from "./Tabs.types"
 
 export const meta: HeliosAttributeMeta<TabsProps> = {
+	_extends: [],
 	_patterns: [
 		{
 			id: "ui-tabs-default",
 			description: "default",
-			content: `<Tabs items={TAB_ITEMS} sections={TAB_SECTIONS}/>`,
+			content:
+				'<Tabs items={[{ name: "Tab 1", isActive: true, onClick: () => {} }, { name: "Tab 2", onClick: () => {} }]}>{CHILDREN}</Tabs>',
+		},
+		{
+			id: "ui-tabs-with-href",
+			description: "with links",
+			content:
+				'<Tabs items={[{ name: "Overview", href: "/overview", isActive: true }, { name: "Settings", href: "/settings" }]} />',
 		},
 	],
 	_status: "experimental",
-	_category: "layout",
-	active: {
-		type: "number",
-		isOptional: true,
-	},
-	items: {
-		type: "Array<string>",
-	},
-	sections: {
-		type: "Array<ReactNode>",
-	},
+	_category: "core",
+	children: { type: "ReactNode", isOptional: true },
+	items: { type: "Array<TabItem>", description: "Tab items with name, onClick, href, isActive, and isDisabled" },
 }

package/components/Tabs/Tabs.module.css

@@ -1,27 +1,43 @@
-.tabs__ol {
+.tabs__list {
 	position: relative;
+	display: flex;
+	gap: 2px;
 
-	height: 36px;
+	height: 40px;
 	padding: 0 8px 0 0;
 
 	box-shadow: inset 0 -1px 0 0 var(--ui-border-secondary);
-
-	line-height: 36px;
+	line-height: 40px;
 }
 
-.tabs__ol__item {
+.tabs__item {
+	display: flex;
+	align-items: center;
 	padding: 0 12px;
 
 	border-radius: var(--radius-sm) var(--radius-sm) 0 0;
-	border: 1px solid var(--ui-border-secondary);
+	color: var(--ui-text-secondary);
+	text-decoration: none;
 
 	cursor: pointer;
+	user-select: none;
+}
+
+.tabs__item:hover {
+	color: var(--ui-text-primary);
+}
+
+.tabs__itemActive {
+	color: var(--ui-text-primary);
+	box-shadow: inset 0 -2px 0 0 var(--ui-text-primary);
 }
 
-.tabs__ol__itemActive {
-	border-bottom-color: var(--ui-bg-secondary);
+.tabs__itemDisabled {
+	opacity: 0.4;
+	cursor: not-allowed;
+	pointer-events: none;
 }
 
-.tabs__section {
+.tabs__content {
 	padding: 24px 0;
 }

package/components/Tabs/Tabs.tsx

@@ -1,69 +1,65 @@
 "use client"
 
 import { getClasses } from "@heliosgraphics/utils"
-import { useId, useRef, useState, type FC, type KeyboardEvent } from "react"
-import type { TabsProps } from "./Tabs.types"
-import styles from "./Tabs.module.css"
 import { Text } from "../Text"
+import styles from "./Tabs.module.css"
+import type { FC, KeyboardEvent } from "react"
+import type { TabItem, TabsProps } from "./Tabs.types"
 
-export const Tabs: FC<TabsProps> = ({ active: activeNumber, items, sections }) => {
-	const [active, setActive] = useState(activeNumber || 0)
-	const tabsId: string = useId()
-	const tabRefs = useRef<(HTMLDivElement | null)[]>([])
-
-	if (!items || !sections) return null
-
-	const tabListClasses: string = getClasses(styles.tabs__ol, "flex gap-2")
-
-	const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>, index: number): void => {
-		let nextIndex: number | null = null
+export const Tabs: FC<TabsProps> = ({ items, children }) => {
+	if (!items?.length) return null
 
-		if (event.key === "ArrowRight") {
-			event.preventDefault()
-			nextIndex = (index + 1) % items.length
-		} else if (event.key === "ArrowLeft") {
+	const onKeyDown = (event: KeyboardEvent<HTMLElement>, item: TabItem): void => {
+		if (event.key === " " || event.key === "Enter") {
 			event.preventDefault()
-			nextIndex = (index - 1 + items.length) % items.length
-		}
-
-		if (nextIndex !== null) {
-			setActive(nextIndex)
-			tabRefs.current[nextIndex]?.focus()
+			item.onClick?.()
 		}
 	}
 
 	return (
 		<div data-ui-component="Tabs">
-			<div role="tablist" className={tabListClasses}>
-				{items.map((tab, index) => (
-					<div
-						key={tab}
-						ref={(el) => {
-							tabRefs.current[index] = el
-						}}
-						role="tab"
-						tabIndex={active === index ? 0 : -1}
-						aria-selected={active === index}
-						aria-controls={`${tabsId}-panel-${index}`}
-						id={`${tabsId}-tab-${index}`}
-						onClick={() => setActive(index)}
-						onKeyDown={(event) => handleKeyDown(event, index)}
-						className={getClasses(styles.tabs__ol__item, { [styles.tabs__ol__itemActive]: active === index })}
-					>
-						<Text type="small" fontWeight="medium">
-							{tab}
-						</Text>
-					</div>
-				))}
+			<div role="tablist" className={styles.tabs__list}>
+				{items.map((item: TabItem, index: number) => {
+					const itemClasses: string = getClasses(styles.tabs__item, {
+						[styles.tabs__itemActive]: !!item.isActive,
+						[styles.tabs__itemDisabled]: !!item.isDisabled,
+					})
+
+					const commonProps = {
+						key: index,
+						role: "tab" as const,
+						tabIndex: item.isDisabled ? -1 : 0,
+						"aria-selected": !!item.isActive,
+						"aria-disabled": !!item.isDisabled,
+						className: itemClasses,
+					}
+
+					if (item.href) {
+						return (
+							<a {...commonProps} href={item.href}>
+								<Text type="small" fontWeight="medium">
+									{item.name}
+								</Text>
+							</a>
+						)
+					}
+
+					return (
+						<div
+							{...commonProps}
+							onClick={item.isDisabled ? undefined : item.onClick}
+							onKeyDown={(e) => onKeyDown(e, item)}
+						>
+							<Text type="small" fontWeight="medium">
+								{item.name}
+							</Text>
+						</div>
+					)
+				})}
 			</div>
-			<section
-				role="tabpanel"
-				id={`${tabsId}-panel-${active}`}
-				aria-labelledby={`${tabsId}-tab-${active}`}
-				className="tabs__section"
-			>
-				{sections[active]}
-			</section>
+			{children && <section className={styles.tabs__content}>{children}</section>}
 		</div>
 	)
 }
+
+Tabs.displayName = "Tabs"

package/components/Tabs/Tabs.types.ts

@@ -1,7 +1,14 @@
 import type { ReactNode } from "react"
 
+export interface TabItem {
+	href?: string
+	isActive?: boolean
+	isDisabled?: boolean
+	name: string
+	onClick?: () => void
+}
+
 export interface TabsProps {
-	active?: number
-	items: Array<string>
-	sections: Array<ReactNode>
+	children?: ReactNode
+	items: Array<TabItem>
 }

package/components/Text/Text.tsx

@@ -55,3 +55,5 @@ export const Text: FC<TextProps> = (props) => {
 			return <Div {...baseTextProps} />
 	}
 }
+
+Text.displayName = "Text"

package/components/Text/components/Div/Div.tsx

@@ -5,3 +5,5 @@ import type { FC } from "react"
 export const Div: FC<DivProps> = (props) => {
 	return <div {...props} className={getClasses("p", props.className)} data-ui-component="Text.Div" />
 }
+
+Div.displayName = "Div"

package/components/Text/components/Micro/Micro.tsx

@@ -5,3 +5,5 @@ import type { MicroProps } from "./Micro.types"
 export const Micro: FC<MicroProps> = (props) => {
 	return <small {...props} className={getClasses("micro", props.className)} data-ui-component="Text.Micro" />
 }
+
+Micro.displayName = "Micro"

package/components/Text/components/P/P.tsx

@@ -5,3 +5,5 @@ import type { PProps } from "./P.types"
 export const P: FC<PProps> = (props) => {
 	return <p {...props} className={getClasses("p", props.className)} data-ui-component="Text.P" />
 }
+
+P.displayName = "P"

package/components/Text/components/Small/Small.tsx

@@ -5,3 +5,5 @@ import type { SmallProps } from "./Small.types"
 export const Small: FC<SmallProps> = (props) => {
 	return <small {...props} className={getClasses("small", props.className)} data-ui-component="Text.Small" />
 }
+
+Small.displayName = "Small"

package/components/Text/components/Tiny/Tiny.tsx

@@ -5,3 +5,5 @@ import type { TinyProps } from "./Tiny.types"
 export const Tiny: FC<TinyProps> = (props) => {
 	return <small {...props} className={getClasses("tiny", props.className)} data-ui-component="Text.Tiny" />
 }
+
+Tiny.displayName = "Tiny"