@butternutbox/pawprint-native 0.0.1

package/src/components/molecules/Radio/Radio.tsx

@@ -0,0 +1,249 @@
+import React from "react"
+import { Pressable, View, PressableProps } from "react-native"
+import styled from "@emotion/native"
+import { useTheme } from "@emotion/react"
+import { Typography } from "../../atoms/Typography"
+import { Illustration, type IllustrationProps } from "../../atoms/Illustration"
+
+export type RadioOwnProps = {
+  value: string
+  variant?: "standalone" | "tile"
+  label?: React.ReactNode
+  subText?: React.ReactNode
+  asset?: IllustrationProps
+  disabled?: boolean
+  selected?: boolean
+  onSelect?: (value: string) => void
+}
+
+export type RadioProps = RadioOwnProps &
+  Omit<PressableProps, keyof RadioOwnProps | "children">
+
+const parseTokenValue = (value: string): number => parseFloat(value)
+
+const StyledRadioRoot = styled(Pressable)<{
+  radioGap: number
+  radioOpacity: number
+  radioPaddingVertical?: number
+  radioPaddingHorizontal?: number
+  radioMaxWidth?: number
+  radioBgColor?: string
+  radioBorderWidth?: number
+  radioBorderColor?: string
+  radioBorderRadius?: number
+}>(
+  ({
+    radioGap,
+    radioOpacity,
+    radioPaddingVertical,
+    radioPaddingHorizontal,
+    radioMaxWidth,
+    radioBgColor,
+    radioBorderWidth,
+    radioBorderColor,
+    radioBorderRadius
+  }) => ({
+    flexDirection: "row",
+    alignItems: "flex-start",
+    width: "100%",
+    gap: radioGap,
+    opacity: radioOpacity,
+    ...(radioPaddingVertical !== undefined
+      ? { paddingVertical: radioPaddingVertical }
+      : {}),
+    ...(radioPaddingHorizontal !== undefined
+      ? { paddingHorizontal: radioPaddingHorizontal }
+      : {}),
+    ...(radioMaxWidth !== undefined ? { maxWidth: radioMaxWidth } : {}),
+    ...(radioBgColor ? { backgroundColor: radioBgColor } : {}),
+    ...(radioBorderWidth !== undefined
+      ? { borderWidth: radioBorderWidth, borderColor: radioBorderColor }
+      : {}),
+    ...(radioBorderRadius !== undefined
+      ? { borderRadius: radioBorderRadius }
+      : {})
+  })
+)
+
+const StyledRadioControl = styled(View)<{
+  controlSize: number
+  controlBorderWidth: number
+  controlBorderColor: string
+}>(({ controlSize, controlBorderWidth, controlBorderColor }) => ({
+  width: controlSize,
+  height: controlSize,
+  minWidth: controlSize,
+  minHeight: controlSize,
+  borderWidth: controlBorderWidth,
+  borderColor: controlBorderColor,
+  borderRadius: controlSize / 2,
+  alignItems: "center",
+  justifyContent: "center"
+}))
+
+const StyledIndicator = styled(View)<{
+  indicatorSize: number
+  indicatorBgColor: string
+}>(({ indicatorSize, indicatorBgColor }) => ({
+  width: indicatorSize,
+  height: indicatorSize,
+  borderRadius: indicatorSize / 2,
+  backgroundColor: indicatorBgColor
+}))
+
+const StyledTextContent = styled(View)<{
+  textContentGap: number
+}>(({ textContentGap }) => ({
+  flexDirection: "column",
+  gap: textContentGap,
+  marginTop: 2
+}))
+
+const StyledAssetWrapper = styled(View)({
+  alignSelf: "center"
+})
+
+/**
+ * Radio button component for single selection within a group.
+ *
+ * @param {string} value - The value of the radio button (required).
+ * @param {"standalone" | "tile"} [variant="standalone"] - Visual style variant.
+ * @param {React.ReactNode} [label] - Main label text or content.
+ * @param {React.ReactNode} [subText] - Optional descriptive subtext.
+ * @param {IllustrationProps} [asset] - Optional illustration asset for tile variant.
+ * @param {boolean} [disabled=false] - Whether the radio is disabled.
+ * @param {boolean} [selected=false] - Whether the radio is currently selected.
+ * @param {(value: string) => void} [onSelect] - Callback when radio is selected.
+ *
+ * @example
+ * <Radio value="chicken" label="Chicken" subText="Tender & tasty" />
+ */
+export const Radio = React.forwardRef<View, RadioProps>(
+  (
+    {
+      variant = "standalone",
+      label,
+      subText,
+      asset,
+      disabled = false,
+      value,
+      selected = false,
+      onSelect,
+      style,
+      ...rest
+    },
+    ref
+  ) => {
+    const theme = useTheme()
+    const { radio } = theme.tokens.components
+    const { spacing, typography, colour } = radio
+
+    const handlePress = () => {
+      if (disabled) return
+      onSelect?.(value)
+    }
+
+    const controlSize = parseTokenValue(radio.size.control.default)
+    const indicatorSize = parseTokenValue(radio.size.indicator.default)
+    const borderWidthVal = parseTokenValue(radio.borderWidth.default)
+    const isTile = variant === "tile"
+
+    return (
+      <StyledRadioRoot
+        ref={ref}
+        onPress={handlePress}
+        disabled={disabled}
+        accessibilityRole="radio"
+        accessibilityState={{ selected, disabled }}
+        radioGap={parseTokenValue(
+          isTile ? radio.radioTile.spacing.gap : spacing.gap
+        )}
+        radioOpacity={disabled ? parseFloat(radio.opacity.disabled) : 1}
+        radioPaddingVertical={
+          isTile
+            ? parseTokenValue(radio.radioTile.spacing.verticalPadding)
+            : undefined
+        }
+        radioPaddingHorizontal={
+          isTile
+            ? parseTokenValue(radio.radioTile.spacing.horizontalPadding)
+            : undefined
+        }
+        radioMaxWidth={
+          isTile ? parseTokenValue(radio.radioTile.size.maxWidth) : undefined
+        }
+        radioBgColor={
+          isTile
+            ? selected
+              ? radio.radioTile.colour.background.selected
+              : radio.radioTile.colour.background.default
+            : undefined
+        }
+        radioBorderWidth={
+          isTile
+            ? parseTokenValue(radio.radioTile.borderWidth.default)
+            : undefined
+        }
+        radioBorderColor={
+          isTile
+            ? selected
+              ? radio.radioTile.colour.border.selected
+              : radio.radioTile.colour.border.default
+            : undefined
+        }
+        radioBorderRadius={
+          isTile
+            ? parseTokenValue(radio.radioTile.borderRadius.default)
+            : undefined
+        }
+        style={typeof style === "function" ? undefined : style}
+        {...rest}
+      >
+        <StyledRadioControl
+          controlSize={controlSize}
+          controlBorderWidth={borderWidthVal}
+          controlBorderColor={
+            selected
+              ? radio.colour.control.border.selected
+              : radio.colour.control.border.default
+          }
+        >
+          {selected && (
+            <StyledIndicator
+              indicatorSize={indicatorSize}
+              indicatorBgColor={radio.colour.indicator.background.selected}
+            />
+          )}
+        </StyledRadioControl>
+
+        {(label || subText) && (
+          <StyledTextContent
+            textContentGap={parseTokenValue(spacing.content.gap)}
+          >
+            {label && (
+              <Typography token={typography.label} color={colour.text.title}>
+                {label}
+              </Typography>
+            )}
+            {subText && (
+              <Typography
+                token={typography.subText}
+                color={colour.text.subtext}
+              >
+                {subText}
+              </Typography>
+            )}
+          </StyledTextContent>
+        )}
+
+        {isTile && asset && (
+          <StyledAssetWrapper>
+            <Illustration {...asset} />
+          </StyledAssetWrapper>
+        )}
+      </StyledRadioRoot>
+    )
+  }
+)
+
+Radio.displayName = "Radio"

