alouette 20.2.0 → 20.4.0

package/dist/index-browser.es.js

@@ -1,14 +1,15 @@
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import { VariableContextProvider, styled as styled$1 } from 'nativewind';
-import { createContext, useContext, forwardRef, Children, cloneElement, Fragment, useRef, useState, useEffect, isValidElement, useCallback } from 'react';
-import { useColorScheme, View as View$1, Text as Text$1, ScrollView as ScrollView$1, FlatList as FlatList$1, SectionList as SectionList$1, Pressable, Platform, TextInput, useWindowDimensions } from 'react-native-web';
+import { createContext, useContext, forwardRef, Children, cloneElement, Fragment, useRef, useState, useEffect, isValidElement, useId, useCallback } from 'react';
+import { useColorScheme, View as View$1, Text as Text$1, ScrollView as ScrollView$1, FlatList as FlatList$1, SectionList as SectionList$1, Pressable, Platform, useWindowDimensions, Modal as Modal$1, TextInput } from 'react-native-web';
 import { extendTailwindMerge, twMerge as twMerge$1 } from 'tailwind-merge';
 import { tv } from 'tailwind-variants';
-import { CaretDownRegularIcon } from 'alouette-icons/phosphor-icons/CaretDownRegularIcon';
+import { XRegularIcon } from 'alouette-icons/phosphor-icons/XRegularIcon';
 import { CheckRegularIcon } from 'alouette-icons/phosphor-icons/CheckRegularIcon';
 import { InfoRegularIcon } from 'alouette-icons/phosphor-icons/InfoRegularIcon';
+import { QuestionRegularIcon } from 'alouette-icons/phosphor-icons/QuestionRegularIcon';
 import { WarningRegularIcon } from 'alouette-icons/phosphor-icons/WarningRegularIcon';
-import { XRegularIcon } from 'alouette-icons/phosphor-icons/XRegularIcon';
+import { CaretDownRegularIcon } from 'alouette-icons/phosphor-icons/CaretDownRegularIcon';
 import { CaretRightRegularIcon } from 'alouette-icons/phosphor-icons/CaretRightRegularIcon';
 
 const ThemeContext = createContext("light");
