@discourser/design-system 0.9.3 → 0.9.4

package/src/components/Slider.tsx

@@ -0,0 +1,156 @@
+'use client'
+import { ark } from '@ark-ui/react/factory'
+import { Slider, useSliderContext } from '@ark-ui/react/slider'
+import type React from 'react'
+import { type ComponentProps, forwardRef, createContext, useContext } from 'react'
+import { slider } from 'styled-system/recipes'
+import type { RecipeVariantProps } from 'styled-system/types/recipe'
+
+// Create StyleContext for child components
+type SliderVariantProps = RecipeVariantProps<typeof slider>
+const StyleContextInternal = createContext<ReturnType<typeof slider> | null>(null)
+
+// Custom Root component that applies Panda styles while passing all props to Ark UI
+export const Root = forwardRef<HTMLDivElement, ComponentProps<typeof Slider.Root> & SliderVariantProps & { colorPalette?: string }>(
+  function SliderRoot(props, ref) {
+    const { orientation, size, variant, colorPalette, className, ...arkProps } = props
+
+    // Generate Panda CSS classes using the recipe
+    const styles = slider({ orientation, size, variant })
+
+    // Build className with color palette and custom classes
+    const colorPaletteClass = colorPalette ? `color-palette_${colorPalette}` : ''
+    const combinedClassName = [styles.root, colorPaletteClass, className].filter(Boolean).join(' ')
+
+    // Pass ALL props including orientation to Ark UI, and add Panda CSS classes
+    return (
+      <StyleContextInternal.Provider value={styles}>
+        <Slider.Root
+          ref={ref}
+          orientation={orientation}
+          className={combinedClassName}
+          {...arkProps}
+        />
+      </StyleContextInternal.Provider>
+    )
+  }
+)
+
+// Create typed wrapper for each component
+const createStyledComponent = (
+  Component: typeof Slider.Control,
+  slot: keyof ReturnType<typeof slider>,
+  displayName: string
+) => {
+  const StyledComponent = forwardRef<HTMLDivElement, ComponentProps<typeof Component>>((props, ref) => {
+    const styles = useContext(StyleContextInternal)
+    const slotClass = styles?.[slot]
+    const { className, ...rest } = props
+    return <Component ref={ref} className={`${slotClass} ${className || ''}`.trim()} {...rest} />
+  })
+  StyledComponent.displayName = displayName
+  return StyledComponent
+}
+
+export const Control = createStyledComponent(Slider.Control, 'control', 'Control')
+export const Track = createStyledComponent(Slider.Track, 'track', 'Track')
+export const Range = createStyledComponent(Slider.Range, 'range', 'Range')
+
+export const Thumb = forwardRef<HTMLDivElement, ComponentProps<typeof Slider.Thumb>>((props, ref) => {
+  const styles = useContext(StyleContextInternal)
+  const slotClass = styles?.thumb
+  const { className, ...rest } = props
+  return <Slider.Thumb ref={ref} className={`${slotClass} ${className || ''}`.trim()} {...rest} />
+})
+Thumb.displayName = 'Thumb'
+
+// eslint-disable-next-line no-undef
+export const Label = forwardRef<HTMLLabelElement, ComponentProps<typeof Slider.Label>>((props, ref) => {
+  const styles = useContext(StyleContextInternal)
+  const slotClass = styles?.label
+  const { className, ...rest } = props
+  return <Slider.Label ref={ref} className={`${slotClass} ${className || ''}`.trim()} {...rest} />
+})
+Label.displayName = 'Label'
+
+export const ValueText = forwardRef<HTMLDivElement, ComponentProps<typeof Slider.ValueText>>((props, ref) => {
+  const styles = useContext(StyleContextInternal)
+  const slotClass = styles?.valueText
+  const { className, ...rest } = props
+  return <Slider.ValueText ref={ref} className={`${slotClass} ${className || ''}`.trim()} {...rest} />
+})
+ValueText.displayName = 'ValueText'
+
+// eslint-disable-next-line no-undef
+export const Marker = forwardRef<HTMLSpanElement, ComponentProps<typeof Slider.Marker>>((props, ref) => {
+  const styles = useContext(StyleContextInternal)
+  const slotClass = styles?.marker
+  const { className, ...rest } = props
+  return <Slider.Marker ref={ref} className={`${slotClass} ${className || ''}`.trim()} {...rest} />
+})
+Marker.displayName = 'Marker'
+
+export const MarkerGroup = forwardRef<HTMLDivElement, ComponentProps<typeof Slider.MarkerGroup>>((props, ref) => {
+  const styles = useContext(StyleContextInternal)
+  const slotClass = styles?.markerGroup
+  const { className, ...rest } = props
+  return <Slider.MarkerGroup ref={ref} className={`${slotClass} ${className || ''}`.trim()} {...rest} />
+})
+MarkerGroup.displayName = 'MarkerGroup'
+
+export const MarkerIndicator = forwardRef<HTMLDivElement, ComponentProps<typeof ark.div>>((props, ref) => {
+  const styles = useContext(StyleContextInternal)
+  const slotClass = styles?.markerIndicator
+  const { className, ...rest } = props
+  return <ark.div ref={ref} className={`${slotClass} ${className || ''}`.trim()} {...rest} />
+})
+MarkerIndicator.displayName = 'MarkerIndicator'
+
+export const DraggingIndicator = forwardRef<HTMLDivElement, ComponentProps<typeof Slider.DraggingIndicator>>((props, ref) => {
+  const styles = useContext(StyleContextInternal)
+  const slotClass = styles?.draggingIndicator
+  const { className, ...rest } = props
+  return <Slider.DraggingIndicator ref={ref} className={`${slotClass} ${className || ''}`.trim()} {...rest} />
+})
+DraggingIndicator.displayName = 'DraggingIndicator'
+
+export const HiddenInput = Slider.HiddenInput
+
+export { SliderContext as Context } from '@ark-ui/react/slider'
+
+export type RootProps = ComponentProps<typeof Root>
+export type MarkerGroupProps = ComponentProps<typeof MarkerGroup>
+export type ThumbProps = ComponentProps<typeof Thumb>
+
+export interface MarksProps extends MarkerGroupProps {
+  marks?: Array<number | { value: number; label: React.ReactNode }> | undefined
+}
+
+export const Marks = forwardRef<HTMLDivElement, MarksProps>(function Marks(props, ref) {
+  const { marks, ...rest } = props
+  if (!marks?.length) return null
+
+  return (
+    <MarkerGroup ref={ref} {...rest}>
+      {marks.map((mark, index) => {
+        const value = typeof mark === 'number' ? mark : mark.value
+        const label = typeof mark === 'number' ? undefined : mark.label
+        return (
+          <Marker key={index} value={value}>
+            <MarkerIndicator />
+            {label != null && <span>{label}</span>}
+          </Marker>
+        )
+      })}
+    </MarkerGroup>
+  )
+})
+
+export const Thumbs = (props: Omit<ThumbProps, 'index'>) => {
+  const slider = useSliderContext()
+  return slider.value.map((_, index) => (
+    <Thumb key={index} index={index} {...props}>
+      <HiddenInput />
+    </Thumb>
+  ))
+}

