@flamingo-stack/openframe-frontend-core 0.0.518-1660.4292.1 → 0.0.518

package/src/components/progress.tsx

@@ -0,0 +1,27 @@
+"use client"
+
+import * as React from "react"
+import * as ProgressPrimitive from "@radix-ui/react-progress"
+
+import { cn } from "../utils/cn"
+
+const Progress = React.forwardRef<
+  React.ElementRef<typeof ProgressPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root> & {
+    indicatorClassName?: string
+  }
+>(({ className, value, indicatorClassName, ...props }, ref) => (
+  <ProgressPrimitive.Root
+    ref={ref}
+    className={cn("relative h-2 w-full overflow-hidden rounded-full bg-secondary", className)}
+    {...props}
+  >
+    <ProgressPrimitive.Indicator
+      className={cn("h-full w-full flex-1 bg-primary transition-all", indicatorClassName)}
+      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+    />
+  </ProgressPrimitive.Root>
+))
+Progress.displayName = ProgressPrimitive.Root.displayName
+
+export { Progress }

package/src/components/provider-button.tsx

@@ -0,0 +1,40 @@
+import * as React from "react"
+import { Button } from "./ui/button"
+import { cn } from "../utils/cn"
+
+interface ProviderButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  provider: 'google' | 'microsoft' | 'slack' | 'github' | 'apple';
+  variant?: 'accent' | 'outline';
+  size?: 'default' | 'small-legacy';
+  loading?: boolean;
+}
+
+const ProviderButton = React.forwardRef<HTMLButtonElement, ProviderButtonProps>(
+  ({ className, provider, variant = 'outline', size = 'default', children, ...props }, ref) => {
+    const providerNames = {
+      google: 'Google',
+      microsoft: 'Microsoft',
+      slack: 'Slack',
+      github: 'GitHub',
+      apple: 'Apple'
+    };
+
+    return (
+      <Button
+        className={cn(
+          "w-full",
+          className
+        )}
+        variant={variant}
+        size={size}
+        ref={ref}
+        {...props}
+      >
+        {children || `Sign in with ${providerNames[provider]}`}
+      </Button>
+    )
+  }
+)
+ProviderButton.displayName = "ProviderButton"
+
+export { ProviderButton }

package/src/components/reddit-icon.tsx

@@ -0,0 +1,50 @@
+import React from 'react'
+
+interface RedditIconProps {
+  width?: number | string
+  height?: number | string
+  className?: string
+  variant?: 'original' | 'grayscale' | 'white'
+}
+
+export function RedditIcon({
+  width = 24,
+  height = 24,
+  className = "text-current",
+  variant = 'grayscale'
+}: RedditIconProps) {
+  // Color scheme based on variant
+  let colors;
+  switch (variant) {
+    case 'original':
+      colors = {
+        background: '#FF4500'   // White features
+      };
+      break;
+    case 'white':
+      colors = {
+        background: '#FFFFFF'   // Black features
+      };
+      break;
+    default: // grayscale
+      colors = {
+        background: '#888888'   // Light gray features
+      };
+      break;
+  }
+
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 256 256"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path
+        fill={colors.background}
+        d="M248,104a31.99228,31.99228,0,0,0-52.9375-24.19043c-16.75439-8.90112-36.76172-14.279-57.666-15.52539l5.19581-31.17578,21.83105,3.3584a24.00409,24.00409,0,1,0,2.43506-15.814l-29.64209-4.56006a7.996,7.996,0,0,0-9.10742,6.5918l-6.91309,41.478c-21.83887.94165-42.813,6.37891-60.2583,15.647a31.99266,31.99266,0,0,0-42.59229,47.74024A59.04669,59.04669,0,0,0,16,144c0,21.93457,12.042,42.35156,33.90723,57.48926C70.875,216.00588,98.60938,224,128,224s57.125-7.99414,78.09277-22.51074C227.958,186.35158,240,165.93459,240,144a59.01726,59.01726,0,0,0-2.3457-16.44922A32.17163,32.17163,0,0,0,248,104ZM72,132a16,16,0,1,1,16,16A16.01833,16.01833,0,0,1,72,132Zm92.69629,51.10938a80.122,80.122,0,0,1-73.39209,0,8,8,0,0,1,7.34033-14.2168,64.09433,64.09433,0,0,0,58.71094,0,8.00008,8.00008,0,0,1,7.34082,14.2168ZM168,148a16,16,0,1,1,16-16A16.01833,16.01833,0,0,1,168,148Z"
+      />
+    </svg>
+  )
+} 