@@ -35,7 +36,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",
@@ -46,8 +47,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",
@@ -64,9 +65,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",
@@ -784,7 +785,7 @@ const interactiveBoxVariants = 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(" "),
@@ -1250,21 +1251,12 @@ function PresenceOne({
 
 const animationDurationsMs = {
   "slide": 600,
-  "collapse": 800
+  "collapse": 800,
+  "progress": 300,
+  "fade": 300,
+  "fast": 200
 };
 
-function Icon({
-  icon,
-  size = 20,
-  className = "text-sharp"
-}) {
-  return cloneElement(icon, {
-    className,
-    width: size,
-    height: size
-  });
-}
-
 const pressableBoxVariants = tv(
   {
     extend: interactiveBoxVariants,
@@ -1396,6 +1388,18 @@ const PressableBox = forwardRef(
   }
 );
 
+function Icon({
+  icon,
+  size = 20,
+  className = "text-sharp"
+}) {
+  return cloneElement(icon, {
+    className,
+    width: size,
+    height: size
+  });
+}
+
 const buttonHeight = {
   sm: 38,
   md: 44
@@ -1607,12 +1611,231 @@ function IconButton({
   );
 }
 
+const panelVariants = tv(
+  {
+    // w-full so the panel shrinks on small screens (the backdrop padding keeps a
+    // margin); max-w caps it on wide viewports.
+    base: "w-full",
+    variants: {
+      size: {
+        sm: "max-w-[360px]",
+        md: "max-w-[520px]",
+        lg: "max-w-[720px]"
+      }
+    },
+    defaultVariants: { size: "md" }
+  },
+  { twMerge: false }
+);
+const titleReserveVariants = tv(
+  {
+    variants: {
+      size: {
+        sm: "pr-xxl",
+        md: "pr-xl",
+        lg: "pr-xl"
+      }
+    },
+    defaultVariants: { size: "md" }
+  },
+  { twMerge: false }
+);
+function Modal({
+  visible,
+  onClose,
+  children,
+  icon,
+  footer,
+  accent,
+  size = "md",
+  title,
+  hideCloseButton = false,
+  closeButtonAriaLabel = "Close",
+  role = "dialog",
+  "aria-describedby": ariaDescribedby,
+  testID,
+  "aria-label": ariaLabel
+}) {
+  const { height: windowHeight } = useWindowDimensions();
+  const titleId = useId();
+  return /* @__PURE__ */ jsx(AccentScope, { accent, children: /* @__PURE__ */ jsx(
+    Modal$1,
+    {
+      transparent: true,
+      visible,
+      animationType: "fade",
+      onRequestClose: onClose,
+      children: /* @__PURE__ */ jsxs(View, { className: "flex-1 flex-center p-l", children: [
+        /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            "aria-hidden": true,
+            focusable: false,
+            className: "absolute inset-0 bg-translucent",
+            onPress: onClose
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          View,
+          {
+            "aria-modal": true,
+            role,
+            "aria-label": title === void 0 ? ariaLabel : void 0,
+            "aria-labelledby": title === void 0 ? void 0 : titleId,
+            "aria-describedby": ariaDescribedby,
+            testID,
+            className: `relative ${panelVariants({ size })}`,
+            children: /* @__PURE__ */ jsxs(
+              Surface,
+              {
+                variant: "highlight",
+                size,
+                shadow: "l",
+                className: "relative gap-m",
+                children: [
+                  title === void 0 && icon === void 0 ? null : /* @__PURE__ */ jsxs(
+                    HStack,
+                    {
+                      className: `items-center gap-xs ${hideCloseButton ? "" : titleReserveVariants({ size })}`,
+                      children: [
+                        icon === void 0 ? null : /* @__PURE__ */ jsx(Icon, { icon, size: 24, className: "text-accent" }),
+                        title === void 0 ? null : /* @__PURE__ */ jsx(
+                          Text,
+                          {
+                            nativeID: titleId,
+                            className: "shrink font-heading-bold text-xl leading-tight text-sharp",
+                            children: title
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  hideCloseButton ? null : /* @__PURE__ */ jsx(
+                    IconButton,
+                    {
+                      icon: /* @__PURE__ */ jsx(XRegularIcon, {}),
+                      variant: "ghost",
+                      size: size === "lg" ? "md" : size,
+                      "aria-label": closeButtonAriaLabel,
+                      className: "absolute right-sm top-sm",
+                      onPress: onClose
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(ScrollView, { style: { maxHeight: windowHeight * 0.7 }, children: /* @__PURE__ */ jsx(VStack, { className: "gap-m", children }) }),
+                  footer === void 0 ? null : /* @__PURE__ */ jsx(HStack, { className: "items-center justify-end gap-m", children: footer })
+                ]
+              }
+            )
+          }
+        )
+      ] })
+    }
+  ) });
+}
+
+function resolveVariant(props, accent) {
+  switch (props.variant) {
+    case "alert": {
+      const { onClose, closeText } = props;
+      return {
+        onDismiss: onClose,
+        footer: /* @__PURE__ */ jsx(Button, { accent, text: closeText ?? "OK", onPress: onClose })
+      };
+    }
+    case "required": {
+      const { onConfirm, confirmText, confirmDisabled } = props;
+      return {
+        // Non-dismissible: only the explicit action closes it.
+        onDismiss: () => void 0,
+        footer: /* @__PURE__ */ jsx(
+          Button,
+          {
+            accent,
+            text: confirmText ?? "OK",
+            disabled: confirmDisabled,
+            onPress: onConfirm
+          }
+        )
+      };
+    }
+    case "confirm":
+    case void 0:
+    default: {
+      const { onConfirm, onCancel, confirmText, cancelText, confirmDisabled } = props;
+      return {
+        onDismiss: onCancel,
+        footer: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outlined",
+              text: cancelText ?? "Cancel",
+              onPress: onCancel
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              accent,
+              text: confirmText ?? "Confirm",
+              disabled: confirmDisabled,
+              onPress: onConfirm
+            }
+          )
+        ] })
+      };
+    }
+  }
+}
+function AlertDialog(props) {
+  const {
+    visible,
+    title,
+    children,
+    accent = "danger",
+    icon,
+    size = "md",
+    testID
+  } = props;
+  const descriptionId = useId();
+  const { footer, onDismiss } = resolveVariant(props, accent);
+  return /* @__PURE__ */ jsx(
+    Modal,
+    {
+      hideCloseButton: true,
+      visible,
+      role: "alertdialog",
+      accent,
+      size,
+      title,
+      icon,
+      "aria-describedby": children === void 0 ? void 0 : descriptionId,
+      testID,
+      footer,
+      onClose: onDismiss,
+      children: children === void 0 ? null : /* @__PURE__ */ jsx(Text, { nativeID: descriptionId, className: "text-base text-muted", children })
+    }
+  );
+}
+function QuestionAlertDialog(props) {
+  return /* @__PURE__ */ jsx(AlertDialog, { ...props, icon: /* @__PURE__ */ jsx(QuestionRegularIcon, {}) });
+}
+function WarningAlertDialog(props) {
+  return /* @__PURE__ */ jsx(AlertDialog, { ...props, icon: /* @__PURE__ */ jsx(WarningRegularIcon, {}) });
+}
+function InfoAlertDialog(props) {
+  return /* @__PURE__ */ jsx(AlertDialog, { ...props, icon: /* @__PURE__ */ jsx(InfoRegularIcon, {}) });
+}
+function SuccessAlertDialog(props) {
+  return /* @__PURE__ */ jsx(AlertDialog, { ...props, icon: /* @__PURE__ */ jsx(CheckRegularIcon, {}) });
+}
+
 const inputVariants = 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",
@@ -1709,7 +1932,7 @@ const trackVariants = tv(
       "height-[36px] w-[58px]",
       // Must be identical to TRACK_HEIGHT and TRACK_WIDTH constants above
       "relative rounded-full overflow-hidden shadow-lowered pointer-events-auto",
-      "transition-background-color duration-200 ease-in",
+      "transition-background-color duration-fast ease-in",
       "outline-interactive-outlined-outline-focus",
       "aria-disabled:bg-disabled-interactive-muted"
     ].join(" "),
@@ -1728,7 +1951,7 @@ const thumbVariants = tv(
   {
     base: [
       "absolute rounded-full shadow-s aria-disabled:shadow-none",
-      "transition-transform duration-200 ease-in",
+      "transition-transform duration-fast ease-in",
       "bg-surface aria-disabled:bg-disabled-interactive"
     ].join(" ")
   },
@@ -1854,8 +2077,8 @@ function SelectTriggerContent({
 const wrapperVariants = tv(
   {
     base: [
-      "flex-row flex-1 rounded-md border min-h-11",
-      "transition-[border-color,outline-color] duration-200 ease-in",
+      "relative flex-row flex-1 rounded-md border min-h-11",
+      "transition-[border-color,outline-color] duration-fast ease-in",
       "outline-interactive-outlined-pressable"
       // for a proper outline color transition
     ].join(" "),
@@ -2059,8 +2282,133 @@ function ConnectionState({
   return /* @__PURE__ */ jsx(AccentScope, { accent, children: /* @__PURE__ */ 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__ */ 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__ */ 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 = 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__ */ jsx(AccentScope, { accent, children: /* @__PURE__ */ jsx(View, { pointerEvents: "none", className: track({ size, hidden }), children: /* @__PURE__ */ jsx(
+    View,
+    {
+      className: "h-full bg-accent transition-[width] duration-progress ease-out",
+      style: { width: `${progress}%` }
+    }
+  ) }) });
+}
+
+function RingCircle({
+  center,
+  radius,
+  strokeWidth,
+  strokeDasharray,
+  strokeDashoffset,
+  className,
+  width,
+  height
+}) {
+  return /* @__PURE__ */ jsx("svg", { className, width, height, children: /* @__PURE__ */ jsx(
+    "circle",
+    {
+      cx: center,
+      cy: center,
+      r: radius,
+      stroke: "currentColor",
+      strokeWidth,
+      strokeDasharray,
+      strokeDashoffset,
+      strokeLinecap: strokeDasharray == null ? void 0 : "round",
+      transform: strokeDasharray == null ? void 0 : `rotate(-90 ${center} ${center})`,
+      className: strokeDasharray == null ? void 0 : "transition-[stroke-dashoffset] duration-progress ease-out",
+      fill: "none"
+    }
+  ) });
+}
+
+const diameterBySize = {
+  xs: 16,
+  sm: 32,
+  md: 64,
+  lg: 128
+};
+const strokeWidthBySize = {
+  xs: 2,
+  sm: 4,
+  md: 8,
+  lg: 16
+};
+const ring = 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__ */ jsx(RingCircle, { center, radius, strokeWidth });
+  const fillRing = /* @__PURE__ */ jsx(
+    RingCircle,
+    {
+      center,
+      radius,
+      strokeWidth,
+      strokeDasharray: circumference,
+      strokeDashoffset: dashOffset
+    }
+  );
+  return /* @__PURE__ */ jsx(AccentScope, { accent, children: /* @__PURE__ */ jsxs(
+    View,
+    {
+      className: ring({ hidden }),
+      style: { width: diameter, height: diameter },
+      children: [
+        /* @__PURE__ */ jsx(View, { className: "absolute inset-0", children: /* @__PURE__ */ jsx(
+          Icon,
+          {
+            icon: trackRing,
+            size: diameter,
+            className: "text-highlight-accent"
+          }
+        ) }),
+        /* @__PURE__ */ jsx(View, { className: "absolute inset-0", children: /* @__PURE__ */ jsx(Icon, { icon: fillRing, size: diameter, className: "text-accent" }) })
+      ]
     }
   ) });
 }
@@ -2311,5 +2659,5 @@ function ExternalLink({
   );
 }
 
-export { AccentScope, AlouetteDecorator, AlouetteProvider, Badge, Box, BreakpointNameEnum, Breakpoints, Button, ConfirmationMessage, ConnectionState, ExternalLink, ExternalLinkButton, FlatList, GradientBackground, GradientScrollView, HStack, Icon, IconButton, InfoMessage, InputText, InteractiveBox, InternalLinkButton, Message, Paragraph, PresenceList, PresenceOne, PressableBox, PressableListItem, SafeAreaBox, SafeAreaProvider, ScopedTheme, ScrollView, SectionList, Select, Separator, Stack, Story, StoryContainer, StoryDecorator, StoryGrid, StoryTitle, Surface, Switch, SwitchBreakpointsUsingDisplayNone, SwitchBreakpointsUsingNull, Text, TextArea, VStack, View, WarningMessage, animationDurationsMs, styled, themeVariables, useCurrentBreakpointName, useCurrentBreakpointNameFiltered, useCurrentMode, useCurrentTheme, useSafeAreaInsets, useThemeToken };
+export { AccentScope, AlertDialog, AlouetteDecorator, AlouetteProvider, Badge, Box, BreakpointNameEnum, Breakpoints, Button, CircularProgress, ConfirmationMessage, ConnectionState, ExternalLink, ExternalLinkButton, FlatList, GradientBackground, GradientScrollView, HStack, Icon, IconButton, InfoAlertDialog, InfoMessage, InputText, InteractiveBox, InternalLinkButton, LinearProgress, Message, Modal, Paragraph, PresenceList, PresenceOne, PressableBox, PressableListItem, QuestionAlertDialog, SafeAreaBox, SafeAreaProvider, ScopedTheme, ScrollView, SectionList, Select, Separator, Stack, Story, StoryContainer, StoryDecorator, StoryGrid, StoryTitle, SuccessAlertDialog, Surface, Switch, SwitchBreakpointsUsingDisplayNone, SwitchBreakpointsUsingNull, Text, TextArea, VStack, View, WarningAlertDialog, WarningMessage, animationDurationsMs, styled, themeVariables, useCurrentBreakpointName, useCurrentBreakpointNameFiltered, useCurrentMode, useCurrentTheme, useSafeAreaInsets, useThemeToken };
 //# sourceMappingURL=index-browser.es.js.map