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

package/src/components/openframe-logo.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+
+export const OpenFrameLogo = ({ className, lowerPathColor, upperPathColor,  ...props }: { className?: string, lowerPathColor?: string, upperPathColor?: string } & React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      {...props}
+      className={className}
+      width="32"
+      height="32"
+      viewBox="0 0 32 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      style={{
+        '--fill-0': 'currentColor',
+        ...props.style
+      } as React.CSSProperties}
+    >
+      <g>
+        <g>
+          {/* White squares - top right, bottom left, bottom right, bottom center */}
+          <path
+            d="M21.3333 16.5333C21.3333 16.2388 21.5721 16 21.8667 16H26.1333C26.4279 16 26.6667 16.2388 26.6667 16.5333V20.8C26.6667 21.0946 26.4279 21.3333 26.1333 21.3333H21.8667C21.5721 21.3333 21.3333 21.0946 21.3333 20.8V16.5333Z"
+            fill={lowerPathColor ?? '#ffffff'}
+          />
+          <path
+            d="M16 21.8667C16 21.5721 16.2388 21.3333 16.5333 21.3333H20.8C21.0946 21.3333 21.3333 21.5721 21.3333 21.8667V26.1333C21.3333 26.4279 21.0946 26.6667 20.8 26.6667H16.5333C16.2388 26.6667 16 26.4279 16 26.1333V21.8667Z"
+            fill={lowerPathColor ?? '#ffffff'}
+          />
+          <path
+            d="M26.6667 21.8667C26.6667 21.5721 26.9054 21.3333 27.2 21.3333H31.4667C31.7612 21.3333 32 21.5721 32 21.8667V26.1333C32 26.4279 31.7612 26.6667 31.4667 26.6667H27.2C26.9054 26.6667 26.6667 26.4279 26.6667 26.1333V21.8667Z"
+            fill={lowerPathColor ?? '#ffffff'}
+          />
+          <path
+            d="M21.3333 27.2C21.3333 26.9054 21.5721 26.6667 21.8667 26.6667H26.1333C26.4279 26.6667 26.6667 26.9054 26.6667 27.2V31.4667C26.6667 31.7612 26.4279 32 26.1333 32H21.8667C21.5721 32 21.3333 31.7612 21.3333 31.4667V27.2Z"
+            fill={lowerPathColor ?? '#ffffff'}
+          />
+        </g>
+        {/* Black frame/border */}
+        <path
+          d="M30.9333 0H1.06667C0.477563 0 0 0.477564 0 1.06667V30.9333C0 31.5224 0.477563 32 1.06667 32H14.9333C15.5224 32 16 31.5224 16 30.9333V27.7333C16 27.1442 15.5224 26.6667 14.9333 26.6667H5.86667C5.57211 26.6667 5.33333 26.4279 5.33333 26.1333V5.86667C5.33333 5.57211 5.57211 5.33333 5.86667 5.33333H26.1333C26.4279 5.33333 26.6667 5.57212 26.6667 5.86667V14.9333C26.6667 15.5224 27.1442 16 27.7333 16H30.9333C31.5224 16 32 15.5224 32 14.9333V1.06667C32 0.477563 31.5224 0 30.9333 0Z"
+          fill={upperPathColor ?? '#1A1A1A'}
+        />
+      </g>
+    </svg>
+  );
+};

