alouette 7.0.0-beta.2 → 7.0.0-beta.21

package/dist/index-browser.es.js

@@ -1,8 +1,9 @@
-import { jsx } from 'react/jsx-runtime';
-import { styled, View, useStyle, Text, useMedia, TamaguiProvider } from '@tamagui/core';
-export { Theme, View } from '@tamagui/core';
-import { ScrollView as ScrollView$1 } from 'react-native';
-import { createContext, useContext } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { styled, View, useStyle, Text, useConfiguration, useMedia, TamaguiProvider, Stack as Stack$1 } from '@tamagui/core';
+export { Theme, View, styled, withStaticProperties } from '@tamagui/core';
+import { createContext, useContext, Children } from 'react';
+import { InfoRegularIcon, WarningRegularIcon, CheckRegularIcon, WarningCircleRegularIcon, XRegularIcon, CaretRightRegularIcon } from 'alouette-icons/phosphor-icons';
+import { TextInput, ScrollView as ScrollView$1, Platform, Pressable } from 'react-native';
 
 const fullscreenStyle = {
   position: "absolute",
@@ -28,11 +29,11 @@ const getBorderAdditionalInteraction = ({
         return {
           borderColor: `$${prefix}.borderColor:hover`
         };
-      case `press`:
+      case "press":
         return {
           borderColor: `$${prefix}.borderColor:press`
         };
-      case `focus`:
+      case "focus":
         return {
           borderColor: `$${prefix}.borderColor:focus`
         };
@@ -57,7 +58,10 @@ const getBackgroundAdditionalInteraction = ({
   interactive,
   variant
 }) => {
-  const prefix = interactive === "text" ? "interactive.forms" : `interactive.${variant || "contained"}`;
+  const prefix = interactive === "text" ? "interactive.forms" : (
+    // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+    `interactive.${variant || "contained"}`
+  );
   if (disabled) {
     return {
       backgroundColor: `$${prefix}.backgroundColor:disabled`
@@ -69,11 +73,11 @@ const getBackgroundAdditionalInteraction = ({
         return {
           backgroundColor: `$${prefix}.backgroundColor:hover`
         };
-      case `press`:
+      case "press":
         return {
           backgroundColor: `$${prefix}.backgroundColor:press`
         };
-      case `focus`:
+      case "focus":
         return {
           backgroundColor: `$${prefix}.backgroundColor:focus`
         };
@@ -108,7 +112,10 @@ const withBackground = (val, { props }) => {
     throw new Error("A role prop is required while using interactive");
   }
   return {
-    backgroundColor: props.interactive ? `$interactive.${variant}.backgroundColor` : "$mainColor",
+    backgroundColor: props.interactive ? (
+      // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+      `$interactive.${variant}.backgroundColor`
+    ) : "$mainColor",
     ...props.interactive ? getBackgroundAdditionalInteraction(props) : void 0
   };
 };
@@ -137,9 +144,15 @@ const circular = {
     };
   }
 };
-const interactive = (isInteractiveOrInteractiveCursorType, { props }) => isInteractiveOrInteractiveCursorType ? {
-  cursor: props.disabled ? "not-allowed" : isInteractiveOrInteractiveCursorType === true ? "pointer" : isInteractiveOrInteractiveCursorType
-} : null;
+const interactive = (isInteractiveOrInteractiveCursorType, { props }) => {
+  if (!isInteractiveOrInteractiveCursorType) return null;
+  if (props.disabled) {
+    return { cursor: "not-allowed" };
+  }
+  return {
+    cursor: isInteractiveOrInteractiveCursorType === true ? "pointer" : isInteractiveOrInteractiveCursorType
+  };
+};
 const centered = {
   true: {
     alignItems: "center",
@@ -158,12 +171,16 @@ const variants$1 = {
   withBorder: withBorder
 };
 
-const Frame = styled(View, {
-  name: "Frame",
+const Box = styled(View, {
+  name: "Box",
   variants: variants$1,
   animation: "fast"
 });
 
+const PressableBox = styled(Box, {
+  interactive: true
+});
+
 function Icon({
   icon,
   size = 20,
@@ -177,24 +194,10 @@ function Icon({
     // if needed for native
     // resolveValues: Platform.OS === 'web' ? undefined: 'value',
   });
-  return /* @__PURE__ */ jsx(
-    Frame,
-    {
-      ...props,
-      centered: true,
-      alignSelf: align,
-      size,
-      style,
-      children: icon
-    }
-  );
+  return /* @__PURE__ */ jsx(Box, { ...props, centered: true, alignSelf: align, size, style, children: icon });
 }
 
-const Pressable = styled(Frame, {
-  interactive: true
-});
-
-const IconButtonFrame = styled(Pressable, {
+const IconButtonFrame = styled(PressableBox, {
   name: "IconButtonFrame",
   role: "button",
   centered: true,
@@ -221,24 +224,6 @@ function IconButton({
   ) });
 }
 
-const ScrollView = styled(
-  ScrollView$1,
-  {
-    name: "ScrollView",
-    scrollEnabled: true,
-    variants: {
-      fullscreen: {
-        true: fullscreenStyle
-      }
-    }
-  },
-  {
-    accept: {
-      contentContainerStyle: "style"
-    }
-  }
-);
-
 const variants = {
   fullscreen: {
     true: fullscreenStyle
@@ -249,12 +234,8 @@ const Stack = styled(View, {
   variants: {
     ...variants,
     type: {
-      h: {
-        flexDirection: "row"
-      },
-      v: {
-        flexDirection: "column"
-      }
+      h: { flexDirection: "row" },
+      v: { flexDirection: "column" }
     }
   }
 });
@@ -309,7 +290,7 @@ const TypographyParagraph = styled(Typography, {
   family: "body"
 });
 const TypographySizeContext = createContext(void 0);
-Typography.styleable(
+const TypographyWithContext = Typography.styleable(
   ({ size, ...props }, ref) => {
     const ancestorSize = useContext(TypographySizeContext);
     const sizeOrAncestorSizeOrDefaultSize = size || ancestorSize;
@@ -319,7 +300,7 @@ Typography.styleable(
     return /* @__PURE__ */ jsx(Typography, { ref, size, ...props });
   }
 );
-TypographyParagraph.styleable(
+const TypographyParagraphWithContext = TypographyParagraph.styleable(
   ({ size, ...props }, ref) => {
     const ancestorSize = useContext(TypographySizeContext);
     const sizeOrAncestorSizeOrDefaultSize = size || ancestorSize;
@@ -327,6 +308,307 @@ TypographyParagraph.styleable(
   }
 );
 
+const ButtonFrame = styled(PressableBox, {
+  name: "ButtonFrame",
+  role: "button",
+  centered: true,
+  minHeight: 42,
+  borderRadius: "$sm",
+  paddingHorizontal: "$md",
+  variants: {
+    variant: {
+      contained: {
+        withBackground: true
+      },
+      outlined: {
+        withBackground: true,
+        withBorder: true
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "contained"
+  }
+});
+function Button({
+  icon,
+  text,
+  disabled,
+  variant,
+  ...pressableProps
+}) {
+  return /* @__PURE__ */ jsx(ButtonFrame, { disabled, variant, ...pressableProps, children: /* @__PURE__ */ jsxs(HStack, { gap: "$xs", alignItems: "center", children: [
+    icon && /* @__PURE__ */ jsx(
+      Icon,
+      {
+        color: disabled ? "$contrastDisabled" : void 0,
+        contrast: variant === "contained" && !disabled,
+        icon
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Typography,
+      {
+        size: "md",
+        weight: "bold",
+        paddingVertical: "$xs",
+        color: disabled ? "$contrastDisabled" : void 0,
+        contrast: variant === "contained" && !disabled,
+        children: text
+      }
+    )
+  ] }) });
+}
+
+function FeedbackIcon({ type }) {
+  switch (type) {
+    case "warning":
+      return /* @__PURE__ */ jsx(WarningCircleRegularIcon, {});
+    case "success":
+      return /* @__PURE__ */ jsx(CheckRegularIcon, {});
+    case "danger":
+      return /* @__PURE__ */ jsx(WarningRegularIcon, {});
+    default:
+      return /* @__PURE__ */ jsx(InfoRegularIcon, {});
+  }
+}
+
+const MessageFrame = styled(Box, {
+  name: "MessageFrame",
+  alignItems: "center",
+  withBackground: true,
+  borderRadius: "$md",
+  paddingHorizontal: "$4",
+  flexDirection: "row",
+  gap: "$4"
+});
+const MessageText = styled(Typography, {
+  name: "MessageText",
+  contrast: true,
+  size: "md",
+  flexGrow: 1,
+  paddingVertical: "$4",
+  variants: {
+    centered: {
+      true: {
+        textAlign: "center",
+        paddingHorizontal: "$4"
+      }
+    }
+  }
+});
+const MessageIconContainer = styled(View, {
+  name: "MessageIconContainer",
+  alignItems: "center"
+});
+const MessageDismissButtonContainer = styled(View, {
+  name: "MessageDismissButtonContainer",
+  marginRight: "$2"
+});
+function Message({
+  theme,
+  textCentered,
+  children,
+  onDismiss
+}) {
+  return /* @__PURE__ */ jsxs(MessageFrame, { theme, children: [
+    textCentered ? null : /* @__PURE__ */ jsx(MessageIconContainer, { children: /* @__PURE__ */ jsx(Icon, { contrast: true, icon: /* @__PURE__ */ jsx(FeedbackIcon, { type: theme }) }) }),
+    /* @__PURE__ */ jsx(MessageText, { centered: textCentered, children }),
+    onDismiss ? /* @__PURE__ */ jsx(MessageDismissButtonContainer, { children: /* @__PURE__ */ jsx(IconButton, { icon: /* @__PURE__ */ jsx(XRegularIcon, {}), size: 40 }) }) : null
+  ] });
+}
+
+const StyledInputText = styled(TextInput, {
+  variants: variants$1,
+  padding: "$xs",
+  borderRadius: "$sm",
+  // @ts-expect-error missing prop but seems to work
+  color: "$forms.textColor",
+  withBorder: true,
+  withBackground: true,
+  borderWidth: 1,
+  borderBottomWidth: 3,
+  // reset browser style
+  outlineStyle: "none"
+});
+const InputText = styled(StyledInputText, {
+  name: "InputText",
+  interactive: "text",
+  theme: "primary"
+  // animation: "formElement", // remove all style ?
+});
+const TextArea = styled(InputText, {
+  multiline: true
+});
+
+const ScrollView = styled(
+  ScrollView$1,
+  {
+    name: "ScrollView",
+    scrollEnabled: true,
+    variants: {
+      fullscreen: {
+        true: fullscreenStyle
+      }
+    }
+  },
+  {
+    accept: {
+      contentContainerStyle: "style"
+    }
+  }
+);
+
+const StoryTitle = styled(Typography, {
+  family: "heading",
+  weight: "black",
+  variants: {
+    level: {
+      1: { size: "xl", marginBottom: "$8" },
+      2: { size: "lg", marginBottom: "$8" },
+      3: { size: "md", marginBottom: "$3" },
+      4: { size: "sm", marginBottom: "$3" }
+    }
+  },
+  defaultVariants: {
+    level: 1
+  }
+});
+
+const InternalStorySection = styled(VStack, {
+  marginBottom: "$8",
+  paddingHorizontal: "$4",
+  marginHorizontal: "$-4",
+  variants: {
+    withBackground: {
+      true: {
+        backgroundColor: "$backgroundColor"
+      }
+    }
+  }
+});
+function StorySection({
+  title,
+  children,
+  level = 1,
+  withBackground,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(InternalStorySection, { withBackground, ...props, children: [
+    /* @__PURE__ */ jsx(StoryTitle, { level: level + 1, children: title }),
+    children
+  ] });
+}
+function SubSection({
+  title,
+  children,
+  withBackground,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    InternalStorySection,
+    {
+      marginBottom: "$4",
+      withBackground,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(StoryTitle, { level: 3, children: title }),
+        children
+      ]
+    }
+  );
+}
+function Story({ preview, children }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    preview && /* @__PURE__ */ jsx(StorySection, { title: "Preview", paddingBottom: "$12", children: preview }),
+    children
+  ] });
+}
+Story.Section = StorySection;
+Story.SubSection = SubSection;
+
+function StoryContainer({
+  title,
+  children
+}) {
+  return /* @__PURE__ */ jsxs(ScrollView, { theme: "light", background: "#fff", padding: "$4", children: [
+    /* @__PURE__ */ jsx(StoryTitle, { level: 1, children: title }),
+    children
+  ] });
+}
+
+const StoryDecorator = (storyFn, { name, container }) => {
+  if (container === false) return storyFn();
+  return /* @__PURE__ */ jsx(StoryContainer, { title: name, children: storyFn() });
+};
+
+function StoryGridRow({
+  children,
+  breakpoint = "small",
+  flexWrap
+}) {
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      flexDirection: "column",
+      ...{
+        [`$${breakpoint}`]: {
+          flexDirection: "row",
+          marginVertical: "$-1",
+          marginBottom: "$4",
+          flexWrap: flexWrap ? "wrap" : void 0,
+          gap: flexWrap ? "$xs" : void 0
+        }
+      },
+      children: Children.map(children, (child) => /* @__PURE__ */ jsx(
+        View,
+        {
+          paddingTop: "$2",
+          paddingBottom: "$4",
+          ...{
+            [`$${breakpoint}`]: {
+              flexGrow: 1,
+              flexBasis: flexWrap ? void 0 : 0,
+              paddingTop: 0,
+              paddingBottom: 0,
+              marginVertical: "$2"
+            }
+          },
+          children: child
+        }
+      ))
+    }
+  );
+}
+function StoryGridCol({
+  title,
+  children,
+  platform = "all"
+}) {
+  const isNative = Platform.OS === "ios" || Platform.OS === "android";
+  if (Platform.OS === "web" && platform === "native") {
+    return null;
+  }
+  if (isNative && platform === "web") {
+    return null;
+  }
+  return title ? /* @__PURE__ */ jsxs(VStack, { children: [
+    /* @__PURE__ */ jsx(StoryTitle, { level: 4, numberOfLines: 1, children: title }),
+    children
+  ] }) : children;
+}
+const StoryGrid = {
+  Row: StoryGridRow,
+  Col: StoryGridCol
+};
+
+function WithTamaguiConfig({
+  render
+}) {
+  const config = useConfiguration();
+  return render(config);
+}
+
 var BreakpointNameEnum = /* @__PURE__ */ ((BreakpointNameEnum2) => {
   BreakpointNameEnum2["BASE"] = "base";
   BreakpointNameEnum2["SMALL"] = "small";
@@ -398,7 +680,54 @@ function AlouetteProvider({
   return /* @__PURE__ */ jsx(TamaguiProvider, { config: tamaguiConfig, defaultTheme: "light", children });
 }
 
-const AlouetteDecorator = (storyFn, context) => /* @__PURE__ */ jsx(AlouetteProvider, { tamaguiConfig: context.parameters.tamaguiConfig, children: storyFn(context) });
+const AlouetteDecorator = (storyFn, context) => (
+  // eslint-disable-next-line react/destructuring-assignment
+  /* @__PURE__ */ jsx(AlouetteProvider, { tamaguiConfig: context.parameters.tamaguiConfig, children: storyFn(context) })
+);
+
+const Separator = styled(Stack$1, {
+  name: "Separator",
+  flexGrow: 1,
+  flexShrink: 0,
+  height: 0,
+  maxHeight: 0,
+  borderColor: "$borderColor",
+  borderWidth: 0,
+  borderBottomWidth: 1,
+  y: -0.5,
+  variants: {
+    vertical: {
+      true: {
+        height: "auto",
+        maxHeight: "auto",
+        width: 0,
+        maxWidth: 0,
+        borderBottomWidth: 0,
+        borderRightWidth: 1,
+        y: 0,
+        x: -0.5
+      }
+    }
+  }
+});
+
+function PressableListItem({
+  children,
+  onPress
+}) {
+  return /* @__PURE__ */ jsx(Pressable, { onPress, children: /* @__PURE__ */ jsxs(
+    HStack,
+    {
+      justifyContent: "space-between",
+      paddingHorizontal: "$4",
+      paddingVertical: "$3",
+      children: [
+        /* @__PURE__ */ jsx(View, { children }),
+        /* @__PURE__ */ jsx(Stack, { justifyContent: "center", children: /* @__PURE__ */ jsx(Icon, { icon: /* @__PURE__ */ jsx(CaretRightRegularIcon, {}), size: 20 }) })
+      ]
+    }
+  ) });
+}
 
-export { AlouetteDecorator, AlouetteProvider, Frame, HStack, Icon, IconButton, ScrollView, Stack, SwitchBreakpointsUsingDisplayNone, SwitchBreakpointsUsingNull, Typography, VStack, useCurrentBreakpointName };
+export { AlouetteDecorator, AlouetteProvider, Box, Button, HStack, Icon, IconButton, InputText, Message, PressableBox, PressableListItem, ScrollView, Separator, Stack, Story, StoryContainer, StoryDecorator, StoryGrid, StoryTitle, SwitchBreakpointsUsingDisplayNone, SwitchBreakpointsUsingNull, TextArea, Typography, TypographyParagraph, TypographyParagraphWithContext, TypographyWithContext, VStack, WithTamaguiConfig, useCurrentBreakpointName };
 //# sourceMappingURL=index-browser.es.js.map