package/src/components/resizable.tsx

@@ -0,0 +1,45 @@
+"use client"
+
+import { GripVertical } from "lucide-react"
+import * as ResizablePrimitive from "react-resizable-panels"
+
+import { cn } from "../utils/cn"
+
+const ResizablePanelGroup = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
+  <ResizablePrimitive.PanelGroup
+    className={cn(
+      "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
+      className
+    )}
+    {...props}
+  />
+)
+
+const ResizablePanel = ResizablePrimitive.Panel
+
+const ResizableHandle = ({
+  withHandle,
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+  withHandle?: boolean
+}) => (
+  <ResizablePrimitive.PanelResizeHandle
+    className={cn(
+      "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+      className
+    )}
+    {...props}
+  >
+    {withHandle && (
+      <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
+        <GripVertical className="h-2.5 w-2.5" />
+      </div>
+    )}
+  </ResizablePrimitive.PanelResizeHandle>
+)
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle }

package/src/components/scroll-area.tsx

@@ -0,0 +1,49 @@
+"use client"
+
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "../utils/cn"
+
+interface ScrollAreaProps extends React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> {
+  /**
+   * When set to true, the custom Radix scrollbars will be rendered. Defaults to `false` so that
+   * scrollbars remain hidden in accordance with the global requirement to remove scrollbars.
+   */
+  showScrollbar?: boolean
+}
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  ScrollAreaProps
+>(({ className, children, showScrollbar = false, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root ref={ref} className={cn("relative overflow-hidden", className)} {...props}>
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">{children}</ScrollAreaPrimitive.Viewport>
+    {showScrollbar && <ScrollBar />}
+    {/* The corner element is only useful when scrollbars are visible */}
+    {showScrollbar && <ScrollAreaPrimitive.Corner />}
+  </ScrollAreaPrimitive.Root>
+))
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = "vertical", ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" && "h-2.5 border-t border-t-transparent p-[1px]",
+      className,
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+))
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+
+export { ScrollArea, ScrollBar }

package/src/components/send-icon.tsx

@@ -0,0 +1,26 @@
+interface SendIconProps {
+  className?: string;
+  fill?: string;
+}
+
+export function SendIcon({ className = "w-6 h-6", fill = "#1A1A1A" }: SendIconProps) {
+  return (
+    <svg 
+      width="24" 
+      height="24" 
+      viewBox="0 0 24 24" 
+      fill="none" 
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path 
+        d="M11.1554 14.4487C10.7164 14.888 10.0042 14.8891 9.56462 14.4501C9.12509 14.0111 9.12563 13.2989 9.56462 12.8593L11.1554 14.4487ZM15.1164 7.29875C15.5555 6.85958 16.2677 6.85988 16.7072 7.29875C17.1463 7.73779 17.1474 8.45008 16.7087 8.88957L11.1554 14.4487L9.56462 12.8593L15.1164 7.29875Z" 
+        fill={fill}
+      />
+      <path 
+        d="M19.0798 1.00652C21.4022 0.313771 23.5637 2.39031 23.0495 4.69646L22.9909 4.92058L18.2463 20.8742C17.4793 23.4519 14.0415 23.9417 12.5876 21.6769L10.7946 18.8849L7.54411 19.2116C6.28619 19.3373 5.19768 18.3477 5.19743 17.0861V13.3039L2.30583 11.4216C0.0601315 9.95982 0.552303 6.53369 3.12175 5.76726L19.0798 1.00652ZM7.44743 16.9587L10.9499 16.6086L11.1769 16.6012C11.6288 16.6191 12.0528 16.8255 12.3473 17.1681L12.4836 17.3498L14.4816 20.4611C14.8944 21.1041 15.8696 20.9675 16.0885 20.2326L20.8346 4.27898L20.8639 4.15154C20.9597 3.51747 20.3581 2.97326 19.7228 3.16277L3.76482 7.92351C3.03514 8.14117 2.8919 9.11753 3.53191 9.53484L6.70622 11.6017L6.87175 11.7233C7.23484 12.031 7.44743 12.4862 7.44743 12.9684V16.9587Z" 
+        fill={fill}
+      />
+    </svg>
+  );
+} 