package/src/components/Spinner.tsx

@@ -0,0 +1,7 @@
+import { ark } from '@ark-ui/react/factory'
+import type { ComponentProps } from 'react'
+import { styled } from 'styled-system/jsx'
+import { spinner } from 'styled-system/recipes'
+
+export type SpinnerProps = ComponentProps<typeof Spinner>
+export const Spinner = styled(ark.span, spinner)

package/src/components/Switch.tsx

@@ -0,0 +1,19 @@
+'use client'
+import { Switch } from '@ark-ui/react/switch'
+import type { ComponentProps } from 'react'
+import { createStyleContext } from 'styled-system/jsx'
+import { switchComponent } from 'styled-system/recipes'
+
+const { withProvider, withContext } = createStyleContext(switchComponent)
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root = withProvider(Switch.Root, 'root')
+export const Label = withContext(Switch.Label, 'label')
+export const Thumb = withContext(Switch.Thumb, 'thumb')
+export const HiddenInput = Switch.HiddenInput
+
+export const Control = withContext(Switch.Control, 'control', {
+  defaultProps: { children: <Thumb /> },
+})
+
+export { SwitchContext as Context } from '@ark-ui/react/switch'

package/src/components/Tabs.tsx

@@ -0,0 +1,17 @@
+'use client'
+import { Tabs } from '@ark-ui/react/tabs'
+import type { ComponentProps } from 'react'
+import { createStyleContext } from 'styled-system/jsx'
+import { tabs } from 'styled-system/recipes'
+
+const { withProvider, withContext } = createStyleContext(tabs)
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root = withProvider(Tabs.Root, 'root')
+export const RootProvider = withProvider(Tabs.RootProvider, 'root')
+export const List = withContext(Tabs.List, 'list')
+export const Trigger = withContext(Tabs.Trigger, 'trigger')
+export const Content = withContext(Tabs.Content, 'content')
+export const Indicator = withContext(Tabs.Indicator, 'indicator')
+
+export { TabsContext as Context } from '@ark-ui/react/tabs'

