@titan-design/react-ui 0.0.2 → 0.1.0

package/dist/index.mjs

@@ -1,5 +1,5 @@
-import { semanticColorsDark, getHoverColors, getValidatedElevation, getBaseSurfaceColor, getElevationSurface, getElevationShadow, neumorphicShadows } from './chunk-NA3EES23.mjs';
-export { buttonSizes, componentElevationRanges, createFlatShadow, createPressedHoverShadow, createPressedShadow, createRaisedHoverShadow, createRaisedShadow, darkThemeCSSVars, darken, discreteRainbow, elevationSystem, getBaseSurfaceColor, getDiscreteRainbowColor, getElevationConfig, getElevationShadow, getElevationSurface, getHoverColors, getSemanticColors, getThemeCSSVars, getValidatedElevation, gluestackConfig, hexToRgb, hsvToRgb, isDark, lightThemeCSSVars, lighten, neumorphicShadows, primitiveBorderRadius, primitiveBreakpoints, primitiveColors, primitiveShadows, primitiveSpacing, primitiveTypography, primitiveZIndex, rgbToHex, rgbToHsv, semanticColorsDark, semanticColorsLight, semanticTypography, shadowColors } from './chunk-NA3EES23.mjs';
+import { semanticColorsDark, getHoverColors, getValidatedElevation, getBaseSurfaceColor, getElevationSurface, getElevationShadow, getGlowShadow, neumorphicShadows } from './chunk-MGW37MPO.mjs';
+export { buttonSizes, componentElevationRanges, createFlatShadow, createPressedHoverShadow, createPressedShadow, createRaisedHoverShadow, createRaisedShadow, darkThemeCSSVars, darken, discreteRainbow, elevationSystem, getBaseSurfaceColor, getDiscreteRainbowColor, getElevationConfig, getElevationShadow, getElevationSurface, getGlowShadow, getHoverColors, getSemanticColors, getThemeCSSVars, getValidatedElevation, gluestackConfig, hexToRgb, hsvToRgb, isDark, lightThemeCSSVars, lighten, neumorphicShadows, primitiveBorderRadius, primitiveBreakpoints, primitiveColors, primitiveShadows, primitiveSpacing, primitiveTypography, primitiveZIndex, rgbToHex, rgbToHsv, semanticColorsDark, semanticColorsLight, semanticTypography, shadowColors } from './chunk-MGW37MPO.mjs';
 import { Pressable, ActivityIndicator, Text, View, TextInput, StyleSheet, Platform, Image, Modal as Modal$1, ScrollView } from 'react-native';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
@@ -3431,6 +3431,177 @@ function FormRow({
     }
   );
 }