package/src/components/separator.tsx

@@ -0,0 +1,22 @@
+"use client"
+
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "../utils/cn"
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => (
+  <SeparatorPrimitive.Root
+    ref={ref}
+    decorative={decorative}
+    orientation={orientation}
+    className={cn("shrink-0 bg-border", orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]", className)}
+    {...props}
+  />
+))
+Separator.displayName = SeparatorPrimitive.Root.displayName
+
+export { Separator }

package/src/components/skeleton.tsx

@@ -0,0 +1,8 @@
+import type React from "react"
+import { cn } from "../utils/cn"
+
+function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("animate-pulse rounded-md bg-muted/60", className)} {...props} />
+}
+
+export { Skeleton }

package/src/components/slack-icon.tsx

@@ -0,0 +1,43 @@
+import React from 'react'
+
+interface SlackIconProps {
+  width?: number | string
+  height?: number | string
+  className?: string
+}
+
+export function SlackIcon({ 
+  width = 24, 
+  height = 24, 
+  className = "text-current" 
+}: SlackIconProps) {
+  return (
+    <svg 
+      width={width} 
+      height={height} 
+      viewBox="0 0 24 24" 
+      fill="none" 
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <g>
+        <path 
+          d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zM6.313 15.165a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313z" 
+          fill="#E01E5A"
+        />
+        <path 
+          d="M8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zM8.834 6.313a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312z" 
+          fill="#36C5F0"
+        />
+        <path 
+          d="M18.956 8.834a2.528 2.528 0 0 1 2.521-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.523 2.521h-2.521V8.834zM17.688 8.834a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312z" 
+          fill="#2EB67D"
+        />
+        <path 
+          d="M15.165 18.956a2.528 2.528 0 0 1 2.523 2.521A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.523v-2.521h2.52zM15.165 17.688a2.527 2.527 0 0 1-2.52-2.523 2.528 2.528 0 0 1 2.52-2.521h6.313A2.528 2.528 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z" 
+          fill="#ECB22E"
+        />
+      </g>
+    </svg>
+  )
+} 

package/src/components/slider.tsx

@@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+import * as SliderPrimitive from "@radix-ui/react-slider"
+
+import { cn } from "../utils/cn"
+
+const Slider = React.forwardRef<
+  React.ElementRef<typeof SliderPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <SliderPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex w-full touch-none select-none items-center",
+      className
+    )}
+    {...props}
+  >
+    <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
+      <SliderPrimitive.Range className="absolute h-full bg-primary" />
+    </SliderPrimitive.Track>
+    <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
+  </SliderPrimitive.Root>
+))
+Slider.displayName = SliderPrimitive.Root.displayName
+
+export { Slider }

package/src/components/smooth-accordion.tsx