package/src/components/molecules/Radio/RadioGroup.tsx

@@ -0,0 +1,142 @@
+import React from "react"
+import { View, ViewProps } from "react-native"
+import styled from "@emotion/native"
+import { useTheme } from "@emotion/react"
+import { Radio, type RadioOwnProps } from "./Radio"
+
+type RadioGroupOwnProps = {
+  name: string
+  options?: RadioOwnProps[]
+  orientation?: "horizontal" | "vertical"
+  value?: string
+  defaultValue?: string
+  disabled?: boolean
+  onValueChange?: (value: string) => void
+}
+
+export type RadioGroupProps = RadioGroupOwnProps &
+  Omit<ViewProps, keyof RadioGroupOwnProps>
+
+const parseTokenValue = (value: string): number => parseFloat(value)
+
+const StyledRadioGroup = styled(View)<{
+  groupDirection: "row" | "column"
+  groupGap: number
+}>(({ groupDirection, groupGap }) => ({
+  flexDirection: groupDirection,
+  gap: groupGap
+}))
+
+/**
+ * RadioGroup component that manages state for a collection of Radio buttons.
+ *
+ * @param {string} name - Name attribute for the radio group (required).
+ * @param {Array} [options] - Options to render as radio buttons.
+ * @param {"horizontal" | "vertical"} [orientation="vertical"] - Layout direction.
+ * @param {string} [value] - Controlled value of the selected radio.
+ * @param {string} [defaultValue] - Default selected value for uncontrolled usage.
+ * @param {boolean} [disabled=false] - Whether all radios in the group are disabled.
+ * @param {(value: string) => void} [onValueChange] - Callback when selection changes.
+ *
+ * @example
+ * <RadioGroup
+ *   name="size"
+ *   options={[
+ *     { value: "small", label: "Small" },
+ *     { value: "medium", label: "Medium" }
+ *   ]}
+ *   value={size}
+ *   onValueChange={setSize}
+ * />
+ *
+ * @example
+ * <RadioGroup name="size" defaultValue="medium">
+ *   <RadioGroup.Radio value="small" label="Small" />
+ *   <RadioGroup.Radio value="medium" label="Medium" />
+ * </RadioGroup>
+ */
+const RadioGroupRoot = React.forwardRef<View, RadioGroupProps>(
+  (
+    {
+      name: _name,
+      options,
+      orientation = "vertical",
+      value,
+      defaultValue,
+      onValueChange,
+      disabled = false,
+      children,
+      ...rest
+    },
+    ref
+  ) => {
+    const theme = useTheme()
+    const { radio } = theme.tokens.components
+
+    const optionsFirstValue = options?.[0]?.value
+    const derivedDefaultValue = defaultValue ?? optionsFirstValue
+
+    const isControlled = value !== undefined
+    const [internalValue, setInternalValue] = React.useState(
+      derivedDefaultValue ?? ""
+    )
+    const currentValue = isControlled ? value : internalValue
+
+    const handleSelect = React.useCallback(
+      (newValue: string) => {
+        if (!isControlled) {
+          setInternalValue(newValue)
+        }
+        onValueChange?.(newValue)
+      },
+      [isControlled, onValueChange]
+    )
+
+    const renderChildren = () => {
+      if (options) {
+        return options.map((option) => (
+          <Radio
+            key={option.value}
+            {...option}
+            selected={currentValue === option.value}
+            onSelect={handleSelect}
+            disabled={disabled || option.disabled}
+          />
+        ))
+      }
+
+      return React.Children.map(children, (child) => {
+        if (!React.isValidElement(child)) return child
+        return React.cloneElement(child as React.ReactElement<RadioOwnProps>, {
+          selected: currentValue === (child.props as RadioOwnProps).value,
+          onSelect: handleSelect,
+          disabled: disabled || (child.props as RadioOwnProps).disabled
+        })
+      })
+    }
+
+    return (
+      <StyledRadioGroup
+        ref={ref}
+        accessibilityRole="radiogroup"
+        groupDirection={orientation === "horizontal" ? "row" : "column"}
+        groupGap={parseTokenValue(radio.spacing.gap)}
+        {...rest}
+      >
+        {renderChildren()}
+      </StyledRadioGroup>
+    )
+  }
+)
+
+RadioGroupRoot.displayName = "RadioGroup"
+
+type RadioGroupComponent = React.ForwardRefExoticComponent<
+  RadioGroupProps & React.RefAttributes<View>
+> & {
+  Radio: typeof Radio
+}
+
+export const RadioGroup = Object.assign(RadioGroupRoot, {
+  Radio
+}) as RadioGroupComponent

