panelui-native 0.7.0 → 0.9.0

package/src/components/radio-group/index.tsx

@@ -1,3 +1,23 @@
+/**
+ * RadioGroup — one choice from a set.
+ *
+ * The group owns the value and hands each item its selected state through
+ * context, so an item is a thin pressable that reports its own value up and
+ * reads selection back down.
+ *
+ * Two shapes, chosen on the group and inherited by every item: `dot` is the
+ * classic label-beside-a-disc row; `card` turns the whole surface into the
+ * target — for pickable options where the disc is a confirmation rather than
+ * the thing you aim at. The card is the same treatment `Checkbox` offers, so a
+ * form mixing single- and multi-select choices reads as one family.
+ *
+ * ```tsx
+ * <RadioGroup value={plan} onValueChange={setPlan} variant="card">
+ *   <RadioGroup.Item value="pro" label="Pro" description="For growing teams" />
+ *   <RadioGroup.Item value="max" label="Max" description="Everything, uncapped" />
+ * </RadioGroup>
+ * ```
+ */
 import {
   createContext,
   forwardRef,
@@ -13,13 +33,50 @@ import Animated, {
   withSpring,
   withTiming,
 } from 'react-native-reanimated';
+import { tv, type VariantProps } from 'tailwind-variants';
 import { cn } from '../../utils/cn';
 import { Text } from '../../primitives/text';
 
+type RadioVariant = 'dot' | 'card';
+
+const itemVariants = tv({
+  slots: {
+    row: 'flex-row items-center gap-2.5',
+    indicator:
+      'h-5 w-5 items-center justify-center rounded-full border border-input bg-background',
+    label: 'text-sm text-foreground',
+    description: 'text-xs text-muted-foreground',
+  },
+  variants: {
+    variant: {
+      dot: {},
+      card: {
+        // The whole surface is the target; the disc moves to the trailing edge
+        // as a confirmation of the row, not the affordance for it.
+        row: 'w-full items-start justify-between gap-3 rounded-xl border border-border bg-card p-4',
+        label: 'text-base font-medium',
+      },
+    },
+    selected: {
+      true: {},
+    },
+    disabled: {
+      true: { row: 'opacity-50' },
+    },
+  },
+  compoundVariants: [
+    { variant: 'card', selected: true, class: { row: 'border-primary bg-accent' } },
+  ],
+  defaultVariants: {
+    variant: 'dot',
+  },
+});
+
 interface RadioGroupContextValue {
   value: string | undefined;
   onValueChange: (value: string) => void;
   disabled?: boolean;
+  variant: RadioVariant;
 }
 
 const RadioGroupContext = createContext<RadioGroupContextValue | null>(null);
@@ -29,14 +86,20 @@ export interface RadioGroupProps extends ViewProps {
   value?: string;
   onValueChange: (value: string) => void;
   disabled?: boolean;
+  /**
+   * `dot` is the label-beside-a-disc row. `card` makes the whole surface the
+   * target and highlights the selected option — for a plan picker or a
+   * settings choice where each option carries a description.
+   */
+  variant?: RadioVariant;
   children: ReactNode;
 }
 
 const RadioGroupRoot = forwardRef<View, RadioGroupProps>(
-  ({ className, value, onValueChange, disabled, children, ...props }, ref) => {
+  ({ className, value, onValueChange, disabled, variant = 'dot', children, ...props }, ref) => {
     const context = useMemo(
-      () => ({ value, onValueChange, disabled }),
-      [value, onValueChange, disabled]
+      () => ({ value, onValueChange, disabled, variant }),
+      [value, onValueChange, disabled, variant]
     );
 
     return (
@@ -59,12 +122,19 @@ export interface RadioGroupItemProps {
   className?: string;
   value: string;
   label?: string;
+  /** Secondary line under the label. Most at home in the `card` variant. */
+  description?: string;
   disabled?: boolean;
+  /** Hide the disc entirely — for a card whose selected fill is enough. */
+  hideIndicator?: boolean;
   children?: ReactNode;
 }
 
 const RadioGroupItem = forwardRef<View, RadioGroupItemProps>(
-  ({ className, value, label, disabled: itemDisabled, children }, ref) => {
+  (
+    { className, value, label, description, disabled: itemDisabled, hideIndicator, children },
+    ref
+  ) => {
     const context = useContext(RadioGroupContext);
     if (!context) {
       throw new Error('RadioGroup.Item must be used within a <RadioGroup>');
@@ -72,6 +142,7 @@ const RadioGroupItem = forwardRef<View, RadioGroupItemProps>(
 
     const selected = context.value === value;
     const disabled = itemDisabled || context.disabled;
+    const variant = context.variant;
     const progress = useSharedValue(selected ? 1 : 0);
 
     useEffect(() => {
@@ -85,6 +156,34 @@ const RadioGroupItem = forwardRef<View, RadioGroupItemProps>(
       transform: [{ scale: progress.value }],
     }));
 
+    const slots = itemVariants({ variant, selected, disabled: !!disabled });
+
+    const indicator = hideIndicator ? null : (
+      <View className={slots.indicator()}>
+        <Animated.View style={dotStyle} className="h-2.5 w-2.5 rounded-full bg-primary" />
+      </View>
+    );
+
+    // The card lays its text out first so the disc sits at the trailing edge;
+    // the dot row keeps the classic disc-then-label order.
+    const body =
+      variant === 'card' ? (
+        <>
+          <View className="flex-1 gap-1">
+            {label ? <Text className={slots.label()}>{label}</Text> : children}
+            {description ? (
+              <Text className={slots.description()}>{description}</Text>
+            ) : null}
+          </View>
+          {indicator}
+        </>
+      ) : (
+        <>
+          {indicator}
+          {label ? <Text className={slots.label()}>{label}</Text> : children}
+        </>
+      );
+
     return (
       <Pressable
         ref={ref}
@@ -93,20 +192,10 @@ const RadioGroupItem = forwardRef<View, RadioGroupItemProps>(
         accessibilityLabel={label}
         disabled={disabled}
         onPress={() => context.onValueChange(value)}
-        hitSlop={8}
-        className={cn(
-          'flex-row items-center gap-2.5',
-          disabled && 'opacity-50',
-          className
-        )}
+        hitSlop={variant === 'card' ? undefined : 8}
+        className={slots.row({ className })}
       >
-        <View className="h-5 w-5 items-center justify-center rounded-full border border-input bg-background">
-          <Animated.View
-            style={dotStyle}
-            className="h-2.5 w-2.5 rounded-full bg-primary"
-          />
-        </View>
-        {label ? <Text className="text-sm text-foreground">{label}</Text> : children}
+        {body}
       </Pressable>
     );
   }
@@ -116,3 +205,5 @@ RadioGroupItem.displayName = 'RadioGroup.Item';
 export const RadioGroup = Object.assign(RadioGroupRoot, {
   Item: RadioGroupItem,
 });
+
+export type { RadioVariant };

package/src/components/separator/index.tsx

@@ -0,0 +1,97 @@
+/**
+ * Separator — a rule between content.
+ *
+ * React Native has no `<hr>` and no border shorthand that survives a flex row,
+ * so a separator here is a view with a size on one axis and a stretch on the
+ * other. That is why orientation is a prop rather than something the layout
+ * infers: the component has to know which axis carries the thickness.
+ *
+ * ```tsx
+ * <Separator />
+ * <Separator orientation="vertical" />
+ * ```
+ *
+ * A vertical separator takes its length from the parent, so the parent needs a
+ * height — inside a `flex-row` with `items-stretch`, or with an explicit `h-*`
+ * on either the row or the separator itself. Without one it measures zero and
+ * nothing draws.
+ */
+import { forwardRef } from 'react';
+import { View, type ViewProps } from 'react-native';
+import { tv, type VariantProps } from 'tailwind-variants';
+
+const separatorVariants = tv({
+  base: 'bg-border',
+  variants: {
+    orientation: {
+      horizontal: 'w-full',
+      vertical: 'h-full',
+    },
+    variant: {
+      thin: '',
+      thick: '',
+    },
+  },
+  compoundVariants: [
+    // Thickness is on whichever axis is *not* the length, so it cannot be
+    // expressed by the orientation and variant classes independently.
+    { orientation: 'horizontal', variant: 'thin', class: 'h-px' },
+    { orientation: 'horizontal', variant: 'thick', class: 'h-1' },
+    { orientation: 'vertical', variant: 'thin', class: 'w-px' },
+    { orientation: 'vertical', variant: 'thick', class: 'w-1' },
+  ],
+  defaultVariants: {
+    orientation: 'horizontal',
+    variant: 'thin',
+  },
+});
+
+export interface SeparatorProps
+  extends ViewProps,
+    VariantProps<typeof separatorVariants> {
+  className?: string;
+  /**
+   * Thickness in pixels, overriding the variant. Sets the height of a
+   * horizontal separator and the width of a vertical one.
+   */
+  thickness?: number;
+  /**
+   * Whether the separator is only visual. A decorative separator is skipped by
+   * screen readers; set false when the split itself carries meaning — between
+   * two groups of menu items, say — and it is announced instead.
+   */
+  decorative?: boolean;
+}
+
+export const Separator = forwardRef<View, SeparatorProps>(
+  (
+    {
+      className,
+      orientation = 'horizontal',
+      variant,
+      thickness,
+      decorative = true,
+      style,
+      ...props
+    },
+    ref
+  ) => (
+    <View
+      ref={ref}
+      // `role` rather than `accessibilityRole` — React Native's older role list
+      // has no separator, the ARIA-aligned one does.
+      role={decorative ? 'none' : 'separator'}
+      accessible={!decorative}
+      aria-orientation={decorative ? undefined : orientation}
+      className={separatorVariants({ orientation, variant, className })}
+      style={
+        thickness !== undefined
+          ? [orientation === 'horizontal' ? { height: thickness } : { width: thickness }, style]
+          : style
+      }
+      {...props}
+    />
+  )
+);
+
+Separator.displayName = 'Separator';

package/src/components/surface/index.tsx

@@ -23,7 +23,7 @@ import { StyleSheet, View, type ViewProps } from 'react-native';
 import { tv, type VariantProps } from 'tailwind-variants';
 
 const surfaceVariants = tv({
-  base: 'overflow-hidden rounded-3xl p-4',
+  base: 'overflow-hidden rounded-3xl',
   variants: {
     variant: {
       default: 'bg-surface',
@@ -31,9 +31,22 @@ const surfaceVariants = tv({
       tertiary: 'bg-surface-tertiary',
       transparent: 'bg-transparent',
     },
+    padding: {
+      none: '',
+      sm: 'p-2.5',
+      default: 'p-4',
+      lg: 'p-6',
+    },
+    bordered: {
+      true: 'border border-border',
+    },
+    elevated: {
+      true: 'shadow-sm',
+    },
   },
   defaultVariants: {
     variant: 'default',
+    padding: 'default',
   },
 });
 
@@ -41,17 +54,30 @@ export interface SurfaceProps
   extends ViewProps,
     VariantProps<typeof surfaceVariants> {
   className?: string;
+  /**
+   * A hairline border. A surface the same colour as what it sits on needs one
+   * to read as a distinct plane rather than dissolving into the background.
+   */
+  bordered?: boolean;
+  /**
+   * A soft shadow lifting the surface off the page. Off by default because a
+   * nested surface reads its depth from its fill, not from a shadow it would
+   * only cast onto its parent.
+   */
+  elevated?: boolean;
+  /** Inner spacing. `none` is for a surface wrapping a bled image or a chart. */
+  padding?: 'none' | 'sm' | 'default' | 'lg';
 }
 
 export const Surface = forwardRef<View, SurfaceProps>(
-  ({ className, variant, style, ...props }, ref) => (
+  ({ className, variant, padding, bordered, elevated, style, ...props }, ref) => (
     <View
       ref={ref}
       // `borderCurve` has no Tailwind equivalent. On iOS it gives the
       // continuous (squircle) corner Apple uses, which is visibly smoother
       // than a circular arc at this radius; Android ignores it.
       style={[styles.root, style]}
-      className={surfaceVariants({ variant, className })}
+      className={surfaceVariants({ variant, padding, bordered, elevated, className })}
       {...props}
     />
   )

package/src/icons/index.tsx

@@ -462,3 +462,51 @@ export function SendIcon({ size = 16, color, ...props }: IconProps) {
     </Svg>
   );
 }
+
+/** Document with a folded corner — a file attachment. */
+export function FileIcon({ size = 16, color, ...props }: IconProps) {
+  const resolved = useResolvedColor(color, '#737373');
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" {...props}>
+      <Path
+        d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8zM14 3v5h5"
+        stroke={resolved}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
+/** Framed picture with a sun and a corner peak — an image attachment. */
+export function ImageIcon({ size = 16, color, ...props }: IconProps) {
+  const resolved = useResolvedColor(color, '#737373');
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" {...props}>
+      <Path
+        d="M4 4h16v16H4z M8.5 10a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM20 15l-4.5-4.5L6 20"
+        stroke={resolved}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
+/** A paperclip — attaching a file to a composer. */
+export function PaperclipIcon({ size = 16, color, ...props }: IconProps) {
+  const resolved = useResolvedColor(color, '#737373');
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" {...props}>
+      <Path
+        d="M21 8.5 11.3 18.2a4 4 0 0 1-5.6-5.6l9-9a2.5 2.5 0 0 1 3.6 3.6l-9 9a1 1 0 0 1-1.5-1.5l8.3-8.3"
+        stroke={resolved}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}

package/src/index.ts

@@ -50,6 +50,18 @@ export {
   type AvatarProps,
   type AvatarBadgeProps,
 } from './components/avatar';
+export {
+  Attachment,
+  type AttachmentProps,
+  type AttachmentGroupProps,
+  type AttachmentMediaProps,
+  type AttachmentContentProps,
+  type AttachmentTitleProps,
+  type AttachmentDescriptionProps,
+  type AttachmentActionsProps,
+  type AttachmentActionProps,
+  type AttachmentState,
+} from './components/attachment';
 export { Badge, type BadgeProps } from './components/badge';
 export {
   BottomSheet,
@@ -104,6 +116,39 @@ export {
   type ItemFooterProps,
 } from './components/item';
 export { Label, type LabelProps, type LabelTextProps } from './components/label';
+export {
+  LineChart,
+  useLineChart,
+  type LineChartProps,
+  type LineChartHandle,
+  type LineChartGridProps,
+  type LineChartLineProps,
+  type LineChartAreaProps,
+  type LineChartSkeletonProps,
+  type LineChartXAxisProps,
+  type LineChartTooltipProps,
+  type LineChartLegendProps,
+  type LineChartDatum,
+  type LineChartStatus,
+  type LineChartCurve,
+} from './components/line-chart';
+export {
+  Marker,
+  type MarkerProps,
+  type MarkerIconProps,
+  type MarkerContentProps,
+} from './components/marker';
+export {
+  MessageScroller,
+  useMessageScroller,
+  useMessageScrollerVisibility,
+  type MessageScrollerProps,
+  type MessageScrollerViewportProps,
+  type MessageScrollerContentProps,
+  type MessageScrollerItemProps,
+  type MessageScrollerButtonProps,
+  type MessageScrollerPosition,
+} from './components/message-scroller';
 export {
   Message,
   type MessageProps,
@@ -116,6 +161,17 @@ export {
   type MessageFooterProps,
   type MessageActionsProps,
 } from './components/message';
+export {
+  Popover,
+  type PopoverProps,
+  type PopoverTriggerProps,
+  type PopoverContentProps,
+  type PopoverArrowProps,
+  type PopoverCloseProps,
+  type PopoverPlacement,
+  type PopoverAlign,
+  type PopoverPresentation,
+} from './components/popover';
 export { Progress, type ProgressProps } from './components/progress';
 export {
   RadioGroup,
@@ -126,6 +182,7 @@ export {
   ScrollFade,
   type ScrollFadeProps,
 } from './components/scroll-fade';
+export { Separator, type SeparatorProps } from './components/separator';
 export { Shimmer, type ShimmerProps } from './components/shimmer';
 export { Skeleton, type SkeletonProps } from './components/skeleton';
 export { Spinner, type SpinnerProps } from './components/spinner';
@@ -186,11 +243,14 @@ export {
   ChevronLeftIcon,
   ChevronRightIcon,
   FacebookIcon,
+  FileIcon,
   GoogleIcon,
   IconColorProvider,
   InfoIcon,
+  ImageIcon,
   MoonIcon,
   PackageIcon,
+  PaperclipIcon,
   PlusSquareIcon,
   ReceiptIcon,
   SearchIcon,

package/src/primitives/scrim.tsx

@@ -0,0 +1,95 @@
+/**
+ * Scrim — the layer behind an overlay.
+ *
+ * An overlay needs the screen behind it to recede. There are two honest ways to
+ * do that: dim it, or blur it. Dimming is free and always works; blurring reads
+ * as more physical — the content behind stays legible as shape and colour while
+ * losing its detail — but it needs a native view to do it.
+ *
+ * `expo-blur` is resolved lazily and only when `blur` is asked for, so a project
+ * that never blurs anything installs nothing. When it is asked for and the
+ * package is missing, this falls back to a dim rather than failing: a blur you
+ * cannot draw is better shown as a darkened screen than as a crash.
+ *
+ * It fills its parent and does not intercept touches itself — the overlay layers
+ * its own dismiss `Pressable` over it — so it is purely the visual backdrop.
+ */
+import { type ComponentType } from 'react';
+import { StyleSheet, View, type ViewProps } from 'react-native';
+import Animated, { FadeIn, FadeOut } from 'react-native-reanimated';
+
+interface BlurViewProps {
+  intensity?: number;
+  tint?: 'light' | 'dark' | 'default' | 'systemMaterial';
+  style?: unknown;
+  children?: React.ReactNode;
+}
+
+/**
+ * `expo-blur`'s BlurView, or null when it is not installed. Resolved once at
+ * module load — the require is cheap and caching it avoids a try/catch on every
+ * render.
+ */
+const BlurView: ComponentType<BlurViewProps> | null = (() => {
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    const mod = require('expo-blur');
+    return (mod?.BlurView as ComponentType<BlurViewProps>) ?? null;
+  } catch {
+    return null;
+  }
+})();
+
+/** True when a real blur can be drawn — for a caller that wants to know. */
+export const hasBlur = BlurView !== null;
+
+export interface ScrimProps extends Omit<ViewProps, 'children'> {
+  /** Frost the backdrop instead of dimming it. Falls back to a dim if it can't. */
+  blur?: boolean;
+  /** Blur strength, 0–100. */
+  intensity?: number;
+  /** Which way the blur tints. */
+  tint?: 'light' | 'dark' | 'default' | 'systemMaterial';
+  /**
+   * The dim used when not blurring — and when blurring is asked for but
+   * unavailable. A popover passes a lighter one than a dialog.
+   */
+  dimClassName?: string;
+}
+
+export function Scrim({
+  blur = false,
+  intensity = 24,
+  tint = 'default',
+  dimClassName = 'bg-black/50',
+  style,
+  ...props
+}: ScrimProps) {
+  if (blur && BlurView) {
+    return (
+      <Animated.View
+        entering={FadeIn.duration(180)}
+        exiting={FadeOut.duration(150)}
+        style={[StyleSheet.absoluteFill, style]}
+        {...props}
+      >
+        {/* A faint dim under the blur so the frost has something to sit on —
+            a pure blur over a dark scene is nearly invisible. */}
+        <BlurView intensity={intensity} tint={tint} style={StyleSheet.absoluteFill} />
+        <View className="absolute inset-0 bg-black/10" />
+      </Animated.View>
+    );
+  }
+
+  return (
+    <Animated.View
+      entering={FadeIn.duration(150)}
+      exiting={FadeOut.duration(150)}
+      style={[StyleSheet.absoluteFill, style]}
+      className={dimClassName}
+      {...props}
+    />
+  );
+}
+
+Scrim.displayName = 'Scrim';

package/theme.css

@@ -67,6 +67,22 @@
   --color-destructive-soft: unset;
   --color-destructive-subtle: unset;
 
+  /*
+   * Chart series. A separate ramp from the status colours because they answer
+   * a different question: a status colour means something (this failed, this
+   * is fine), a series colour only has to be told apart from the other four.
+   * Ordered by prominence — chart-1 is the series the chart is about, and each
+   * theme starts it on that family's own accent.
+   *
+   * These are the tokens to override in your app's global.css, after the
+   * `panelui-native/theme.css` import, to put a chart on brand.
+   */
+  --color-chart-1: unset;
+  --color-chart-2: unset;
+  --color-chart-3: unset;
+  --color-chart-4: unset;
+  --color-chart-5: unset;
+
   /*
    * Radius scale. Themed rather than static: a theme is a shape as well as a
    * palette, so each family sets its own corner rounding. --radius-3xl is
@@ -143,6 +159,13 @@
       --color-warning-subtle: rgba(245, 158, 11, 0.08);
       --color-destructive-soft: rgba(239, 68, 68, 0.1);
       --color-destructive-subtle: rgba(239, 68, 68, 0.08);
+
+      /* chart series, in order of prominence */
+      --color-chart-1: #262626;
+      --color-chart-2: #3b82f6;
+      --color-chart-3: #10b981;
+      --color-chart-4: #f59e0b;
+      --color-chart-5: #8b5cf6;
     
       /* Panel shape scale */
       --radius-xs: 4px;
@@ -216,6 +239,13 @@
       --color-warning-subtle: rgba(245, 158, 11, 0.16);
       --color-destructive-soft: rgba(241, 87, 87, 0.06);
       --color-destructive-subtle: rgba(241, 87, 87, 0.16);
+
+      /* chart series, in order of prominence */
+      --color-chart-1: #fafafa;
+      --color-chart-2: #60a5fa;
+      --color-chart-3: #34d399;
+      --color-chart-4: #fbbf24;
+      --color-chart-5: #a78bfa;
     
       /* Panel shape scale */
       --radius-xs: 4px;
@@ -298,6 +328,13 @@
       --color-warning-subtle: rgba(245, 166, 35, 0.08);
       --color-destructive-soft: rgba(229, 72, 77, 0.1);
       --color-destructive-subtle: rgba(229, 72, 77, 0.08);
+
+      /* chart series, in order of prominence */
+      --color-chart-1: #0070f3;
+      --color-chart-2: #171717;
+      --color-chart-3: #7928ca;
+      --color-chart-4: #f5a623;
+      --color-chart-5: #0a9396;
     
       /* Moon shape scale */
       --radius-xs: 2px;
@@ -360,6 +397,13 @@
       --color-warning-subtle: rgba(245, 166, 35, 0.16);
       --color-destructive-soft: rgba(229, 72, 77, 0.1);
       --color-destructive-subtle: rgba(229, 72, 77, 0.16);
+
+      /* chart series, in order of prominence */
+      --color-chart-1: #3291ff;
+      --color-chart-2: #ededed;
+      --color-chart-3: #a855f7;
+      --color-chart-4: #fbbf24;
+      --color-chart-5: #2dd4bf;
     
       /* Moon shape scale */
       --radius-xs: 2px;
@@ -425,6 +469,13 @@
       --color-warning-subtle: rgba(245, 158, 11, 0.08);
       --color-destructive-soft: rgba(239, 68, 68, 0.1);
       --color-destructive-subtle: rgba(239, 68, 68, 0.08);
+
+      /* chart series, in order of prominence */
+      --color-chart-1: #24b47e;
+      --color-chart-2: #1f2937;
+      --color-chart-3: #2563eb;
+      --color-chart-4: #f59e0b;
+      --color-chart-5: #db2777;
     
       /* Grass shape scale */
       --radius-xs: 6px;
@@ -487,6 +538,13 @@
       --color-warning-subtle: rgba(245, 158, 11, 0.16);
       --color-destructive-soft: rgba(241, 87, 87, 0.08);
       --color-destructive-subtle: rgba(241, 87, 87, 0.16);
+
+      /* chart series, in order of prominence */
+      --color-chart-1: #3ecf8e;
+      --color-chart-2: #ededed;
+      --color-chart-3: #60a5fa;
+      --color-chart-4: #fbbf24;
+      --color-chart-5: #f472b6;
     
       /* Grass shape scale */
       --radius-xs: 6px;