@@ -0,0 +1,124 @@
+import * as React from 'react';
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import { ChevronButton } from './ui/chevron-button';
+import { cn } from "../utils/cn";
+
+// --- SmoothAccordion -----------------------------------------------------------------
+// Wrapper that re-exports AccordionPrimitive.Root for convenience
+export const SmoothAccordion = AccordionPrimitive.Root;
+
+// --- SmoothAccordionItem --------------------------------------------------------------
+export const SmoothAccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn('border-0', className)}
+    {...props}
+  />
+));
+SmoothAccordionItem.displayName = 'SmoothAccordionItem';
+
+// --- SmoothAccordionTrigger -----------------------------------------------------------
+interface SmoothAccordionTriggerProps
+  extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> {
+  label: React.ReactNode;
+  className?: string;
+}
+
+export const SmoothAccordionTrigger = React.forwardRef<
+  HTMLButtonElement,
+  SmoothAccordionTriggerProps
+>(({ label, className, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        'group flex w-full items-center justify-between px-6 md:px-8 py-6 text-left hover:no-underline focus:outline-none transition-colors duration-200 ease-in-out',
+        className,
+      )}
+      {...props}
+    >
+      <span className="text-h3 text-ods-text-primary">
+        {label}
+      </span>
+      <ChevronButton
+        size="md"
+        isExpanded={false}
+        backgroundColor="transparent"
+        borderColor="var(--color-border-default)"
+        className="transition-transform duration-300 ease-in-out group-data-[state=open]:rotate-180"
+      />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+));
+SmoothAccordionTrigger.displayName = 'SmoothAccordionTrigger';
+
+// --- SmoothAccordionContent -----------------------------------------------------------
+// Uses dynamic height measurement with ResizeObserver for ultra-smooth animation.
+export const SmoothAccordionContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => {
+  const [maxHeight, setMaxHeight] = React.useState<number>(0);
+  const contentInnerRef = React.useRef<HTMLDivElement | null>(null);
+
+  const composedRef = (node: HTMLDivElement) => {
+    // Allow Radix to receive ref as well
+    if (typeof ref === 'function') ref(node);
+    else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;
+    contentInnerRef.current = node;
+  };
+
+  const updateHeight = React.useCallback(() => {
+    if (contentInnerRef.current) {
+      setMaxHeight(contentInnerRef.current.scrollHeight);
+    }
+  }, []);
+
+  React.useEffect(() => {
+    updateHeight();
+  }, [updateHeight, children]);
+
+  // ResizeObserver for dynamic content
+  React.useEffect(() => {
+    if (!contentInnerRef.current) return;
+    const ro = new ResizeObserver(updateHeight);
+    ro.observe(contentInnerRef.current);
+    return () => ro.disconnect();
+  }, [updateHeight]);
+
+  const isOpen = (props as any)["data-state"] === "open";
+
+  return (
+    <AccordionPrimitive.Content
+      ref={composedRef}
+      // Radix provides data-state attribute for open/closed
+      className={cn('overflow-hidden', className)}
+      style={{
+        transition: 'max-height 0.35s ease-in-out, opacity 0.35s ease-in-out',
+        maxHeight: isOpen ? `${maxHeight}px` : '0px',
+        opacity: isOpen ? 1 : 0,
+      }}
+      {...props}
+      onTransitionEnd={() => {
+        // After closing, reset maxHeight to avoid lingering space
+        if (!isOpen) {
+          setMaxHeight(0);
+        }
+      }}
+    >
+      <div
+        // inner wrapper used for measurement
+        style={{
+          opacity: 1,
+          paddingBottom: '0.75rem', // keep default styling to match existing
+        }}
+      >
+        {children}
+      </div>
+    </AccordionPrimitive.Content>
+  );
+});
+SmoothAccordionContent.displayName = 'SmoothAccordionContent'; 

package/src/components/steps.tsx