package/src/components/Textarea.tsx

@@ -0,0 +1,7 @@
+import { Field } from '@ark-ui/react/field'
+import type { ComponentProps } from 'react'
+import { styled } from 'styled-system/jsx'
+import { textarea } from 'styled-system/recipes'
+
+export type TextareaProps = ComponentProps<typeof Textarea>
+export const Textarea = styled(Field.Textarea, textarea)

package/src/components/Toast.tsx

@@ -0,0 +1,96 @@
+'use client'
+import { Portal } from '@ark-ui/react/portal'
+import { Toaster as ArkToaster, createToaster, Toast, useToastContext } from '@ark-ui/react/toast'
+import type React from 'react'
+import { type ComponentPropsWithRef, forwardRef } from 'react'
+import { createStyleContext, Stack, styled } from 'styled-system/jsx'
+import { toast } from 'styled-system/recipes'
+import { CloseButton } from './CloseButton'
+import { Icon, type IconProps } from './Icon'
+import { Spinner } from './Spinner'
+
+const CheckCircleIcon = () => (
+  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
+    <path d="m9 11 3 3L22 4"></path>
+  </svg>
+)
+
+const CircleAlertIcon = () => (
+  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <circle cx="12" cy="12" r="10"></circle>
+    <line x1="12" x2="12" y1="8" y2="12"></line>
+    <line x1="12" x2="12.01" y1="16" y2="16"></line>
+  </svg>
+)
+
+const CircleXIcon = () => (
+  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <circle cx="12" cy="12" r="10"></circle>
+    <path d="m15 9-6 6"></path>
+    <path d="m9 9 6 6"></path>
+  </svg>
+)
+
+const { withProvider, withContext } = createStyleContext(toast)
+
+const Root = withProvider(Toast.Root, 'root')
+const Title = withContext(Toast.Title, 'title')
+const Description = withContext(Toast.Description, 'description')
+const ActionTrigger = withContext(Toast.ActionTrigger, 'actionTrigger')
+const CloseTrigger = withContext(Toast.CloseTrigger, 'closeTrigger')
+const StyledToaster = styled(ArkToaster)
+
+const iconMap: Record<string, React.ElementType> = {
+  warning: CircleAlertIcon,
+  success: CheckCircleIcon,
+  error: CircleXIcon,
+}
+
+// eslint-disable-next-line no-undef
+const Indicator = forwardRef<SVGSVGElement, IconProps & ComponentPropsWithRef<'svg'>>(function ToastIndicator(props, ref) {
+  const toast = useToastContext()
+
+  const StatusIcon = iconMap[toast.type]
+  if (!StatusIcon) return null
+
+  return (
+    <Icon ref={ref} data-type={toast.type} {...props}>
+      <StatusIcon />
+    </Icon>
+  )
+})
+
+export const toaster: ReturnType<typeof createToaster> = createToaster({
+  placement: 'bottom-end',
+  pauseOnPageIdle: true,
+  overlap: true,
+  max: 5,
+})
+
+export const Toaster = () => {
+  return (
+    <Portal>
+      <StyledToaster toaster={toaster} insetInline={{ mdDown: '4' }}>
+        {(toast) => (
+          <Root>
+            {toast.type === 'loading' ? <Spinner color="colorPalette.plain.fg" /> : <Indicator />}
+
+            <Stack gap="3" alignItems="start">
+              <Stack gap="1">
+                {toast.title && <Title>{toast.title}</Title>}
+                {toast.description && <Description>{toast.description}</Description>}
+              </Stack>
+              {toast.action && <ActionTrigger>{toast.action.label}</ActionTrigger>}
+            </Stack>
+            {toast.closable && (
+              <CloseTrigger asChild>
+                <CloseButton size="sm" />
+              </CloseTrigger>
+            )}
+          </Root>
+        )}
+      </StyledToaster>
+    </Portal>
+  )
+}