+var gapClasses = {
+  0: "gap-0",
+  1: "gap-1",
+  2: "gap-2",
+  3: "gap-3",
+  4: "gap-4",
+  5: "gap-5",
+  6: "gap-6",
+  8: "gap-8",
+  10: "gap-10",
+  12: "gap-12"
+};
+var alignMap = {
+  start: "items-start",
+  center: "items-center",
+  end: "items-end",
+  stretch: "items-stretch"
+};
+var justifyMap = {
+  start: "justify-start",
+  center: "justify-center",
+  end: "justify-end",
+  between: "justify-between",
+  around: "justify-around"
+};
+function Stack({
+  gap = 0,
+  align,
+  justify,
+  wrap,
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      className: cn(
+        "flex",
+        gapClasses[gap],
+        align && alignMap[align],
+        justify && justifyMap[justify],
+        wrap && "flex-wrap",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+function HStack(props) {
+  return /* @__PURE__ */ jsx(Stack, { ...props, className: cn("flex-row", props.className) });
+}
+function VStack(props) {
+  return /* @__PURE__ */ jsx(Stack, { ...props, className: cn("flex-col", props.className) });
+}
+function Section({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx(View, { className: cn("mb-6", className), ...props, children });
+}
+function SectionHeader({ title, subtitle, trailing, className }) {
+  return /* @__PURE__ */ jsxs(View, { className: cn("flex-row items-center justify-between mb-3 px-1", className), children: [
+    /* @__PURE__ */ jsxs(View, { className: "flex-1", children: [
+      /* @__PURE__ */ jsx(Text, { className: "text-sm font-semibold text-text-secondary uppercase tracking-wider", children: title }),
+      subtitle && /* @__PURE__ */ jsx(Text, { className: "text-xs text-text-tertiary mt-0.5", children: subtitle })
+    ] }),
+    trailing && /* @__PURE__ */ jsx(View, { children: trailing })
+  ] });
+}
+function SectionContent({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx(View, { className: cn(className), ...props, children });
+}
+function DataRow({ label, value, valueClassName, className, ...props }) {
+  return /* @__PURE__ */ jsxs(View, { className: cn("flex-row items-center justify-between py-2", className), ...props, children: [
+    /* @__PURE__ */ jsx(Text, { className: "text-sm text-text-secondary", children: label }),
+    typeof value === "string" ? /* @__PURE__ */ jsx(Text, { className: cn("text-sm font-medium text-text-primary", valueClassName), children: value }) : /* @__PURE__ */ jsx(View, { className: cn(valueClassName), children: value })
+  ] });
+}
+var colorClasses = {
+  primary: { bg: "bg-brand-primary/10", icon: "text-brand-primary" },
+  secondary: { bg: "bg-brand-secondary/10", icon: "text-brand-secondary" },
+  success: { bg: "bg-status-success/10", icon: "text-status-success" },
+  error: { bg: "bg-status-error/10", icon: "text-status-error" },
+  warning: { bg: "bg-status-warning/10", icon: "text-status-warning" },
+  info: { bg: "bg-status-info/10", icon: "text-status-info" },
+  neutral: { bg: "bg-surface-elevated", icon: "text-text-secondary" }
+};
+var sizeClasses = {
+  sm: { box: "w-8 h-8 rounded-lg", iconSize: 16 },
+  md: { box: "w-10 h-10 rounded-xl", iconSize: 20 },
+  lg: { box: "w-12 h-12 rounded-xl", iconSize: 24 }
+};
+function IconBox({
+  icon: Icon,
+  color = "neutral",
+  size = "md",
+  className,
+  ...props
+}) {
+  const colors = colorClasses[color];
+  const sizes = sizeClasses[size];
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      className: cn("items-center justify-center", colors.bg, sizes.box, className),
+      ...props,
+      children: /* @__PURE__ */ jsx(Icon, { size: sizes.iconSize, className: colors.icon })
+    }
+  );
+}
+function Surface({
+  elevation = 0,
+  glowColor,
+  glowIntensity,
+  theme = "dark",
+  className,
+  style,
+  children,
+  ...props
+}) {
+  const baseColor = getBaseSurfaceColor(theme);
+  const surfaceColor = getElevationSurface(baseColor, elevation, theme);
+  const shadowStyle = getElevationShadow(baseColor, elevation, theme);
+  const glowStyle = glowColor ? getGlowShadow(glowColor, glowIntensity) : {};
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      className: cn("rounded-2xl", className),
+      style: [
+        { backgroundColor: surfaceColor },
+        shadowStyle,
+        glowStyle,
+        style
+      ],
+      ...props,
+      children
+    }
+  );
+}
+function ListItem({ className, children, onPress, ...props }) {
+  const Container = onPress ? Pressable : View;
+  const containerProps = onPress ? { onPress, ...props } : props;
+  return /* @__PURE__ */ jsx(
+    Container,
+    {
+      className: cn("flex-row items-center py-3 px-4 min-h-[48px]", className),
+      ...containerProps,
+      children
+    }
+  );
+}
+function ListItemIcon({ icon: Icon, className, ...props }) {
+  return /* @__PURE__ */ jsx(View, { className: cn("mr-3 items-center justify-center", className), ...props, children: /* @__PURE__ */ jsx(Icon, { size: 20, className: "text-text-secondary" }) });
+}
+function ListItemContent({ title, subtitle, className, ...props }) {
+  return /* @__PURE__ */ jsxs(View, { className: cn("flex-1 justify-center", className), ...props, children: [
+    /* @__PURE__ */ jsx(Text, { className: "text-sm font-medium text-text-primary", children: title }),
+    subtitle && /* @__PURE__ */ jsx(Text, { className: "text-xs text-text-secondary mt-0.5", children: subtitle })
+  ] });
+}
+function ListItemTrailing({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx(View, { className: cn("ml-3 items-center justify-center", className), ...props, children });
+}
+function ListItemDivider({ inset = true, className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      className: cn("h-px bg-divider", inset ? "ml-14" : "", className),
+      ...props
+    }
+  );
+}
 var variantStyles4 = {
   h1: "font-heading text-5xl font-bold leading-tight",
   h2: "font-heading text-4xl font-bold leading-tight",
@@ -4259,6 +4430,57 @@ function formatDateTime(value, format = "datetime", isUTC = false, fallback = "-
   }
   return formatDate(value, format, isUTC);
 }
+var sizeConfig2 = {
+  sm: { value: "text-lg font-bold", label: "text-xs", unit: "text-xs" },
+  md: { value: "text-2xl font-bold", label: "text-xs", unit: "text-sm" },
+  lg: { value: "text-4xl font-bold", label: "text-sm", unit: "text-base" }
+};
+var trendColors = {
+  up: "text-result-improve",
+  down: "text-result-degrade",
+  neutral: "text-result-inconclusive"
+};
+var trendArrows = {
+  up: "\u2191",
+  down: "\u2193",
+  neutral: "\u2192"
+};
+function Metric({
+  value,
+  label,
+  unit,
+  trend,
+  size = "md",
+  className,
+  ...props
+}) {
+  const styles2 = sizeConfig2[size];
+  return /* @__PURE__ */ jsxs(View, { className: cn("items-center", className), ...props, children: [
+    /* @__PURE__ */ jsxs(View, { className: "flex-row items-baseline gap-1", children: [
+      /* @__PURE__ */ jsx(Text, { className: cn(styles2.value, "text-text-primary"), children: value }),
+      unit && /* @__PURE__ */ jsx(Text, { className: cn(styles2.unit, "text-text-tertiary"), children: unit }),
+      trend && /* @__PURE__ */ jsx(Text, { className: cn(styles2.unit, trendColors[trend]), children: trendArrows[trend] })
+    ] }),
+    /* @__PURE__ */ jsx(Text, { className: cn(styles2.label, "text-text-secondary mt-1"), children: label })
+  ] });
+}
+function MetricGroup({
+  className,
+  children,
+  ...props
+}) {
+  const items = React24.Children.toArray(children);
+  return /* @__PURE__ */ jsx(View, { className: cn("flex-row items-center", className), ...props, children: items.map((child, i) => /* @__PURE__ */ jsxs(React24.Fragment, { children: [
+    /* @__PURE__ */ jsx(View, { className: "flex-1 items-center", children: child }),
+    i < items.length - 1 && /* @__PURE__ */ jsx(
+      View,
+      {
+        className: "w-px h-8 bg-divider mx-2",
+        testID: "metric-divider"
+      }
+    )
+  ] }, i)) });
+}
 
 // src/utils/colors.ts
 function getStatusColor(status) {
@@ -4407,6 +4629,6 @@ function composeValidators(...validators) {
   };
 }
 
-export { Accordion, AccordionButton, AccordionItem, AccordionPanel, Alert, AlertDescription, AlertTitle, Autocomplete, Avatar, AvatarBadge, AvatarGroup, Badge, BadgeText, BreadcrumbItem, Breadcrumbs, Button, ButtonIcon, ButtonSpinner, ButtonText, Caption, Card, CardContent, CardDescription, CardFooter, CardHeader, CardSkeleton, CardTitle, Checkbox, CheckboxGroup, Chip, CircularProgress, Collapse, CollapseButton, CollapseContent, DateTime, Divider, Drawer, DrawerBody, DrawerFooter, DrawerHeader, EmptyState, FormActions, FormField, FormRow, FormSection, Heading, HelpTip, Input, InputGroup, Label, LabelWithHelp, Link, Menu, MenuDivider, MenuGroup, MenuItem, MenuList, MenuTrigger, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalTitle, Overline, Paragraph, PasswordInput, Popover, PopoverCloseButton, PopoverContent, PopoverTrigger, Progress, ProgressSteps, Radio, RadioGroup, Select, Sidebar, SidebarContent, SidebarDivider, SidebarFooter, SidebarHeader, SidebarItem, SidebarSection, Skeleton, SkeletonCard, SkeletonCircle, SkeletonListItem, SkeletonText, Spinner, Step, StepContent, StepIndicator, StepLabel, Stepper, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableBody, TableCell, TableHeader, TableHeaderCell, TablePagination, TableRow, Tabs, Toast, ToastProvider, ToolbarButton, ToolbarButtonGroup, Tooltip, Typography, alpha, cn, composeValidators, createFieldId, formatDateTime, getContrastText, getFieldAriaProps, getFieldValidationProps, getLuminance, getResultColor, getStatusColor, hasMaxLength, hasMinLength, isEmpty, isValidEmail, useTable, useToast, useToolbarButton, validationRules };
+export { Accordion, AccordionButton, AccordionItem, AccordionPanel, Alert, AlertDescription, AlertTitle, Autocomplete, Avatar, AvatarBadge, AvatarGroup, Badge, BadgeText, BreadcrumbItem, Breadcrumbs, Button, ButtonIcon, ButtonSpinner, ButtonText, Caption, Card, CardContent, CardDescription, CardFooter, CardHeader, CardSkeleton, CardTitle, Checkbox, CheckboxGroup, Chip, CircularProgress, Collapse, CollapseButton, CollapseContent, DataRow, DateTime, Divider, Drawer, DrawerBody, DrawerFooter, DrawerHeader, EmptyState, FormActions, FormField, FormRow, FormSection, HStack, Heading, HelpTip, IconBox, Input, InputGroup, Label, LabelWithHelp, Link, ListItem, ListItemContent, ListItemDivider, ListItemIcon, ListItemTrailing, Menu, MenuDivider, MenuGroup, MenuItem, MenuList, MenuTrigger, Metric, MetricGroup, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalTitle, Overline, Paragraph, PasswordInput, Popover, PopoverCloseButton, PopoverContent, PopoverTrigger, Progress, ProgressSteps, Radio, RadioGroup, Section, SectionContent, SectionHeader, Select, Sidebar, SidebarContent, SidebarDivider, SidebarFooter, SidebarHeader, SidebarItem, SidebarSection, Skeleton, SkeletonCard, SkeletonCircle, SkeletonListItem, SkeletonText, Spinner, Stack, Step, StepContent, StepIndicator, StepLabel, Stepper, Surface, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableBody, TableCell, TableHeader, TableHeaderCell, TablePagination, TableRow, Tabs, Toast, ToastProvider, ToolbarButton, ToolbarButtonGroup, Tooltip, Typography, VStack, alpha, cn, composeValidators, createFieldId, formatDateTime, getContrastText, getFieldAriaProps, getFieldValidationProps, getLuminance, getResultColor, getStatusColor, hasMaxLength, hasMinLength, isEmpty, isValidEmail, useTable, useToast, useToolbarButton, validationRules };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map