@@ -0,0 +1,98 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../utils/cn"
+
+interface StepsProps extends React.HTMLAttributes<HTMLDivElement> {
+  currentStep: number
+}
+
+const StepsComponent = React.forwardRef<HTMLDivElement, StepsProps>(
+  ({ currentStep, className, children, ...props }, ref) => {
+    // Count the number of step children
+    const steps = React.Children.toArray(children).filter((child) => React.isValidElement(child))
+
+    return (
+      <div ref={ref} className={cn("space-y-4", className)} {...props}>
+        {React.Children.map(children, (child, index) => {
+          if (!React.isValidElement(child) || child.type !== Step) {
+            return child
+          }
+
+          // Clone the child with additional props
+          return React.cloneElement(child as React.ReactElement<any>, {
+            stepNumber: index + 1,
+            isActive: currentStep === index + 1,
+            isCompleted: currentStep > index + 1,
+            isLast: index === steps.length - 1,
+          })
+        })}
+      </div>
+    )
+  },
+)
+StepsComponent.displayName = "Steps"
+
+interface StepProps extends React.HTMLAttributes<HTMLDivElement> {
+  title: string
+  description?: string
+  stepNumber?: number
+  isActive?: boolean
+  isCompleted?: boolean
+  isLast?: boolean
+}
+
+const Step = React.forwardRef<HTMLDivElement, StepProps>(
+  ({ title, description, stepNumber, isActive, isCompleted, isLast, className, ...props }, ref) => {
+    return (
+      <div ref={ref} className={cn("relative flex gap-4", !isLast && "pb-8", className)} {...props}>
+        {/* Line connecting steps */}
+        {!isLast && <div className="absolute left-[15px] top-[30px] bottom-0 w-[1px] bg-border" />}
+
+        {/* Step indicator */}
+        <div className="relative z-10 flex h-[30px] w-[30px] shrink-0 items-center justify-center rounded-full border bg-background">
+          {isCompleted ? (
+            <svg
+              className="h-4 w-4 text-primary"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
+              <polyline points="20 6 9 17 4 12" />
+            </svg>
+          ) : (
+            <span className={cn("text-h6", isActive ? "text-primary" : "text-muted-foreground")}>
+              {stepNumber}
+            </span>
+          )}
+        </div>
+
+        {/* Step content */}
+        <div className="flex flex-col gap-0.5">
+          <h3
+            className={cn(
+              "text-h6",
+              isActive ? "text-foreground" : "text-muted-foreground",
+              isCompleted && "text-primary",
+            )}
+          >
+            {title}
+          </h3>
+          {description && (
+            <p className={cn("text-h6", isActive ? "text-muted-foreground" : "text-muted-foreground/60")}>
+              {description}
+            </p>
+          )}
+        </div>
+      </div>
+    )
+  },
+)
+Step.displayName = "Step"
+
+export { Step }
+export { StepsComponent as Steps }

package/src/components/sun-icon.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+interface SunIconProps {
+  className?: string;
+  width?: number;
+  height?: number;
+}
+
+export const SunIcon: React.FC<SunIconProps> = ({ 
+  className = "", 
+  width = 24, 
+  height = 24 
+}) => {
+  return (
+    <svg 
+      width={width} 
+      height={height} 
+      viewBox="0 0 24 24" 
+      fill="none" 
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path d="M15.8755 11.9995C15.8752 9.85963 14.1395 8.125 11.9995 8.125C9.8598 8.12526 8.12526 9.8598 8.125 11.9995C8.125 14.1395 9.85963 15.8752 11.9995 15.8755C14.1396 15.8755 15.8755 14.1396 15.8755 11.9995ZM18.1255 11.9995C18.1255 15.3823 15.3823 18.1255 11.9995 18.1255C8.61699 18.1252 5.875 15.3821 5.875 11.9995C5.87526 8.61715 8.61715 5.87526 11.9995 5.875C15.3821 5.875 18.1252 8.61699 18.1255 11.9995Z" fill="currentColor"/>
+      <path d="M10.8755 21.9995V20.4995C10.8758 19.8784 11.3793 19.3745 12.0005 19.3745C12.6214 19.3748 13.1252 19.8786 13.1255 20.4995V21.9995C13.1255 22.6207 12.6216 23.1242 12.0005 23.1245C11.3792 23.1245 10.8755 22.6208 10.8755 21.9995ZM5.19482 17.2153C5.63418 16.7761 6.34636 16.776 6.78564 17.2153C7.22444 17.6547 7.22467 18.367 6.78564 18.8062L5.7251 19.8667L5.63867 19.9443C5.19681 20.3043 4.54455 20.2784 4.13281 19.8667C3.69387 19.4275 3.69402 18.7152 4.13281 18.2759L5.19482 17.2153ZM17.2153 17.2153C17.6271 16.8036 18.2779 16.7777 18.7197 17.1377L18.8062 17.2153L19.8667 18.2759L19.9443 18.3608C20.3046 18.8027 20.2785 19.4549 19.8667 19.8667C19.4549 20.2785 18.8027 20.3046 18.3608 19.9443L18.2759 19.8667L17.2153 18.8062L17.1377 18.7197C16.7777 18.2779 16.8036 17.6271 17.2153 17.2153ZM3.5 10.8755L3.61572 10.8813C4.18265 10.9393 4.625 11.4183 4.625 12.0005C4.62475 12.5825 4.18254 13.0617 3.61572 13.1196L3.5 13.1255H2C1.37884 13.1255 0.875264 12.6216 0.875 12.0005C0.875 11.3792 1.37868 10.8755 2 10.8755H3.5ZM21.9995 10.8755C22.6208 10.8755 23.1245 11.3792 23.1245 12.0005C23.1242 12.6216 22.6207 13.1255 21.9995 13.1255H20.4995C19.8786 13.1252 19.3748 12.6214 19.3745 12.0005C19.3745 11.3793 19.8784 10.8758 20.4995 10.8755H21.9995ZM4.13281 4.13281C4.5447 3.72092 5.1968 3.69622 5.63867 4.05664L5.7251 4.13281L6.78564 5.19482L6.86182 5.27979C7.22229 5.72166 7.19756 6.37373 6.78564 6.78564C6.37373 7.19756 5.72166 7.22229 5.27979 6.86182L5.19482 6.78564L4.13281 5.7251L4.05664 5.63867C3.69622 5.1968 3.72092 4.5447 4.13281 4.13281ZM18.3608 4.05664C18.8026 3.69605 19.4547 3.72107 19.8667 4.13281C20.306 4.57215 20.306 5.28576 19.8667 5.7251L18.8062 6.78564C18.367 7.22467 17.6547 7.22444 17.2153 6.78564C16.776 6.34636 16.7761 5.63418 17.2153 5.19482L18.2759 4.13281L18.3608 4.05664ZM10.8755 3.5V2C10.8755 1.37868 11.3792 0.875 12.0005 0.875C12.6216 0.875264 13.1255 1.37884 13.1255 2V3.5C13.1255 4.12116 12.6216 4.62474 12.0005 4.625C11.3792 4.625 10.8755 4.12132 10.8755 3.5Z" fill="currentColor"/>
+    </svg>
+  );
+}; 