package/src/components/Tooltip.tsx

@@ -0,0 +1,65 @@
+'use client'
+import { Portal } from '@ark-ui/react/portal'
+import { Tooltip as ArkTooltip } from '@ark-ui/react/tooltip'
+import type React from 'react'
+import { type ComponentProps, forwardRef } from 'react'
+import { createStyleContext } from 'styled-system/jsx'
+import { tooltip } from 'styled-system/recipes'
+
+const { withRootProvider, withContext } = createStyleContext(tooltip)
+
+type RootProps = ComponentProps<typeof Root>
+type ContentProps = ComponentProps<typeof Content>
+const Root = withRootProvider(ArkTooltip.Root, {
+  defaultProps: { unmountOnExit: true, lazyMount: true },
+})
+const Arrow = withContext(ArkTooltip.Arrow, 'arrow')
+const ArrowTip = withContext(ArkTooltip.ArrowTip, 'arrowTip')
+const Content = withContext(ArkTooltip.Content, 'content')
+const Positioner = withContext(ArkTooltip.Positioner, 'positioner')
+const Trigger = withContext(ArkTooltip.Trigger, 'trigger')
+
+export { TooltipContext as Context } from '@ark-ui/react/tooltip'
+
+export interface TooltipProps extends Omit<RootProps, 'content'> {
+  showArrow?: boolean
+  portalled?: boolean
+  portalRef?: React.RefObject<HTMLElement | null>
+  children: React.ReactNode | undefined
+  content: React.ReactNode | string
+  contentProps?: ContentProps
+  disabled?: boolean
+}
+
+export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(function Tooltip(props, ref) {
+  const {
+    showArrow,
+    children,
+    disabled,
+    portalled = true,
+    content,
+    contentProps,
+    portalRef,
+    ...rootProps
+  } = props
+
+  if (disabled) return children
+
+  return (
+    <Root {...rootProps}>
+      <Trigger asChild>{children}</Trigger>
+      <Portal disabled={!portalled} container={portalRef}>
+        <Positioner>
+          <Content ref={ref} {...contentProps}>
+            {showArrow && (
+              <Arrow>
+                <ArrowTip />
+              </Arrow>
+            )}
+            {content}
+          </Content>
+        </Positioner>
+      </Portal>
+    </Root>
+  )
+})

package/src/components/index.ts