package/src/components/openmsp-logo.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+interface OpenmspLogoProps extends React.SVGProps<SVGSVGElement> {
+  className?: string;
+  frontBubbleColor?: string;
+  innerFrontBubbleColor?: string;
+  backBubbleColor?: string;
+  color?: string;
+}
+
+export function OpenmspLogo({ className = '', frontBubbleColor = '#000000', innerFrontBubbleColor = '#ffffff', backBubbleColor = '#ffffff', ...props }: OpenmspLogoProps) {
+  return (
+    <svg
+      width="97"
+      height="96"
+      viewBox="0 0 97 96"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      {...props}
+    >
+      <path
+        d="M73.933 0C75.7003 0 77.133 1.43269 77.133 3.2V54.4C77.133 56.1673 75.7003 57.6 73.933 57.6H3.53301C1.7657 57.6 0.333008 56.1673 0.333008 54.4V3.2C0.333008 1.43269 1.7657 0 3.53301 0H73.933ZM10.1076 47.6494C10.1076 48.0912 10.4658 48.4494 10.9076 48.4494H66.5584C67.0002 48.4494 67.3584 48.0912 67.3584 47.6494V9.95059C67.3584 9.50876 67.0002 9.15059 66.5584 9.15059H10.9076C10.4658 9.15059 10.1076 9.50876 10.1076 9.95059V47.6494Z"
+        fill={backBubbleColor} />
+      <path
+        d="M19.5332 22.4C19.5332 20.6326 20.9659 19.2 22.7332 19.2H93.1332C94.9005 19.2 96.3332 20.6326 96.3332 22.4V76.8C96.3332 78.2222 95.3945 79.4737 94.0292 79.8719L39.7572 95.7013C39.2452 95.8506 38.7332 95.4666 38.7332 94.9333V80C38.7332 79.5581 38.375 79.2 37.9332 79.2H22.7332C20.9659 79.2 19.5332 77.7673 19.5332 76V22.4Z"
+        fill={innerFrontBubbleColor} />
+      <path
+        d="M93.1332 19.2C94.9005 19.2 96.3332 20.6326 96.3332 22.4V76.8C96.3332 78.2222 95.3945 79.4737 94.0292 79.8719L39.7572 95.7013C39.2452 95.8506 38.7332 95.4666 38.7332 94.9333V80C38.7332 79.5581 38.375 79.2 37.9332 79.2H22.7332C20.9659 79.2 19.5332 77.7673 19.5332 76V22.4C19.5332 20.6326 20.9659 19.2 22.7332 19.2H93.1332ZM48.3377 82.1286C48.3355 82.6633 48.8484 83.0497 49.3617 82.9L86.1572 72.1672C86.4985 72.0676 86.7332 71.7547 86.7332 71.3992V29.6C86.7332 29.1581 86.375 28.8 85.9332 28.8H29.9332C29.4914 28.8 29.1332 29.1581 29.1332 29.6V68.8C29.1332 69.2418 29.4914 69.6 29.9332 69.6H47.5869C48.03 69.6 48.3887 69.9602 48.3869 70.4033L48.3377 82.1286Z"
+        fill={frontBubbleColor} />
+      <circle
+        cx="45.1334" cy="44.8" r="6.4"
+        fill={frontBubbleColor} />
+    </svg>
+  );
+}

package/src/components/plus-circle-icon.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+
+interface PlusCircleIconProps extends React.SVGProps<SVGSVGElement> {
+  className?: string
+  whiteOverlay?: boolean
+  iconSize?: number
+}
+
+export function PlusCircleIcon({ className, whiteOverlay = false, iconSize = 24, ...props }: PlusCircleIconProps) {
+  return (
+    <svg 
+      width={iconSize} 
+      height={iconSize} 
+      viewBox="0 0 24 24"
+      fill="none" 
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      {...props}
+    >
+      <path 
+        d="M20.8745 12.0005C20.8745 7.09912 16.9018 3.12526 12.0005 3.125C7.09896 3.125 3.125 7.09896 3.125 12.0005C3.12526 16.9018 7.09912 20.8745 12.0005 20.8745C16.9016 20.8742 20.8742 16.9016 20.8745 12.0005ZM23.1245 12.0005C23.1242 18.1443 18.1443 23.1242 12.0005 23.1245C5.85648 23.1245 0.875264 18.1444 0.875 12.0005C0.875 5.85632 5.85632 0.875 12.0005 0.875C18.1444 0.875264 23.1245 5.85648 23.1245 12.0005Z" 
+        fill={whiteOverlay ? "white" : "#5EA62E"}
+      />
+      <path 
+        d="M10.8755 15.9995V13.1255H8C7.37884 13.1255 6.87526 12.6216 6.875 12.0005C6.875 11.3792 7.37868 10.8755 8 10.8755H10.8755V8C10.8755 7.37868 11.3792 6.875 12.0005 6.875C12.6216 6.87526 13.1255 7.37884 13.1255 8V10.8755H15.9995L16.1152 10.8813C16.6824 10.9391 17.1245 11.4181 17.1245 12.0005C17.1243 12.5827 16.6823 13.062 16.1152 13.1196L15.9995 13.1255H13.1255V15.9995C13.1255 16.6207 12.6216 17.1242 12.0005 17.1245C11.3792 17.1245 10.8755 16.6208 10.8755 15.9995Z" 
+        fill={whiteOverlay ? "white" : "#5EA62E"}
+      />
+    </svg>
+  )
+} 

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';