package/src/components/switch.tsx

@@ -0,0 +1,29 @@
+"use client"
+
+import * as React from "react"
+import * as SwitchPrimitives from "@radix-ui/react-switch"
+
+import { cn } from "../utils/cn"
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-6 w-11 shrink-0 items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className,
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
+      )}
+    />
+  </SwitchPrimitives.Root>
+))
+Switch.displayName = SwitchPrimitives.Root.displayName
+
+export { Switch }

package/src/components/textarea.tsx

@@ -0,0 +1,22 @@
+import * as React from "react"
+
+import { cn } from "../utils/cn"
+
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({ className, ...props }, ref) => {
+  return (
+    <textarea
+      className={cn(
+        "flex min-h-[80px] w-full rounded-md border border-ods-border bg-ods-card px-3 py-2 text-h4 placeholder:text-ods-text-secondary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-accent focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:bg-ods-bg",
+        "touch-manipulation", // Prevent double-tap zoom
+        className,
+      )}
+      ref={ref}
+      {...props}
+    />
+  )
+})
+Textarea.displayName = "Textarea"
+
+export { Textarea }

package/src/components/ui/button/button.tsx

@@ -55,6 +55,15 @@ const buttonVariants = cva(
         // metadata rather than CTAs — author-page social rows, share rows.
         // Pair with variant="transparent" for the ghost treatment.
         'icon-sm': 'p-[var(--spacing-system-xxs)] h-8 w-8 [&_svg]:h-4 [&_svg]:w-4',
+        // 20px inline glyph for affordances that sit INSIDE a line of text —
+        // an info hint beside a badge, a copy glyph after an id. `icon-sm`'s
+        // 32px target is correct for a metadata row but visually swamps a
+        // 10px badge or a 14px label, so hosts were reaching for className
+        // overrides to shrink it. Below the WCAG 2.5.8 target floor on purpose:
+        // this is only for glyphs whose information is ALSO available another
+        // way (tooltip content mirrored into an aria-describedby node), never
+        // for a sole means of performing an action.
+        'icon-inline': 'p-0 h-5 w-5 min-h-0 min-w-0 shrink-0 [&_svg]:h-3.5 [&_svg]:w-3.5',
         // Bare 56px media glyph (play / unmute over video). A size variant so
         // hosts stop re-implementing a <button> to escape the 20px svg cap.
         'icon-glyph': 'p-0 h-14 w-14 [&_svg]:h-14 [&_svg]:w-14',