@@ -0,0 +1,48 @@
+// Simple Components (directly usable)
+// Button - export directly, Group available via separate ButtonGroup export
+export {
+  Button,
+  ButtonGroup,
+  type ButtonProps,
+  type ButtonGroupProps,
+} from './Button';
+
+// IconButton (simple component)
+export { IconButton, type IconButtonProps } from './IconButton';
+
+// Form Components (simple)
+export { Input, type InputProps } from './Input';
+export { InputAddon, type InputAddonProps } from './InputAddon';
+export { InputGroup, type InputGroupProps } from './InputGroup';
+export { Textarea, type TextareaProps } from './Textarea';
+
+// Typography Components (simple)
+export { Heading, type HeadingProps } from './Heading';
+
+// Feedback & Status Components (simple)
+export { Badge, type BadgeProps } from './Badge';
+export { Spinner, type SpinnerProps } from './Spinner';
+export { Toaster, toaster } from './Toast';
+
+// Compound Components (namespace pattern)
+export * as Card from './Card';
+export * as Dialog from './Dialog';
+export * as Switch from './Switch';
+export * as Accordion from './Accordion';
+export * as Drawer from './Drawer';
+export * as Tabs from './Tabs';
+export * as Checkbox from './Checkbox';
+export * as RadioGroup from './RadioGroup';
+export * as Select from './Select';
+export * as Slider from './Slider';
+export * as Avatar from './Avatar';
+export * as Progress from './Progress';
+export * as Skeleton from './Skeleton';
+export * as Popover from './Popover';
+export * as Tooltip from './Tooltip';
+
+// Utility Components (namespace pattern - may have multiple exports)
+export * as CloseButton from './CloseButton';
+export * as Icon from './Icon';
+export * as AbsoluteCenter from './AbsoluteCenter';
+export * as Group from './Group';

package/src/contracts/design-language.contract.ts

