alouette 20.3.0 → 20.4.0

package/dist/index-react-native.cjs.js

@@ -15,6 +15,8 @@ const InfoRegularIcon = require('alouette-icons/phosphor-icons/InfoRegularIcon')
 const QuestionRegularIcon = require('alouette-icons/phosphor-icons/QuestionRegularIcon');
 const WarningRegularIcon = require('alouette-icons/phosphor-icons/WarningRegularIcon');
 const CaretDownRegularIcon = require('alouette-icons/phosphor-icons/CaretDownRegularIcon');
+const Animated = require('react-native-reanimated');
+const reactNativeSvg = require('react-native-svg');
 const CaretRightRegularIcon = require('alouette-icons/phosphor-icons/CaretRightRegularIcon');
 const WebBrowser = require('expo-web-browser');
 
@@ -55,7 +57,7 @@ const themeVariables = {
     "--color-interactive-accent-contained-bg-disabled": "#EBEBEB",
     "--color-interactive-accent-outlined-disabled": "#B8B8B8",
     "--color-screen": "#EBEBEB",
-    "--color-surface": "#F5F5F5",
+    "--color-surface": "#FAFAFA",
     "--color-highlight": "#FFFFFF",
     "--color-enabled": "#C7C7C7",
     "--color-highlight-accent": "#E0E0E0",
@@ -66,8 +68,8 @@ const themeVariables = {
     "--color-border-muted": "#8F8F8F",
     "--color-border-sharp": "#616161",
     "--color-interactive-contained-pressable": "#FFFFFF",
-    "--color-interactive-contained-hover": "#F5F5F5",
-    "--color-interactive-contained-focus": "#F5F5F5",
+    "--color-interactive-contained-hover": "#FAFAFA",
+    "--color-interactive-contained-focus": "#FAFAFA",
     "--color-interactive-contained-active": "#EBEBEB",
     "--color-interactive-outlined-pressable": "#616161",
     "--color-interactive-outlined-hover": "#8F8F8F",
@@ -84,9 +86,9 @@ const themeVariables = {
     "--color-on-accent-muted": "#616161",
     "--color-selection": "#47474740",
     "--color-interactive-accent-contained-bg": "#EBEBEB",
-    "--color-interactive-accent-contained-bg-hover": "#F5F5F5",
-    "--color-interactive-accent-contained-bg-focus": "#F5F5F5",
-    "--color-interactive-accent-contained-bg-active": "#F5F5F5"
+    "--color-interactive-accent-contained-bg-hover": "#FAFAFA",
+    "--color-interactive-accent-contained-bg-focus": "#FAFAFA",
+    "--color-interactive-accent-contained-bg-active": "#FAFAFA"
   },
   "dark": {
     "--color-translucent": "#1f1e1e55",
@@ -793,7 +795,7 @@ const interactiveBoxVariants = tailwindVariants.tv({
   base: [
     boxBaseClasses,
     "cursor-pointer",
-    "transition-[transform,background-color,border-color] duration-200 ease-in",
+    "transition-[transform,background-color,border-color] duration-fast ease-in",
     "disabled:cursor-not-allowed disabled:opacity-70 aria-disabled:cursor-not-allowed aria-disabled:opacity-70",
     "active:scale-[0.975]"
   ].join(" "),
@@ -1259,7 +1261,10 @@ function PresenceOne({
 
 const animationDurationsMs = {
   "slide": 600,
-  "collapse": 800
+  "collapse": 800,
+  "progress": 300,
+  "fade": 300,
+  "fast": 200
 };
 
 const pressableBoxVariants = tailwindVariants.tv(
@@ -1393,13 +1398,17 @@ const PressableBox = react.forwardRef(
   }
 );
 
+function useColorToken(className) {
+  const token = className.split(/\s+/).find((part) => part.startsWith("text-"))?.slice("text-".length);
+  return useThemeToken(`--color-${token ?? "sharp"}`);
+}
+
 function Icon({
   icon,
   size = 20,
   className = "text-sharp"
 }) {
-  const token = className.split(/\s+/).find((part) => part.startsWith("text-"))?.slice("text-".length);
-  const color = useThemeToken(`--color-${token ?? "sharp"}`);
+  const color = useColorToken(className);
   return react.cloneElement(icon, {
     color,
     width: size,
@@ -1842,7 +1851,7 @@ const inputVariants = tailwindVariants.tv(
     base: [
       "bg-highlight text-base text-sharp",
       "border",
-      "transition-[border-color,background-color,outline-color] duration-200 ease-in",
+      "transition-[border-color,background-color,outline-color] duration-fast ease-in",
       "outline-interactive-outlined-pressable",
       // to have proper outline color transition
       process.env.EXPO_PUBLIC_STORYBOOK_ENABLED ? "" : "border-interactive-outlined-pressable",
@@ -1993,7 +2002,7 @@ function useControllableValue(controlled, defaultValue, onValueChange) {
 const selectTriggerBaseClassName = [
   "flex-row items-center justify-between gap-xs",
   "rounded-md border px-m py-xs min-h-[44px]",
-  "transition-[border-color,outline-color,background-color] duration-200 ease-in"
+  "transition-[border-color,outline-color,background-color] duration-fast ease-in"
 ].join(" ");
 const triggerLabelVariants = tailwindVariants.tv({
   base: "flex-1 text-base",
@@ -2267,8 +2276,154 @@ function ConnectionState({
   return /* @__PURE__ */ jsxRuntime.jsx(AccentScope, { accent, children: /* @__PURE__ */ jsxRuntime.jsx(
     View,
     {
-      className: `absolute inset-x-0 top-0 z-9 h-0.5 bg-interactive-contained-pressable shadow-m transition-transform duration-700 ease-in-out ${hidden ? "-translate-y-6" : "translate-y-0"}`,
-      children: state ? /* @__PURE__ */ jsxRuntime.jsx(Text, { className: "absolute left-1/2 top-0.5 h-5.5 w-50 -translate-x-1/2 rounded-b-sm bg-interactive-contained-pressable text-center leading-5.5 text-on-accent transition-colors duration-200", children }) : null
+      className: `absolute inset-x-0 top-0 z-9 h-0.5 bg-interactive-contained-pressable shadow-m transition-transform duration-slide ease-in-out ${hidden ? "-translate-y-6" : "translate-y-0"}`,
+      children: state ? /* @__PURE__ */ jsxRuntime.jsx(Text, { className: "absolute left-1/2 top-0.5 h-5.5 w-50 -translate-x-1/2 rounded-b-sm bg-interactive-contained-pressable text-center leading-5.5 text-on-accent transition-colors duration-fast", children }) : null
+    }
+  ) });
+}
+
+const track = tailwindVariants.tv({
+  base: "absolute inset-x-0 top-0 z-10 overflow-hidden transition-opacity duration-fade",
+  variants: {
+    size: {
+      xs: "h-0.5",
+      sm: "h-1",
+      md: "h-1.5",
+      lg: "h-2"
+    },
+    hidden: {
+      true: "opacity-0",
+      false: "opacity-100"
+    }
+  },
+  defaultVariants: { size: "md", hidden: false }
+});
+function LinearProgress({
+  progress,
+  hidden = false,
+  accent = "brand",
+  size = "md"
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(AccentScope, { accent, children: /* @__PURE__ */ jsxRuntime.jsx(View, { pointerEvents: "none", className: track({ size, hidden }), children: /* @__PURE__ */ jsxRuntime.jsx(
+    View,
+    {
+      className: "h-full bg-accent transition-[width] duration-progress ease-out",
+      style: { width: `${progress}%` }
+    }
+  ) }) });
+}
+
+const AnimatedCircle = Animated.createAnimatedComponent(reactNativeSvg.Circle);
+const easeOut = Animated.Easing.bezier(0, 0, 0.58, 1);
+function RingCircle({
+  center,
+  radius,
+  strokeWidth,
+  strokeDasharray,
+  strokeDashoffset,
+  color,
+  width,
+  height
+}) {
+  const animatedOffset = Animated.useSharedValue(strokeDashoffset ?? 0);
+  react.useEffect(() => {
+    animatedOffset.value = Animated.withTiming(strokeDashoffset ?? 0, {
+      duration: animationDurationsMs.progress,
+      easing: easeOut
+    });
+  }, [animatedOffset, strokeDashoffset]);
+  const animatedProps = Animated.useAnimatedProps(() => ({
+    strokeDashoffset: animatedOffset.value
+  }));
+  return /* @__PURE__ */ jsxRuntime.jsx(reactNativeSvg.Svg, { color, width, height, children: strokeDasharray == null ? /* @__PURE__ */ jsxRuntime.jsx(
+    reactNativeSvg.Circle,
+    {
+      cx: center,
+      cy: center,
+      r: radius,
+      stroke: "currentColor",
+      strokeWidth,
+      fill: "none"
+    }
+  ) : /* @__PURE__ */ jsxRuntime.jsx(
+    AnimatedCircle,
+    {
+      animatedProps,
+      cx: center,
+      cy: center,
+      r: radius,
+      stroke: "currentColor",
+      strokeWidth,
+      strokeDasharray,
+      strokeLinecap: "round",
+      transform: `rotate(-90 ${center} ${center})`,
+      fill: "none"
+    }
+  ) });
+}
+
+const diameterBySize = {
+  xs: 16,
+  sm: 32,
+  md: 64,
+  lg: 128
+};
+const strokeWidthBySize = {
+  xs: 2,
+  sm: 4,
+  md: 8,
+  lg: 16
+};
+const ring = tailwindVariants.tv({
+  base: "relative transition-opacity duration-fade",
+  variants: {
+    hidden: {
+      true: "opacity-0",
+      false: "opacity-100"
+    }
+  },
+  defaultVariants: { hidden: false }
+});
+function CircularProgress({
+  progress,
+  hidden = false,
+  accent = "brand",
+  size = "md"
+}) {
+  const diameter = diameterBySize[size];
+  const strokeWidth = strokeWidthBySize[size];
+  const radius = (diameter - strokeWidth) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const clampedProgress = Math.min(Math.max(progress, 0), 100);
+  const dashOffset = circumference * (1 - clampedProgress / 100);
+  const center = diameter / 2;
+  const trackRing = /* @__PURE__ */ jsxRuntime.jsx(RingCircle, { center, radius, strokeWidth });
+  const fillRing = /* @__PURE__ */ jsxRuntime.jsx(
+    RingCircle,
+    {
+      center,
+      radius,
+      strokeWidth,
+      strokeDasharray: circumference,
+      strokeDashoffset: dashOffset
+    }
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(AccentScope, { accent, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    View,
+    {
+      className: ring({ hidden }),
+      style: { width: diameter, height: diameter },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(View, { className: "absolute inset-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+          Icon,
+          {
+            icon: trackRing,
+            size: diameter,
+            className: "text-highlight-accent"
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(View, { className: "absolute inset-0", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: fillRing, size: diameter, className: "text-accent" }) })
+      ]
     }
   ) });
 }
@@ -2562,6 +2717,7 @@ exports.Box = Box;
 exports.BreakpointNameEnum = BreakpointNameEnum;
 exports.Breakpoints = Breakpoints;
 exports.Button = Button;
+exports.CircularProgress = CircularProgress;
 exports.ConfirmationMessage = ConfirmationMessage;
 exports.ConnectionState = ConnectionState;
 exports.ExternalLink = ExternalLink;
@@ -2577,6 +2733,7 @@ exports.InfoMessage = InfoMessage;
 exports.InputText = InputText;
 exports.InteractiveBox = InteractiveBox;
 exports.InternalLinkButton = InternalLinkButton;
+exports.LinearProgress = LinearProgress;
 exports.Message = Message;
 exports.Modal = Modal;
 exports.Paragraph = Paragraph;