package/src/components/molecules/Radio/index.ts

@@ -0,0 +1,4 @@
+export { Radio } from "./Radio"
+export type { RadioProps, RadioOwnProps } from "./Radio"
+export { RadioGroup } from "./RadioGroup"
+export type { RadioGroupProps } from "./RadioGroup"

package/src/components/molecules/SegmentedControl/SegmentedControl.stories.tsx

@@ -0,0 +1,151 @@
+import React, { useState } from "react"
+import { View, StyleSheet } from "react-native"
+import { SegmentedControl } from "./SegmentedControl"
+import type { SegmentedControlProps } from "./SegmentedControl"
+import { Typography } from "../../atoms/Typography"
+
+export default {
+  title: "Molecules/SegmentedControl",
+  component: SegmentedControl,
+  argTypes: {
+    layout: {
+      control: { type: "select" },
+      options: ["fixed", "intrinsic"],
+      description: "Layout mode (fixed = equal width, intrinsic = fit content)"
+    },
+    disabled: {
+      control: { type: "boolean" },
+      description: "Disables entire control"
+    }
+  }
+}
+
+const fourOptions = [
+  { value: "daily", label: "Daily" },
+  { value: "weekly", label: "Weekly" },
+  { value: "monthly", label: "Monthly" },
+  { value: "yearly", label: "Yearly" }
+]
+
+const sevenOptions = [
+  { value: "mon", label: "Mon" },
+  { value: "tue", label: "Tue" },
+  { value: "wed", label: "Wed" },
+  { value: "thu", label: "Thu" },
+  { value: "fri", label: "Fri" },
+  { value: "sat", label: "Sat" },
+  { value: "sun", label: "Sun" }
+]
+
+export const FixedWidth = () => (
+  <View style={styles.column}>
+    <Typography size="sm" weight="semiBold" color="tertiary">
+      Fixed layout (420px container)
+    </Typography>
+    <View style={styles.fixedContainer}>
+      <SegmentedControl
+        layout="fixed"
+        options={fourOptions}
+        defaultValue="daily"
+      />
+    </View>
+  </View>
+)
+
+export const IntrinsicWidth = () => (
+  <View style={styles.column}>
+    <Typography size="sm" weight="semiBold" color="tertiary">
+      Intrinsic layout (scrollable)
+    </Typography>
+    <SegmentedControl
+      layout="intrinsic"
+      options={sevenOptions}
+      defaultValue="mon"
+    />
+  </View>
+)
+
+export const States = () => (
+  <View style={styles.column}>
+    <View style={styles.section}>
+      <Typography size="sm" weight="semiBold" color="tertiary">
+        Enabled
+      </Typography>
+      <SegmentedControl
+        layout="fixed"
+        options={fourOptions}
+        defaultValue="daily"
+      />
+    </View>
+
+    <View style={styles.section}>
+      <Typography size="sm" weight="semiBold" color="tertiary">
+        Disabled (all)
+      </Typography>
+      <SegmentedControl
+        layout="fixed"
+        options={fourOptions}
+        defaultValue="daily"
+        disabled
+      />
+    </View>
+
+    <View style={styles.section}>
+      <Typography size="sm" weight="semiBold" color="tertiary">
+        Disabled (single item)
+      </Typography>
+      <SegmentedControl
+        layout="fixed"
+        options={[
+          { value: "daily", label: "Daily" },
+          { value: "weekly", label: "Weekly", disabled: true },
+          { value: "monthly", label: "Monthly" },
+          { value: "yearly", label: "Yearly" }
+        ]}
+        defaultValue="daily"
+      />
+    </View>
+  </View>
+)
+
+export const Controlled = () => {
+  const [value, setValue] = useState("daily")
+
+  return (
+    <View style={styles.column}>
+      <Typography size="sm" weight="semiBold" color="tertiary">
+        Selected: {value}
+      </Typography>
+      <SegmentedControl
+        layout="fixed"
+        options={fourOptions}
+        value={value}
+        onValueChange={setValue}
+      />
+    </View>
+  )
+}
+
+export const Playground = {
+  args: {
+    layout: "fixed",
+    disabled: false
+  },
+  render: (args: SegmentedControlProps) => (
+    <SegmentedControl {...args} options={fourOptions} defaultValue="daily" />
+  )
+}
+
+const styles = StyleSheet.create({
+  column: {
+    flexDirection: "column",
+    gap: 32
+  },
+  section: {
+    flexDirection: "column",
+    gap: 12
+  },
+  fixedContainer: {
+    width: 420
+  }
+})