fluent-styles 1.53.0 → 1.55.0

package/src/tabBar/TabBarUsage.tsx

@@ -0,0 +1,366 @@
+/**
+ * TabBarUsage — exhaustive demo of every feature.
+ */
+
+import React, { useState } from 'react'
+import {
+  SafeAreaView,
+  ScrollView,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native'
+
+import { TabBar } from './TabBar'
+import type { TabItem } from './interface'
+import { palettes } from '../utiles/theme'
+
+// ─── Icon stubs (replace with your icon library) ──────────────────────────────
+
+const Emoji = ({ e, color, size = 20 }: { e: string; color?: string; size?: number }) => (
+  <Text style={{ fontSize: size }}>{e}</Text>
+)
+
+// ─── Static option sets ───────────────────────────────────────────────────────
+
+type Nav  = 'home' | 'explore' | 'activity' | 'profile'
+type Cat  = 'all' | 'design' | 'dev' | 'pm' | 'data' | 'ops' | 'qa' | 'mkt' | 'sales'
+type Seg  = 'day' | 'week' | 'month' | 'year'
+type Num  = 1 | 2 | 3
+
+const NAV_TABS: TabItem<Nav>[] = [
+  { value: 'home',     label: 'Home',     iconRender: (c) => <Emoji e="🏠" color={c as string} /> },
+  { value: 'explore',  label: 'Explore',  iconRender: (c) => <Emoji e="🔍" color={c as string} />, badge: 3 },
+  { value: 'activity', label: 'Activity', iconRender: (c) => <Emoji e="⚡" color={c as string} />, badge: '' },
+  { value: 'profile',  label: 'Profile',  iconRender: (c) => <Emoji e="👤" color={c as string} /> },
+]
+
+const SIMPLE_TABS: TabItem<Seg>[] = [
+  { value: 'day',   label: 'Day'   },
+  { value: 'week',  label: 'Week'  },
+  { value: 'month', label: 'Month' },
+  { value: 'year',  label: 'Year'  },
+]
+
+const MANY_TABS: TabItem<Cat>[] = [
+  { value: 'all',    label: 'All'       },
+  { value: 'design', label: 'Design'    },
+  { value: 'dev',    label: 'Dev'       },
+  { value: 'pm',     label: 'Product'   },
+  { value: 'data',   label: 'Data'      },
+  { value: 'ops',    label: 'DevOps'    },
+  { value: 'qa',     label: 'QA'        },
+  { value: 'mkt',    label: 'Marketing' },
+  { value: 'sales',  label: 'Sales'     },
+]
+
+const NUMBERED_TABS: TabItem<Num>[] = [
+  { value: 1, label: 'Step 1' },
+  { value: 2, label: 'Step 2' },
+  { value: 3, label: 'Step 3' },
+]
+
+const BADGE_TABS: TabItem<string>[] = [
+  { value: 'inbox',    label: 'Inbox',    badge: 24  },
+  { value: 'sent',     label: 'Sent'               },
+  { value: 'drafts',   label: 'Drafts',   badge: 2   },
+  { value: 'spam',     label: 'Spam',     badge: ''  },
+  { value: 'archived', label: 'Archived'            },
+]
+
+const DISABLED_TABS: TabItem<string>[] = [
+  { value: 'available', label: 'Available'                  },
+  { value: 'locked',    label: 'Locked',    disabled: true  },
+  { value: 'preview',   label: 'Preview',   disabled: true  },
+  { value: 'open',      label: 'Open'                      },
+]
+
+// ─── Screen ───────────────────────────────────────────────────────────────────
+
+export default function TabBarUsage() {
+
+  // Controlled states
+  const [nav,    setNav]    = useState<Nav>('home')
+  const [seg,    setSeg]    = useState<Seg>('week')
+  const [cat,    setCat]    = useState<Cat>('all')
+  const [step,   setStep]   = useState<Num>(1)
+  const [mail,   setMail]   = useState('inbox')
+  const [dis,    setDis]    = useState('available')
+
+  // Content colours for demo
+  const PANEL_BG: Record<Nav, string> = {
+    home:     '#eef2ff',
+    explore:  '#f0fdf4',
+    activity: '#fff7ed',
+    profile:  '#fdf2f8',
+  }
+
+  return (
+    <SafeAreaView style={u.safe}>
+      <ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={u.scroll}>
+
+        {/* ── 1. Bottom navigation with icons ─────────────────────────── */}
+        <Section label="Bottom nav — icons + dot badges">
+          <View style={[u.panel, { backgroundColor: PANEL_BG[nav] }]}>
+            <Text style={u.panelText}>Active: {nav}</Text>
+          </View>
+          <TabBar
+            options={NAV_TABS}
+            value={nav}
+            onChange={(v) => setNav(v as Nav)}
+            indicator="dot"
+            showBorder
+          />
+        </Section>
+
+        {/* ── 2. Underline indicator (line) ────────────────────────────── */}
+        <Section label="Indicator: line (animated)">
+          <TabBar
+            options={SIMPLE_TABS}
+            value={seg}
+            onChange={(v) => setSeg(v as Seg)}
+            indicator="line"
+            showBorder
+          />
+        </Section>
+
+        {/* ── 3. Pill indicator ────────────────────────────────────────── */}
+        <Section label="Indicator: pill (sliding background)">
+          <TabBar
+            options={SIMPLE_TABS}
+            defaultValue="week"
+            indicator="pill"
+            colors={{
+              background:   palettes.indigo[50],
+              activeText:   palettes.indigo[700],
+              indicator:    palettes.indigo[200],
+              text:         palettes.indigo[400],
+            }}
+          />
+        </Section>
+
+        {/* ── 4. Scrollable — many tabs ─────────────────────────────────── */}
+        <Section label="Scrollable (tabAlign=scroll) — 9 tabs">
+          <TabBar
+            options={MANY_TABS}
+            value={cat}
+            onChange={(v) => setCat(v as Cat)}
+            tabAlign="scroll"
+            indicator="line"
+            showBorder
+          />
+          <Text style={u.hint}>Active: {cat}</Text>
+        </Section>
+
+        {/* ── 5. Badges ────────────────────────────────────────────────── */}
+        <Section label="Badges — number · dot (empty string)">
+          <TabBar
+            options={BADGE_TABS}
+            value={mail}
+            onChange={(v) => setMail(v as string)}
+            indicator="line"
+            tabAlign="scroll"
+            colors={{ badge: palettes.rose[500] }}
+            showBorder
+          />
+        </Section>
+
+        {/* ── 6. Disabled tabs ──────────────────────────────────────────── */}
+        <Section label="Disabled tabs">
+          <TabBar
+            options={DISABLED_TABS}
+            value={dis}
+            onChange={(v) => setDis(v as string)}
+            indicator="line"
+            showBorder
+          />
+        </Section>
+
+        {/* ── 7. Solid / chip variant ──────────────────────────────────── */}
+        <Section label="Variant: solid (chip tabs)">
+          <TabBar
+            options={SIMPLE_TABS}
+            defaultValue="week"
+            variant="solid"
+            indicator="pill"
+            colors={{
+              background:     palettes.gray[100],
+              activeChipBg:   '#ffffff',
+              activeChipText: palettes.gray[900],
+              indicator:      palettes.coolGray[200],
+              text:           palettes.gray[500],
+            }}
+            style={u.chipBar}
+          />
+        </Section>
+
+        {/* ── 8. Controlled step tabs (numeric values) ─────────────────── */}
+        <Section label="Numeric values — stepper">
+          <TabBar
+            options={NUMBERED_TABS}
+            value={step}
+            onChange={(v) => setStep(v as Num)}
+            indicator="line"
+            indicatorHeight={2}
+            fontSize={13}
+            colors={{
+              activeText:  palettes.violet[600],
+              indicator:   palettes.violet[600],
+              text:        palettes.gray[400],
+            }}
+            showBorder
+          />
+          <View style={u.stepContent}>
+            <Text style={u.stepText}>
+              {step === 1 && '① Fill in your details'}
+              {step === 2 && '② Review your order'}
+              {step === 3 && '③ Confirm & pay'}
+            </Text>
+          </View>
+        </Section>
+
+        {/* ── 9. Label bulge ────────────────────────────────────────────── */}
+        <Section label="Label bulge (active tab scales up)">
+          <TabBar
+            options={SIMPLE_TABS}
+            defaultValue="week"
+            indicator="line"
+            labelBulge={1.15}
+            showBorder
+          />
+        </Section>
+
+        {/* ── 10. Custom indicator width ────────────────────────────────── */}
+        <Section label="Fixed indicator width (24 px)">
+          <TabBar
+            options={SIMPLE_TABS}
+            defaultValue="month"
+            indicator="line"
+            indicatorWidth={24}
+            indicatorHeight={3}
+            indicatorRadius={3}
+            showBorder
+          />
+        </Section>
+
+        {/* ── 11. Scrollable + full-width indicator ─────────────────────── */}
+        <Section label="Scrollable + full-width indicator (0)">
+          <TabBar
+            options={MANY_TABS}
+            defaultValue="design"
+            tabAlign="scroll"
+            indicator="line"
+            indicatorWidth={0}
+            indicatorHeight={3}
+            showBorder
+          />
+        </Section>
+
+        {/* ── 12. Color themes ──────────────────────────────────────────── */}
+        <Section label="Color overrides — green">
+          <TabBar
+            options={SIMPLE_TABS}
+            defaultValue="day"
+            indicator="line"
+            showBorder
+            colors={{
+              background:   palettes.green[50],
+              activeText:   palettes.green[700],
+              indicator:    palettes.green[500],
+              text:         palettes.green[400],
+              border:       palettes.green[200],
+            }}
+          />
+        </Section>
+
+        <Section label="Color overrides — dark slate">
+          <TabBar
+            options={NAV_TABS}
+            defaultValue="home"
+            indicator="dot"
+            showBorder
+            colors={{
+              background:   palettes.blueGray[900],
+              activeText:   palettes.indigo[400],
+              indicator:    palettes.indigo[400],
+              text:         palettes.blueGray[400],
+              border:       palettes.blueGray[700],
+              badge:        palettes.rose[400],
+            }}
+          />
+        </Section>
+
+        {/* ── 13. No indicator — plain tabs ─────────────────────────────── */}
+        <Section label="No indicator — plain (default)">
+          <TabBar
+            options={SIMPLE_TABS}
+            defaultValue="month"
+          />
+        </Section>
+
+        {/* ── 14. Large font ────────────────────────────────────────────── */}
+        <Section label="Large font (fontSize=17)">
+          <TabBar
+            options={SIMPLE_TABS}
+            defaultValue="week"
+            indicator="line"
+            fontSize={17}
+            height={52}
+            showBorder
+          />
+        </Section>
+
+      </ScrollView>
+    </SafeAreaView>
+  )
+}
+
+// ─── Section wrapper ──────────────────────────────────────────────────────────
+
+const Section = ({ label, children }: { label: string; children: React.ReactNode }) => (
+  <View style={u.section}>
+    <Text style={u.sectionLabel}>{label}</Text>
+    {children}
+  </View>
+)
+
+// ─── Styles ───────────────────────────────────────────────────────────────────
+
+const u = StyleSheet.create({
+  safe:    { flex: 1, backgroundColor: '#f9fafb' },
+  scroll:  { paddingTop: 16, paddingBottom: 48, gap: 28 },
+  section: { gap: 0 },
+  sectionLabel: {
+    fontSize:      11,
+    fontWeight:    '700',
+    color:         '#8e8e93',
+    letterSpacing: 1,
+    textTransform: 'uppercase',
+    marginBottom:  8,
+    paddingHorizontal: 16,
+  },
+  panel: {
+    height:        80,
+    alignItems:    'center',
+    justifyContent: 'center',
+    marginHorizontal: 16,
+    marginBottom:  0,
+    borderRadius:  12,
+  },
+  panelText:   { fontSize: 14, fontWeight: '600', color: '#374151' },
+  hint:        { fontSize: 12, color: '#9ca3af', paddingHorizontal: 16, marginTop: 6 },
+  stepContent: {
+    height:          60,
+    alignItems:      'center',
+    justifyContent:  'center',
+    backgroundColor: '#f3f4f6',
+    marginHorizontal: 16,
+    borderRadius:    10,
+  },
+  stepText: { fontSize: 15, color: '#374151', fontWeight: '500' },
+  chipBar:  {
+    marginHorizontal: 16,
+    borderRadius:     12,
+    overflow:         'hidden',
+  },
+})

package/src/tabBar/index.ts

@@ -0,0 +1,59 @@
+/**
+ * @module TabBar
+ *
+ * ─── Basic (center-aligned, no indicator) ────────────────────────────────────
+ * ```tsx
+ * import { TabBar } from './tab-bar'
+ *
+ * const TABS = [
+ *   { value: 'home',    label: 'Home'    },
+ *   { value: 'explore', label: 'Explore' },
+ *   { value: 'profile', label: 'Profile' },
+ * ]
+ *
+ * <TabBar options={TABS} defaultValue="home" onChange={console.log} />
+ * ```
+ *
+ * ─── With animated underline indicator ───────────────────────────────────────
+ * ```tsx
+ * <TabBar options={TABS} indicator="line" value={tab} onChange={setTab} />
+ * ```
+ *
+ * ─── Scrollable (many tabs) ──────────────────────────────────────────────────
+ * ```tsx
+ * <TabBar options={manyTabs} tabAlign="scroll" indicator="line" />
+ * ```
+ *
+ * ─── With icons ──────────────────────────────────────────────────────────────
+ * ```tsx
+ * const ICON_TABS = [
+ *   { value: 'home', label: 'Home', iconRender: (color) => <HomeIcon color={color} /> },
+ * ]
+ * <TabBar options={ICON_TABS} indicator="dot" />
+ * ```
+ *
+ * ─── Pill indicator ──────────────────────────────────────────────────────────
+ * ```tsx
+ * <TabBar options={TABS} indicator="pill" variant="solid" />
+ * ```
+ *
+ * ─── Color overrides ─────────────────────────────────────────────────────────
+ * ```tsx
+ * <TabBar
+ *   options={TABS}
+ *   indicator="line"
+ *   colors={{ activeText: '#22c55e', indicator: '#22c55e' }}
+ * />
+ * ```
+ */
+
+export { TabBar }                                from './TabBar'
+export type {
+  TabBarProps,
+  TabItem,
+  TabValue,
+  TabBarColors,
+  TabBarVariant,
+  IndicatorStyle,
+}                                                from './interface'
+export { TAB_BAR_COLORS_LIGHT, TAB_BAR_COLORS_DARK } from './interface'

package/src/tabBar/interface.ts

@@ -0,0 +1,196 @@
+import type React from 'react'
+import type { ColorValue, StyleProp, ViewStyle } from 'react-native'
+
+// ─── Value types ──────────────────────────────────────────────────────────────
+
+export type TabValue = number | string
+
+// ─── Tab item ─────────────────────────────────────────────────────────────────
+
+export type TabItem<T extends TabValue> = {
+  /** Unique identifier for this tab. */
+  value: T
+  /** Display label. */
+  label: string
+  /**
+   * Badge rendered beside the label.
+   * - number → shown as-is
+   * - string → shown as-is (pass '' to show a dot badge)
+   */
+  badge?: number | string
+  /**
+   * Renders an icon above (or instead of) the label.
+   * Receives the resolved icon colour and the active state.
+   */
+  iconRender?: (color: ColorValue, isActive: boolean) => React.ReactElement
+  /** Disable this specific tab. */
+  disabled?: boolean
+}
+
+// ─── Indicator style ──────────────────────────────────────────────────────────
+
+export type IndicatorStyle = 'line' | 'pill' | 'dot'
+
+// ─── Tab bar variant ─────────────────────────────────────────────────────────
+
+export type TabBarVariant =
+  | 'default'   // plain text tabs, no bottom bar elevation
+  | 'underline' // hairline bottom border on the bar
+  | 'card'      // each tab is a card chip
+  | 'solid'     // active tab has filled background
+
+// ─── Color tokens ─────────────────────────────────────────────────────────────
+
+export type TabBarColors = {
+  /** Bar background. */
+  background:       string
+  /** Inactive tab label + icon. */
+  text:             string
+  /** Active tab label + icon. */
+  activeText:       string
+  /** Underline / pill / dot indicator. */
+  indicator:        string
+  /** Badge text. */
+  badge:            string
+  /** Bar bottom border (underline variant). */
+  border:           string
+  /** Active chip background (solid/card variant). */
+  activeChipBg:     string
+  /** Active chip text (solid/card variant). */
+  activeChipText:   string
+  /** Disabled tab. */
+  disabled:         string
+}
+
+export const TAB_BAR_COLORS_LIGHT: TabBarColors = {
+  background:     '#ffffff',
+  text:           '#71717a',
+  activeText:     '#6366f1',
+  indicator:      '#6366f1',
+  badge:          '#ef4444',
+  border:         '#e4e4e7',
+  activeChipBg:   '#eef2ff',
+  activeChipText: '#6366f1',
+  disabled:       '#d4d4d8',
+}
+
+export const TAB_BAR_COLORS_DARK: TabBarColors = {
+  background:     '#18181b',
+  text:           '#71717a',
+  activeText:     '#818cf8',
+  indicator:      '#818cf8',
+  badge:          '#ef4444',
+  border:         '#27272a',
+  activeChipBg:   '#1e1b4b',
+  activeChipText: '#818cf8',
+  disabled:       '#3f3f46',
+}
+
+// ─── Tab bar props ────────────────────────────────────────────────────────────
+
+export interface TabBarProps<T extends TabValue> {
+
+  // ── Data ──────────────────────────────────────────────────────────────────
+
+  /** Tab options. Memoize this array to avoid spurious re-renders. */
+  options: TabItem<T>[]
+
+  // ── State ─────────────────────────────────────────────────────────────────
+
+  /** Controlled active value. */
+  value?: T
+  /** Uncontrolled initial value. Defaults to options[0].value. */
+  defaultValue?: T
+  /** Called when the active tab changes. */
+  onChange?: (value: T) => void
+
+  // ── Indicator ─────────────────────────────────────────────────────────────
+
+  /**
+   * Indicator style shown on the active tab.
+   * - `'line'` — animated bottom line (classic underline)
+   * - `'pill'` — animated pill that slides behind the active tab
+   * - `'dot'`  — small dot below the label
+   * - `false`  — no indicator (default)
+   */
+  indicator?: false | IndicatorStyle
+
+  /**
+   * Explicit indicator width in px.
+   * - Omit → matches label text width (line) or tab width (pill).
+   * - `0`  → stretches to tab width.
+   */
+  indicatorWidth?: number
+
+  /**
+   * Indicator height in px.
+   * - line default: 3
+   * - pill: auto (covers whole tab)
+   * - dot: 6
+   */
+  indicatorHeight?: number
+
+  /** Indicator colour override. Falls back to `colors.indicator`. */
+  indicatorColor?: ColorValue
+
+  /** Border radius of the indicator shape. */
+  indicatorRadius?: number
+
+  // ── Layout ────────────────────────────────────────────────────────────────
+
+  /**
+   * - `'center'` — tabs divide the bar equally (no scroll).
+   * - `'scroll'` — tabs are natural width; bar scrolls horizontally.
+   */
+  tabAlign?: 'center' | 'scroll'
+
+  /**
+   * Fixed height for the bar.
+   * Defaults: 48 with icons, 44 with indicator, 40 plain.
+   */
+  height?: number
+
+  // ── Appearance ────────────────────────────────────────────────────────────
+
+  /**
+   * Visual style preset.
+   * @default 'default'
+   */
+  variant?: TabBarVariant
+
+  /** Scale factor for the active label (pop / bulge effect). @default 1 */
+  labelBulge?: number | boolean
+
+  /** Show a persistent bottom border on the bar. @default false */
+  showBorder?: boolean
+
+  /** Padding inside each tab. @default 12 */
+  tabPaddingHorizontal?: number
+
+  /** Gap between icon and label. @default 4 */
+  iconLabelGap?: number
+
+  /** Font size for tab labels. @default 14 */
+  fontSize?: number
+
+  /** Font size for labels when tabs also have icons. @default 11 */
+  iconFontSize?: number
+
+  // ── Theming ───────────────────────────────────────────────────────────────
+
+  /** Explicit text/icon colour for inactive tabs. */
+  textColor?: ColorValue
+  /** Explicit text/icon colour for active tab. */
+  activeTextColor?: ColorValue
+
+  /** Fine-grained colour token overrides. */
+  colors?: Partial<TabBarColors>
+
+  // ── Style overrides ───────────────────────────────────────────────────────
+
+  style?: StyleProp<ViewStyle>
+  contentStyle?: StyleProp<ViewStyle>
+  tabStyle?: StyleProp<ViewStyle>
+
+  testID?: string
+}

package/src/text/index.ts

@@ -0,0 +1,73 @@
+
+import {
+    Text,
+    TextProps,
+    TextStyle,
+} from 'react-native';
+import { styled } from '../utiles/styled';
+import { theme } from '../utiles/theme';
+
+type TextVariants = {
+    fontSize?: number;
+    fontWeight?: number | string;
+    color?: string;
+    textDecorationLine?: boolean | string;
+    textAlign?: string ;
+    fontFamily?: string;
+    link?: boolean;
+};
+
+type StyledTextProps = TextVariants & TextProps & TextStyle;
+
+const StyledText = styled<StyledTextProps>(Text, {
+    base: {
+        fontSize: theme.fontSize.normal,
+        color: theme.colors.gray[800],
+        fontWeight: theme.fontWeight.normal,
+    } as TextStyle,
+    variants: {
+        fontSize: (selected: string) => {
+            const size = selected || theme.fontSize.normal;
+            if (isNaN(Number(size))) {
+                // throw new Error('Invalid fontSize value');
+            }
+            return { fontSize: Number(size) };
+        },
+
+        fontWeight: (selected: string) => {
+            const weight = selected || theme.fontWeight.normal;
+            if (isNaN(Number(weight))) {
+                // throw new Error('Invalid fontWeight value');
+            }
+            return { fontWeight: weight as any };
+        },
+
+        color: (selected: string) => {
+            const colorValue = selected || theme.colors.gray[800];
+            return { color: colorValue };
+        },
+
+        textAlign: (selected: string) => {
+            const align = selected || 'left';
+            const validAlignments = ['auto', 'left', 'right', 'center', 'justify'];
+            if (!validAlignments.includes(align)) {
+                // throw new Error('Invalid textAlign value');
+            }
+            return { textAlign: align as any };
+        },
+ 
+        fontFamily: (selected: string) => {
+            if (!selected) return {};
+            return { fontFamily: selected };
+        },
+        link: {
+            true: {
+                color: theme.colors.blue[800],
+                textDecorationLine: 'underline',
+            } as TextStyle
+        }
+    }
+});
+
+export { StyledText };
+export type { StyledTextProps };