alouette 19.1.0 → 19.3.0

package/dist/index-browser.es.js

@@ -1,9 +1,10 @@
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import { VariableContextProvider, styled as styled$1 } from 'nativewind';
-import { createContext, useContext, forwardRef, Fragment, Children, cloneElement, useRef, useState, useEffect, isValidElement, useCallback } from 'react';
+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 { extendTailwindMerge, twMerge as twMerge$1 } from 'tailwind-merge';
 import { tv } from 'tailwind-variants';
+import { CaretDownRegularIcon } from 'alouette-icons/phosphor-icons/CaretDownRegularIcon';
 import { CheckRegularIcon } from 'alouette-icons/phosphor-icons/CheckRegularIcon';
 import { InfoRegularIcon } from 'alouette-icons/phosphor-icons/InfoRegularIcon';
 import { WarningRegularIcon } from 'alouette-icons/phosphor-icons/WarningRegularIcon';
@@ -795,6 +796,26 @@ const InteractiveBox = forwardRef(
     }
   )
 );
+const InteractiveBoxHitSlop = forwardRef(
+  ({ withFocusVisibleOutline, children, className, ...rest }, ref) => {
+    const child = Children.only(children);
+    return /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        ref,
+        pointerEvents: "auto",
+        className: `flex-center ${className ?? ""}`,
+        ...rest,
+        children: cloneElement(child, {
+          className: interactiveBoxVariants({
+            withFocusVisibleOutline,
+            className: child.props.className
+          })
+        })
+      }
+    );
+  }
+);
 const SafeAreaBox = forwardRef(
   (props, ref) => {
     const insets = useSafeAreaInsets();
@@ -1665,8 +1686,9 @@ const TextArea = forwardRef((props, ref) => {
   return /* @__PURE__ */ jsx(InputText, { ref, multiline: true, ...props });
 });
 
-const TRACK_HEIGHT = 44;
-const TRACK_WIDTH = 66;
+const PRESSABLE_HEIGHT = 44;
+const TRACK_HEIGHT = 36;
+const TRACK_WIDTH = 58;
 const THUMB_PADDING = TRACK_HEIGHT * 0.1;
 const THUMB_SIZE = TRACK_HEIGHT * 0.8;
 const TRAVEL_X = TRACK_WIDTH - THUMB_SIZE - THUMB_PADDING * 2;
@@ -1674,6 +1696,8 @@ const trackVariants = tv(
   {
     // TODO if we can fix web to use proper button, change aria-disabled to disabled
     base: [
+      "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",
       "outline-interactive-outlined-outline-focus",
@@ -1725,15 +1749,14 @@ function SwitchInner({
 }) {
   const [value, setValue] = useControllableChecked(checked, onValueChange);
   return /* @__PURE__ */ jsx(
-    InteractiveBox,
+    InteractiveBoxHitSlop,
     {
       withFocusVisibleOutline: true,
       role: "switch",
       "aria-checked": value,
       "aria-disabled": disabled === true,
       disabled,
-      className: trackVariants({ checked: value, forceStyle }),
-      style: { width: TRACK_WIDTH, height: TRACK_HEIGHT },
+      style: { height: PRESSABLE_HEIGHT, width: TRACK_WIDTH },
       onPress: () => {
         setValue(!value);
       },
@@ -1742,14 +1765,22 @@ function SwitchInner({
         View$1,
         {
           "aria-disabled": disabled === true,
-          className: thumbVariants({}),
-          style: {
-            width: THUMB_SIZE,
-            height: THUMB_SIZE,
-            top: THUMB_PADDING,
-            left: THUMB_PADDING,
-            transform: [{ translateX: value ? TRAVEL_X : 0 }]
-          }
+          className: trackVariants({ checked: value, forceStyle }),
+          style: { width: TRACK_WIDTH, height: TRACK_HEIGHT },
+          children: /* @__PURE__ */ jsx(
+            View$1,
+            {
+              "aria-disabled": disabled === true,
+              className: thumbVariants({}),
+              style: {
+                width: THUMB_SIZE,
+                height: THUMB_SIZE,
+                top: THUMB_PADDING,
+                left: THUMB_PADDING,
+                transform: [{ translateX: value ? TRAVEL_X : 0 }]
+              }
+            }
+          )
         }
       )
     }
@@ -1759,6 +1790,239 @@ function Switch({ accent, ...rest }) {
   return /* @__PURE__ */ jsx(AccentScope, { accent, children: /* @__PURE__ */ jsx(SwitchInner, { ...rest }) });
 }
 
+function useControllableValue(controlled, defaultValue, onValueChange) {
+  const [internal, setInternal] = useState(defaultValue);
+  const value = controlled ?? internal;
+  const setValue = useCallback(
+    (next) => {
+      if (controlled === void 0) {
+        setInternal(next);
+      }
+      if (next !== value) {
+        onValueChange?.(next);
+      }
+    },
+    [controlled, onValueChange, value]
+  );
+  return [value, setValue];
+}
+const triggerLabelVariants = tv({
+  base: "flex-1 text-base",
+  variants: {
+    // Mirrors InputText: sharp value, form-placeholder, form-disabled-text.
+    state: {
+      value: "text-sharp",
+      placeholder: "text-form-placeholder",
+      disabled: "text-form-disabled-text"
+    }
+  },
+  defaultVariants: { state: "value" }
+});
+function SelectTriggerContent({
+  label,
+  placeholder,
+  disabled
+}) {
+  const state = (() => {
+    if (label === void 0) return "placeholder";
+    if (disabled) return "disabled";
+    return "value";
+  })();
+  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    /* @__PURE__ */ jsx(Text, { numberOfLines: 1, className: triggerLabelVariants({ state }), children: label ?? placeholder ?? "" }),
+    /* @__PURE__ */ jsx(
+      Icon,
+      {
+        icon: /* @__PURE__ */ jsx(CaretDownRegularIcon, {}),
+        size: 18,
+        className: disabled ? "text-form-disabled-text" : "text-muted"
+      }
+    )
+  ] });
+}
+
+const wrapperVariants = tv(
+  {
+    base: [
+      "flex-row flex-1 rounded-md border min-h-11",
+      "transition-[border-color,outline-color] duration-200 ease-in",
+      "outline-interactive-outlined-pressable"
+      // for a proper outline color transition
+    ].join(" "),
+    variants: {
+      // bg lives in each branch (not base) so the disabled bg never competes
+      // with bg-highlight: two same-specificity background utilities would let
+      // stylesheet order, not className order, decide the winner.
+      disabled: {
+        true: "bg-disabled-interactive-muted border-interactive-outlined-disabled cursor-not-allowed",
+        false: [
+          "bg-highlight",
+          "border-interactive-outlined-pressable",
+          "hover:border-interactive-outlined-hover",
+          "focus-within:border-interactive-outlined-focus",
+          "focus-within:outline-1 focus-within:outline-interactive-outlined-focus focus-within:outline-offset-0",
+          "active:border-interactive-outlined-active"
+        ].join(" ")
+      }
+    },
+    defaultVariants: { disabled: false }
+  },
+  { twMerge: false }
+);
+const paddingX = 16;
+const caretReserve = 26;
+const selectStyle = (disabled) => ({
+  appearance: "none",
+  WebkitAppearance: "none",
+  boxSizing: "border-box",
+  minHeight: 44,
+  width: "auto",
+  margin: 0,
+  border: 0,
+  background: "transparent",
+  color: "transparent",
+  font: "inherit",
+  paddingTop: 0,
+  paddingBottom: 0,
+  paddingLeft: paddingX,
+  paddingRight: paddingX + caretReserve,
+  outline: "none",
+  cursor: disabled ? "not-allowed" : "pointer"
+});
+function Select({
+  options,
+  value,
+  defaultValue,
+  onValueChange,
+  placeholder,
+  disabled,
+  accent,
+  testID,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby
+}) {
+  const [current, setValue] = useControllableValue(
+    value,
+    defaultValue,
+    onValueChange
+  );
+  const selected = options.find((option) => option.value === current);
+  const [sharpColor, disabledTextColor, placeholderColor, highlightColor] = useThemeToken([
+    "--color-sharp",
+    "--color-form-disabled-text",
+    "--color-form-placeholder",
+    "--color-highlight"
+  ]);
+  const optionStyle = (optionDisabled) => ({
+    color: optionDisabled ? disabledTextColor : sharpColor,
+    backgroundColor: highlightColor
+  });
+  return /* @__PURE__ */ jsx(AccentScope, { accent, children: /* @__PURE__ */ jsxs(View$1, { className: wrapperVariants({ disabled }), children: [
+    /* @__PURE__ */ jsxs(
+      "select",
+      {
+        value: current ?? "",
+        disabled,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledby,
+        "data-testid": testID,
+        style: selectStyle(disabled),
+        onChange: (event) => {
+          setValue(event.target.value);
+        },
+        children: [
+          placeholder === void 0 ? null : /* @__PURE__ */ jsx(
+            "option",
+            {
+              disabled: true,
+              value: "",
+              style: {
+                color: placeholderColor,
+                backgroundColor: highlightColor
+              },
+              children: placeholder
+            }
+          ),
+          options.map((option) => /* @__PURE__ */ jsx(
+            "option",
+            {
+              value: option.value,
+              disabled: option.disabled,
+              style: optionStyle(option.disabled),
+              children: option.label
+            },
+            option.value
+          ))
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      View$1,
+      {
+        pointerEvents: "none",
+        className: "absolute inset-0 flex-row items-center justify-between gap-xs px-m",
+        children: /* @__PURE__ */ jsx(
+          SelectTriggerContent,
+          {
+            label: selected?.label,
+            placeholder,
+            disabled
+          }
+        )
+      }
+    )
+  ] }) });
+}
+
+const badgeVariants = tv(
+  {
+    slots: {
+      frame: "flex-row items-center self-start rounded-full",
+      text: "font-body-bold",
+      icon: ""
+    },
+    variants: {
+      size: {
+        sm: { frame: "gap-xxs px-xs py-xxs", text: "text-xs", icon: "" },
+        md: { frame: "gap-xs px-sm py-xxs", text: "text-sm", icon: "" }
+      },
+      variant: {
+        solid: {
+          frame: "bg-highlight-accent",
+          text: "text-sharp",
+          icon: "text-sharp"
+        },
+        "solid.enabled": {
+          frame: "bg-enabled",
+          text: "text-sharp",
+          icon: "text-sharp"
+        },
+        outlined: {
+          frame: "border border-accent",
+          text: "text-accent",
+          icon: "text-accent"
+        }
+      }
+    },
+    defaultVariants: { size: "md", variant: "solid" }
+  },
+  { twMerge: false }
+);
+const ICON_SIZE$1 = { sm: 12, md: 16 };
+function Badge({
+  accent = "brand",
+  size = "md",
+  variant = "solid",
+  icon,
+  children
+}) {
+  const styles = badgeVariants({ size, variant });
+  return /* @__PURE__ */ jsx(AccentScope, { accent, children: /* @__PURE__ */ jsxs(Box, { className: styles.frame(), children: [
+    icon ? /* @__PURE__ */ jsx(Icon, { icon, size: ICON_SIZE$1[size], className: styles.icon() }) : null,
+    /* @__PURE__ */ jsx(Text, { className: styles.text(), children })
+  ] }) });
+}
+
 const messageFrameVariants = tv(
   {
     base: "flex-row items-center bg-highlight-accent overflow-hidden",
@@ -2005,5 +2269,5 @@ function ExternalLink({
   );
 }
 
-export { AccentScope, AlouetteDecorator, AlouetteProvider, Box, BreakpointNameEnum, Breakpoints, Button, ConfirmationMessage, ExternalLink, ExternalLinkButton, FlatList, GradientBackground, GradientScrollView, HStack, Icon, IconButton, InfoMessage, InputText, InteractiveBox, InternalLinkButton, Message, Paragraph, PresenceList, PresenceOne, PressableBox, PressableListItem, SafeAreaBox, SafeAreaProvider, ScopedTheme, ScrollView, SectionList, 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, AlouetteDecorator, AlouetteProvider, Badge, Box, BreakpointNameEnum, Breakpoints, Button, ConfirmationMessage, 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 };
 //# sourceMappingURL=index-browser.es.js.map