@medway-ui/native 1.7.1 → 1.8.0

package/src/hooks/useThemeColor.ts

@@ -180,17 +180,17 @@ const PALETTE: Record<string, string> = {
   'prev-lighten-6': 'rgba(198, 199, 226, 1)',
 
   // Drop shadow (valores do light; no dark viram alias de `black-*`)
-  'drop-shadow-layer-a': 'rgba(33, 38, 49, 0.16)',
-  'drop-shadow-layer-b': 'rgba(73, 85, 110, 0.16)',
+  'drop-shadow-layer-a': 'rgba(33, 38, 49, 0.04)',
+  'drop-shadow-layer-b': 'rgba(73, 85, 110, 0.08)',
 
   // Gold
   gold: 'rgba(217, 172, 104, 1)',
-  'gold-darken-1': 'rgba(209, 154, 72, 1)',
-  'gold-darken-2': 'rgba(191, 134, 49, 1)',
-  'gold-darken-3': 'rgba(159, 111, 40, 1)',
-  'gold-darken-4': 'rgba(126, 88, 32, 1)',
-  'gold-darken-5': 'rgba(94, 66, 24, 1)',
-  'gold-darken-6': 'rgba(61, 43, 15, 1)',
+  'gold-darken-1': 'rgba(200, 152, 81, 1)',
+  'gold-darken-2': 'rgba(181, 132, 59, 1)',
+  'gold-darken-3': 'rgba(151, 110, 48, 1)',
+  'gold-darken-4': 'rgba(119, 87, 39, 1)',
+  'gold-darken-5': 'rgba(89, 65, 29, 1)',
+  'gold-darken-6': 'rgba(57, 42, 19, 1)',
   'gold-lighten-1': 'rgba(221, 181, 121, 1)',
   'gold-lighten-2': 'rgba(229, 199, 153, 1)',
   'gold-lighten-3': 'rgba(233, 208, 170, 1)',
@@ -470,29 +470,29 @@ const LIGHT_COLOR_ALIAS_MAP: Record<string, string> = {
   // Gold
   'gold-foreground': 'gold-darken-4',
   'gold-foreground-emphasis': 'gold-darken-5',
-  'gold-foreground-onfill': 'gold-darken-5',
-  'gold-background-fill': 'gold',
+  'gold-foreground-onfill': 'gold-darken-6',
+  'gold-background-fill': 'gold-lighten-1',
   'gold-background-fill-emphasis': 'gold-darken-1',
-  'gold-background-soft': 'gold-24',
-  'gold-background-soft-emphasis': 'gold-16',
+  'gold-background-soft': 'gold-16',
+  'gold-background-soft-emphasis': 'gold-8',
 
   // Silver
-  'silver-foreground': 'silver-darken-4',
+  'silver-foreground': 'silver-darken-3',
   'silver-foreground-emphasis': 'silver-darken-6',
   'silver-foreground-onfill': 'white',
-  'silver-background-fill': 'silver',
-  'silver-background-fill-emphasis': 'silver-darken-1',
-  'silver-background-soft': 'silver-8',
-  'silver-background-soft-emphasis': 'silver-4',
+  'silver-background-fill': 'silver-darken-1',
+  'silver-background-fill-emphasis': 'silver-darken-3',
+  'silver-background-soft': 'silver-16',
+  'silver-background-soft-emphasis': 'silver-8',
 
   // Bronze
-  'bronze-foreground': 'bronze-darken-3',
-  'bronze-foreground-emphasis': 'bronze-darken-4',
+  'bronze-foreground': 'bronze-darken-2',
+  'bronze-foreground-emphasis': 'bronze-darken-3',
   'bronze-foreground-onfill': 'white',
   'bronze-background-fill': 'bronze',
   'bronze-background-fill-emphasis': 'bronze-darken-1',
-  'bronze-background-soft': 'bronze-24',
-  'bronze-background-soft-emphasis': 'bronze-16',
+  'bronze-background-soft': 'bronze-16',
+  'bronze-background-soft-emphasis': 'bronze-8',
 };
 
 /** Alias semântico → token da paleta, para dark mode (`.dark` em tokens.native.css). */
@@ -512,7 +512,7 @@ const DARK_COLOR_ALIAS_MAP: Record<string, string> = {
   'surface-elevated': 'gray-800',
   'surface-card': 'gray-850',
   'surface-navigation': 'gray-850',
-  'surface-section': 'gray-900',
+  'surface-section': 'gray-850',
   'surface-page': 'gray-950',
   'surface-disable': 'black-8',
   'surface-settings-on': 'black-48',
@@ -732,31 +732,31 @@ const DARK_COLOR_ALIAS_MAP: Record<string, string> = {
   'gradient-pt-bg-1': 'gray-800',
   'gradient-pt-bg-2': 'gray-900',
 
-  // Gold (herdado do :root)
-  'gold-foreground': 'gold-darken-4',
-  'gold-foreground-emphasis': 'gold-darken-5',
-  'gold-foreground-onfill': 'gold-darken-5',
-  'gold-background-fill': 'gold',
-  'gold-background-fill-emphasis': 'gold-darken-1',
-  'gold-background-soft': 'gold-24',
+  // Gold
+  'gold-foreground': 'gold-lighten-1',
+  'gold-foreground-emphasis': 'gold-lighten-2',
+  'gold-foreground-onfill': 'gold-darken-6',
+  'gold-background-fill': 'gold-darken-1',
+  'gold-background-fill-emphasis': 'gold',
+  'gold-background-soft': 'gold-8',
   'gold-background-soft-emphasis': 'gold-16',
 
-  // Silver (herdado do :root)
-  'silver-foreground': 'silver-darken-4',
-  'silver-foreground-emphasis': 'silver-darken-6',
+  // Silver
+  'silver-foreground': 'silver-lighten-3',
+  'silver-foreground-emphasis': 'silver-lighten-5',
   'silver-foreground-onfill': 'white',
-  'silver-background-fill': 'silver',
-  'silver-background-fill-emphasis': 'silver-darken-1',
+  'silver-background-fill': 'silver-darken-1',
+  'silver-background-fill-emphasis': 'silver',
   'silver-background-soft': 'silver-8',
-  'silver-background-soft-emphasis': 'silver-4',
+  'silver-background-soft-emphasis': 'silver-16',
 
-  // Bronze (herdado do :root)
-  'bronze-foreground': 'bronze-darken-3',
-  'bronze-foreground-emphasis': 'bronze-darken-4',
-  'bronze-foreground-onfill': 'white',
-  'bronze-background-fill': 'bronze',
-  'bronze-background-fill-emphasis': 'bronze-darken-1',
-  'bronze-background-soft': 'bronze-24',
+  // Bronze
+  'bronze-foreground': 'bronze-lighten-3',
+  'bronze-foreground-emphasis': 'bronze-lighten-4',
+  'bronze-foreground-onfill': 'bronze-darken-5',
+  'bronze-background-fill': 'bronze-lighten-1',
+  'bronze-background-fill-emphasis': 'bronze',
+  'bronze-background-soft': 'bronze-8',
   'bronze-background-soft-emphasis': 'bronze-16',
 
   // Backdrop / drop shadow subtle

package/src/index.ts

@@ -15,7 +15,11 @@ export type { AlertButtonProps, AlertProps } from "@/components/Alert";
 
 // Badge
 export { Badge, badgeVariants } from "@/components/Badge";
-export type { BadgeAnimation, BadgeProps } from "@/components/Badge";
+export type {
+  BadgeAnimation,
+  BadgeLayout,
+  BadgeProps,
+} from "@/components/Badge";
 
 // Avatar
 export {
@@ -404,6 +408,22 @@ export type {
 export { Choice } from "@/components/Choice";
 export type { ChoiceProps, ChoiceTheme } from "@/components/Choice";
 
+// SegmentControl
+export {
+  SegmentControl,
+  SegmentControlContent,
+  SegmentControlList,
+  SegmentControlTrigger,
+  segmentControlTriggerVariants,
+} from "@/components/SegmentControl";
+export type {
+  SegmentControlContentProps,
+  SegmentControlListProps,
+  SegmentControlProps,
+  SegmentControlTriggerProps,
+  SegmentSize,
+} from "@/components/SegmentControl";
+
 // Filter
 export { Filter } from "@/components/Filter";
 export type { FilterProps } from "@/components/Filter";

package/src/lib/raised-surface.tsx

@@ -0,0 +1,21 @@
+import { View } from "react-native";
+
+import { useThemeColor } from "@/hooks/useThemeColor";
+
+// The selected card of `Choice` and `SegmentControl`, as its own layer: toggled on the content's
+// view, Android drew the fill without the radius. `boxShadow` draws both layers of the design's
+// `shadow/level-1`; the legacy `shadow*` props draw only one.
+function RaisedSurface() {
+  const layerA = useThemeColor("drop-shadow-layer-a");
+  const layerB = useThemeColor("drop-shadow-layer-b");
+
+  return (
+    <View
+      pointerEvents="none"
+      className="absolute inset-0 rounded-[6px] bg-surface-card"
+      style={{ boxShadow: `0 0 2px 0 ${layerA}, 0 2px 4px 0 ${layerB}` }}
+    />
+  );
+}
+
+export { RaisedSurface };