@nationaldesignstudio/react 0.5.5 → 0.6.0

package/src/components/atoms/select/select.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { Select as BaseSelect } from "@base-ui-components/react/select";
+import { Check, ChevronDown, ChevronUp } from "lucide-react";
 import * as React from "react";
 import { tv, type VariantProps } from "tailwind-variants";
 import {
@@ -19,6 +20,7 @@ import { cn } from "@/lib/utils";
  * - Focus/Open: Accent border with focus ring
  * - Selected: Has a value selected (darker text)
  * - Disabled: Reduced opacity, not interactive
+ * - Invalid: Error border and styling
  */
 const selectTriggerVariants = tv({
 	base: [
@@ -29,6 +31,8 @@ const selectTriggerVariants = tv({
 		"data-[disabled]:bg-ui-control-background-disabled data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",
 		// Open state styling
 		"data-[popup-open]:border-ui-accent-base data-[popup-open]:ring-4 data-[popup-open]:ring-ui-color-focus data-[popup-open]:bg-ui-control-background",
+		// Invalid state (aria-invalid)
+		"aria-[invalid=true]:border-ui-error-color aria-[invalid=true]:ring-ui-error-color/20",
 	],
 	variants: {
 		size: formControlSizes,
@@ -42,16 +46,25 @@ const selectTriggerVariants = tv({
 
 /**
  * Select popup/menu variants
+ *
+ * Uses overlay tokens for consistent floating panel styling:
+ * - color.overlay.background - Light background
+ * - color.overlay.border - Subtle border
+ * - surface.overlay.radius - Rounded corners
  */
 const selectPopupVariants = tv({
 	base: [
 		// Layout - match trigger width using CSS custom property from Base UI
-		"flex flex-col gap-2 p-10",
+		"flex flex-col gap-2 p-8",
 		"w-[var(--anchor-width)]",
-		// Background and border - uses surface ui radius for theming support
-		"bg-ui-control-background border border-solid border-ui-color-border-active rounded-surface-ui-medium",
-		// Focus ring shadow (ui-focus-state from Figma)
-		"ring-4 ring-ui-color-focus",
+		// Background - uses overlay token
+		"bg-overlay-background",
+		// Border - uses overlay token for subtle border
+		"border border-overlay-border",
+		// Border radius - uses overlay token for consistency with other overlays
+		"rounded-surface-overlay",
+		// Shadow for elevation
+		"shadow-lg",
 		// Animation
 		"origin-[var(--transform-origin)]",
 		"transition-[transform,scale,opacity] duration-150",
@@ -59,6 +72,8 @@ const selectPopupVariants = tv({
 		"data-[ending-style]:scale-95 data-[ending-style]:opacity-0",
 		// Ensure it's above other content
 		"z-50",
+		// Scrollable support
+		"overflow-y-auto max-h-[var(--available-height,300px)]",
 	],
 });
 
@@ -95,46 +110,27 @@ const selectOptionVariants = tv({
 });
 
 /**
- * Chevron icon for the select trigger
+ * Select separator variants
  */
-const SelectChevronIcon = ({ className }: { className?: string }) => (
-	<svg
-		className={cn("size-16 text-gray-500 shrink-0", className)}
-		viewBox="0 0 16 16"
-		fill="none"
-		xmlns="http://www.w3.org/2000/svg"
-		aria-hidden="true"
-	>
-		<path
-			d="M4 6L8 10L12 6"
-			stroke="currentColor"
-			strokeWidth="1.5"
-			strokeLinecap="round"
-			strokeLinejoin="round"
-		/>
-	</svg>
-);
+const selectSeparatorVariants = tv({
+	base: ["h-px my-6 -mx-8", "bg-overlay-border"],
+});
 
 /**
- * Checkmark icon for selected options
+ * Select scroll arrow variants (shared by up and down)
  */
-const CheckIcon = ({ className }: { className?: string }) => (
-	<svg
-		className={cn("size-14 shrink-0", className)}
-		viewBox="0 0 14 14"
-		fill="none"
-		xmlns="http://www.w3.org/2000/svg"
-		aria-hidden="true"
-	>
-		<path
-			d="M11.6666 3.5L5.24992 9.91667L2.33325 7"
-			stroke="currentColor"
-			strokeWidth="1.5"
-			strokeLinecap="round"
-			strokeLinejoin="round"
-		/>
-	</svg>
-);
+const selectScrollArrowVariants = tv({
+	base: [
+		"flex items-center justify-center",
+		"py-4",
+		"text-text-muted",
+		"cursor-default",
+		// Sticky positioning for scroll indicators
+		"data-[direction=up]:sticky data-[direction=up]:top-0",
+		"data-[direction=down]:sticky data-[direction=down]:bottom-0",
+		"bg-overlay-background",
+	],
+});
 
 // ============================================================================
 // Select Root
@@ -161,17 +157,33 @@ export interface SelectTriggerProps
 		VariantProps<typeof selectTriggerVariants> {
 	className?: string;
 	placeholder?: string;
+	/**
+	 * Accessible label for the select trigger.
+	 * Required for accessibility when no visible label is present.
+	 */
+	"aria-label"?: string;
 }
 
 const SelectTrigger = React.forwardRef<HTMLButtonElement, SelectTriggerProps>(
 	(
-		{ className, size, error, placeholder = "Select option...", ...props },
+		{
+			className,
+			size,
+			error,
+			placeholder = "Select option...",
+			"aria-label": ariaLabel,
+			...props
+		},
 		ref,
 	) => {
 		return (
 			<BaseSelect.Trigger
 				ref={ref}
+				aria-label={ariaLabel ?? placeholder}
+				aria-invalid={error || undefined}
 				className={cn(selectTriggerVariants({ size, error }), className)}
+				data-size={size ?? "default"}
+				data-error={error ?? false}
 				{...props}
 			>
 				<BaseSelect.Value>
@@ -183,8 +195,8 @@ const SelectTrigger = React.forwardRef<HTMLButtonElement, SelectTriggerProps>(
 						)
 					}
 				</BaseSelect.Value>
-				<BaseSelect.Icon>
-					<SelectChevronIcon />
+				<BaseSelect.Icon aria-hidden="true">
+					<ChevronDown className="size-16 text-gray-500 shrink-0" />
 				</BaseSelect.Icon>
 			</BaseSelect.Trigger>
 		);
@@ -193,19 +205,53 @@ const SelectTrigger = React.forwardRef<HTMLButtonElement, SelectTriggerProps>(
 SelectTrigger.displayName = "SelectTrigger";
 
 // ============================================================================
-// Select Portal & Popup
+// Select Value (for custom trigger compositions)
+// ============================================================================
+
+export interface SelectValueProps
+	extends Omit<React.ComponentProps<typeof BaseSelect.Value>, "className"> {
+	className?: string;
+	placeholder?: string;
+}
+
+const SelectValue = React.forwardRef<HTMLSpanElement, SelectValueProps>(
+	({ className, placeholder = "Select option...", ...props }, ref) => {
+		return (
+			<BaseSelect.Value ref={ref} className={className} {...props}>
+				{(value) =>
+					value ? value : <span className="text-text-muted">{placeholder}</span>
+				}
+			</BaseSelect.Value>
+		);
+	},
+);
+SelectValue.displayName = "SelectValue";
+
+// ============================================================================
+// Select Portal & Popup (Content)
 // ============================================================================
 
 export interface SelectPopupProps
 	extends Omit<React.ComponentProps<typeof BaseSelect.Popup>, "className"> {
 	className?: string;
+	/**
+	 * Whether the selected item should align with the trigger.
+	 * When true (default), the popup positions so the selected item appears over the trigger.
+	 * When false, the popup aligns to the trigger edge.
+	 */
+	alignItemWithTrigger?: boolean;
 }
 
 const SelectPopup = React.forwardRef<HTMLDivElement, SelectPopupProps>(
-	({ className, children, ...props }, ref) => {
+	({ className, children, alignItemWithTrigger = true, ...props }, ref) => {
 		return (
 			<BaseSelect.Portal>
-				<BaseSelect.Positioner side="bottom" sideOffset={4} align="start">
+				<BaseSelect.Positioner
+					side="bottom"
+					sideOffset={4}
+					align="start"
+					alignItemWithTrigger={alignItemWithTrigger}
+				>
 					<BaseSelect.Popup
 						ref={ref}
 						className={cn(selectPopupVariants(), className)}
@@ -220,6 +266,9 @@ const SelectPopup = React.forwardRef<HTMLDivElement, SelectPopupProps>(
 );
 SelectPopup.displayName = "SelectPopup";
 
+// Alias for shadcn compatibility
+const SelectContent = SelectPopup;
+
 // ============================================================================
 // Select Option (wraps Base UI's Select.Item)
 // ============================================================================
@@ -238,8 +287,8 @@ const SelectOption = React.forwardRef<HTMLDivElement, SelectOptionProps>(
 				{...props}
 			>
 				<BaseSelect.ItemText>{children}</BaseSelect.ItemText>
-				<BaseSelect.ItemIndicator>
-					<CheckIcon />
+				<BaseSelect.ItemIndicator aria-hidden="true">
+					<Check className="size-14 shrink-0" />
 				</BaseSelect.ItemIndicator>
 			</BaseSelect.Item>
 		);
@@ -247,6 +296,9 @@ const SelectOption = React.forwardRef<HTMLDivElement, SelectOptionProps>(
 );
 SelectOption.displayName = "SelectOption";
 
+// Alias for shadcn compatibility
+const SelectItem = SelectOption;
+
 // ============================================================================
 // Select Group
 // ============================================================================
@@ -298,27 +350,128 @@ const SelectGroupLabel = React.forwardRef<
 });
 SelectGroupLabel.displayName = "SelectGroupLabel";
 
+// Alias for shadcn compatibility
+const SelectLabel = SelectGroupLabel;
+
+// ============================================================================
+// Select Separator
+// ============================================================================
+
+export interface SelectSeparatorProps
+	extends Omit<React.ComponentProps<typeof BaseSelect.Separator>, "className"> {
+	className?: string;
+}
+
+const SelectSeparator = React.forwardRef<HTMLDivElement, SelectSeparatorProps>(
+	({ className, ...props }, ref) => {
+		return (
+			<BaseSelect.Separator
+				ref={ref}
+				className={cn(selectSeparatorVariants(), className)}
+				{...props}
+			/>
+		);
+	},
+);
+SelectSeparator.displayName = "SelectSeparator";
+
+// ============================================================================
+// Select Scroll Up Arrow
+// ============================================================================
+
+export interface SelectScrollUpArrowProps
+	extends Omit<
+		React.ComponentProps<typeof BaseSelect.ScrollUpArrow>,
+		"className"
+	> {
+	className?: string;
+}
+
+const SelectScrollUpArrow = React.forwardRef<
+	HTMLDivElement,
+	SelectScrollUpArrowProps
+>(({ className, ...props }, ref) => {
+	return (
+		<BaseSelect.ScrollUpArrow
+			ref={ref}
+			data-direction="up"
+			aria-label="Scroll up"
+			className={cn(selectScrollArrowVariants(), className)}
+			{...props}
+		>
+			<ChevronUp className="size-12" aria-hidden="true" />
+		</BaseSelect.ScrollUpArrow>
+	);
+});
+SelectScrollUpArrow.displayName = "SelectScrollUpArrow";
+
+// ============================================================================
+// Select Scroll Down Arrow
+// ============================================================================
+
+export interface SelectScrollDownArrowProps
+	extends Omit<
+		React.ComponentProps<typeof BaseSelect.ScrollDownArrow>,
+		"className"
+	> {
+	className?: string;
+}
+
+const SelectScrollDownArrow = React.forwardRef<
+	HTMLDivElement,
+	SelectScrollDownArrowProps
+>(({ className, ...props }, ref) => {
+	return (
+		<BaseSelect.ScrollDownArrow
+			ref={ref}
+			data-direction="down"
+			aria-label="Scroll down"
+			className={cn(selectScrollArrowVariants(), className)}
+			{...props}
+		>
+			<ChevronDown className="size-12" aria-hidden="true" />
+		</BaseSelect.ScrollDownArrow>
+	);
+});
+SelectScrollDownArrow.displayName = "SelectScrollDownArrow";
+
 // ============================================================================
 // Compound Component Export
 // ============================================================================
 
 export const Select = Object.assign(SelectRoot, {
 	Trigger: SelectTrigger,
+	Value: SelectValue,
 	Popup: SelectPopup,
+	Content: SelectContent,
 	Option: SelectOption,
+	Item: SelectItem,
 	Group: SelectGroup,
 	GroupLabel: SelectGroupLabel,
+	Label: SelectLabel,
+	Separator: SelectSeparator,
+	ScrollUpArrow: SelectScrollUpArrow,
+	ScrollDownArrow: SelectScrollDownArrow,
 });
 
 // Also export individual components for flexibility
 export {
 	SelectRoot,
 	SelectTrigger,
+	SelectValue,
 	SelectPopup,
+	SelectContent,
 	SelectOption,
+	SelectItem,
 	SelectGroup,
 	SelectGroupLabel,
+	SelectLabel,
+	SelectSeparator,
+	SelectScrollUpArrow,
+	SelectScrollDownArrow,
 	selectTriggerVariants,
 	selectPopupVariants,
 	selectOptionVariants,
+	selectSeparatorVariants,
+	selectScrollArrowVariants,
 };

package/src/components/atoms/video-player/caption-overlay.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+import * as React from "react";
+import { tv, type VariantProps } from "tailwind-variants";
+import type { CaptionCue } from "@/hooks/use-captions";
+import { cn } from "@/lib/utils";
+
+/**
+ * Caption overlay variants using semantic tokens.
+ */
+const captionOverlayVariants = tv({
+	base: [
+		// Positioning - absolute at bottom of video container
+		"pointer-events-none",
+		"absolute right-0 left-0",
+		"z-10",
+		"flex justify-center",
+		"px-4",
+	],
+	variants: {
+		position: {
+			bottom: "bottom-64",
+			"bottom-sm": "bottom-24",
+		},
+	},
+	defaultVariants: {
+		position: "bottom-sm",
+	},
+});
+
+/**
+ * Caption text box variants.
+ */
+const captionTextVariants = tv({
+	base: [
+		"flex items-center justify-center",
+		"w-fit max-w-[80%]",
+		"gap-10",
+		"px-12 py-6",
+		"text-center",
+		"font-normal leading-[1.4]",
+		"rounded-6",
+		"bg-video-player-caption-bg text-video-player-caption-text",
+	],
+	variants: {
+		size: {
+			sm: "text-14",
+			md: "[font-size:clamp(16px,2vw,24px)]",
+			lg: "text-24",
+		},
+	},
+	defaultVariants: {
+		size: "md",
+	},
+});
+
+export interface CaptionOverlayProps
+	extends React.HTMLAttributes<HTMLOutputElement>,
+		VariantProps<typeof captionOverlayVariants>,
+		VariantProps<typeof captionTextVariants> {
+	/** Caption cue to display */
+	cue?: CaptionCue | null;
+	/** Caption text to display (alternative to cue) */
+	text?: string;
+}
+
+/**
+ * CaptionOverlay component.
+ *
+ * Displays caption text overlaid on video content.
+ * Styled to match the DGA video player implementation.
+ *
+ * @example
+ * ```tsx
+ * <CaptionOverlay cue={activeCue} />
+ *
+ * // Or with plain text
+ * <CaptionOverlay text="Hello, world!" />
+ * ```
+ */
+const CaptionOverlay = React.forwardRef<HTMLOutputElement, CaptionOverlayProps>(
+	({ className, cue, text, position, size, ...props }, ref) => {
+		// Use cue text or fallback to text prop
+		const displayText = cue?.text ?? text;
+
+		// Don't render anything if no caption text
+		if (!displayText) {
+			return null;
+		}
+
+		return (
+			<output
+				ref={ref}
+				className={cn(captionOverlayVariants({ position }), className)}
+				aria-live="polite"
+				aria-label="Video caption"
+				{...props}
+			>
+				<span className={captionTextVariants({ size })}>{displayText}</span>
+			</output>
+		);
+	},
+);
+
+CaptionOverlay.displayName = "CaptionOverlay";
+
+export { CaptionOverlay, captionOverlayVariants, captionTextVariants };