@@ -0,0 +1,198 @@
+/**
+ * Design Language Contract
+ *
+ * Any aesthetic (M3, Carbon, Fluent, custom) must implement this interface.
+ * This enables swapping aesthetics by changing one import.
+ */
+
+export interface DesignLanguageContract {
+  name: string;
+  version: string;
+  colors: ColorPalettes;
+  semantic: SemanticColors;
+  semanticDark?: SemanticColors; // Optional dark theme overrides
+  typography: TypographyConfig;
+  spacing: SpacingScale;
+  shape: ShapeConfig;
+  elevation: ElevationConfig;
+  motion: MotionConfig;
+  border: BorderConfig;
+}
+
+// Color Types
+export interface ColorPalettes {
+  primary: TonalPalette;
+  secondary: TonalPalette;
+  tertiary: TonalPalette;
+  neutral: TonalPalette;
+  neutralVariant: TonalPalette;
+  error: TonalPalette;
+}
+
+export interface TonalPalette {
+  0: string;
+  10: string;
+  20: string;
+  30: string;
+  40: string;
+  50: string;
+  60: string;
+  70: string;
+  80: string;
+  90: string;
+  95: string;
+  99: string;
+  100: string;
+}
+
+export interface SemanticColors {
+  primary: string;
+  onPrimary: string;
+  primaryContainer: string;
+  onPrimaryContainer: string;
+  secondary: string;
+  onSecondary: string;
+  secondaryContainer: string;
+  onSecondaryContainer: string;
+  tertiary: string;
+  onTertiary: string;
+  tertiaryContainer: string;
+  onTertiaryContainer: string;
+  error: string;
+  onError: string;
+  errorContainer: string;
+  onErrorContainer: string;
+  surface: string;
+  onSurface: string;
+  surfaceVariant: string;
+  onSurfaceVariant: string;
+  surfaceContainerLowest: string;
+  surfaceContainerLow: string;
+  surfaceContainer: string;
+  surfaceContainerHigh: string;
+  surfaceContainerHighest: string;
+  outline: string;
+  outlineVariant: string;
+  inverseSurface: string;
+  inverseOnSurface: string;
+  inversePrimary: string;
+  background: string;
+  onBackground: string;
+  scrim: string;
+  shadow: string;
+}
+
+// Typography Types
+export interface TypographyConfig {
+  fonts: {
+    display: string;
+    body: string;
+    mono: string;
+  };
+  scale: TypographyScale;
+}
+
+export interface TypographyScale {
+  displayLarge: TypeStyle;
+  displayMedium: TypeStyle;
+  displaySmall: TypeStyle;
+  headlineLarge: TypeStyle;
+  headlineMedium: TypeStyle;
+  headlineSmall: TypeStyle;
+  titleLarge: TypeStyle;
+  titleMedium: TypeStyle;
+  titleSmall: TypeStyle;
+  bodyLarge: TypeStyle;
+  bodyMedium: TypeStyle;
+  bodySmall: TypeStyle;
+  labelLarge: TypeStyle;
+  labelMedium: TypeStyle;
+  labelSmall: TypeStyle;
+}
+
+export interface TypeStyle {
+  fontSize: string;
+  lineHeight: string;
+  fontWeight: string;
+  letterSpacing: string;
+  fontFamily?: 'display' | 'body' | 'mono';
+}
+
+// Spacing Types
+export interface SpacingScale {
+  none: string;
+  xxs: string;
+  xs: string;
+  sm: string;
+  md: string;
+  lg: string;
+  xl: string;
+  xxl: string;
+  xxxl: string;
+}
+
+// Shape Types
+export interface ShapeConfig {
+  radii: RadiiScale;
+  style: 'sharp' | 'rounded' | 'soft' | 'organic';
+}
+
+export interface RadiiScale {
+  none: string;
+  extraSmall: string;
+  small: string;
+  medium: string;
+  large: string;
+  extraLarge: string;
+  full: string;
+}
+
+// Elevation Types
+export interface ElevationConfig {
+  levels: ElevationScale;
+  style: 'shadow' | 'border' | 'blur' | 'flat';
+}
+
+export interface ElevationScale {
+  level0: string;
+  level1: string;
+  level2: string;
+  level3: string;
+  level4: string;
+  level5: string;
+}
+
+// Motion Types
+export interface MotionConfig {
+  durations: DurationScale;
+  easings: EasingScale;
+  style: 'expressive' | 'productive' | 'minimal';
+}
+
+export interface DurationScale {
+  instant: string;
+  fast: string;
+  normal: string;
+  slow: string;
+  slower: string;
+}
+
+export interface EasingScale {
+  standard: string;
+  standardDecelerate: string;
+  standardAccelerate: string;
+  emphasized: string;
+  emphasizedDecelerate: string;
+  emphasizedAccelerate: string;
+}
+
+// Border Types
+export interface BorderConfig {
+  widths: BorderWidthScale;
+}
+
+export interface BorderWidthScale {
+  thin: string;
+  medium: string;
+  thick: string;
+}

package/src/global.css

@@ -0,0 +1,4 @@
+/* Google Fonts */
+@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,300;1,9..144,400;1,9..144,500;1,9..144,600;1,9..144,700&family=Poppins:wght@300;400;500;600;700&family=JetBrains+Mono:wght@300;400;500;600;700&display=swap');
+
+@layer reset, base, tokens, recipes, utilities;

package/src/index.ts

@@ -0,0 +1,18 @@
+// Components
+// Pipeline validation: Testing automated release workflow
+export * from './components';
+
+// Recipes (for direct usage)
+export * from './recipes';
+
+// Language system
+export * from './languages';
+
+// Contracts
+export type * from './contracts/design-language.contract';
+
+// Utilities
+export { cn } from './utils/cn';
+
+// Panda CSS Preset
+export { discourserPandaPreset } from './preset';

package/src/languages/index.ts

@@ -0,0 +1,9 @@
+// Export the active language
+// Change this import to switch aesthetics
+export { material3Language as activeLanguage } from './material3.language';
+
+// Re-export transformer
+export { transformToPandaTheme } from './transform';
+
+// Re-export types
+export type { DesignLanguageContract } from '../contracts/design-language.contract';