@timmbr/native-ui 0.0.0-stage → 1.0.1

package/dist/components/Toast/Toast.styles.js

@@ -0,0 +1,42 @@
+import { tva } from '../../theme/config.js';
+
+const toastStyle = tva({
+  base: "flex flex-col p-4 rounded-xl shadow-lg font-sans border gap-1 max-w-sm w-full",
+  variants: {
+    action: {
+      error: "",
+      warning: "",
+      success: "",
+      info: "",
+      muted: ""
+    },
+    variant: {
+      solid: "",
+      outline: "bg-card"
+    }
+  },
+  compoundVariants: [
+    { action: "success", variant: "solid", class: "bg-success text-white border-success" },
+    { action: "success", variant: "outline", class: "border-success text-success" },
+    { action: "error", variant: "solid", class: "bg-destructive text-destructive-foreground border-destructive" },
+    { action: "error", variant: "outline", class: "border-destructive text-destructive" },
+    { action: "warning", variant: "solid", class: "bg-warning text-white border-warning" },
+    { action: "warning", variant: "outline", class: "border-warning text-warning" },
+    { action: "info", variant: "solid", class: "bg-info text-white border-info" },
+    { action: "info", variant: "outline", class: "border-info text-info" },
+    { action: "muted", variant: "solid", class: "bg-card text-card-foreground border-border" },
+    { action: "muted", variant: "outline", class: "border-border text-foreground" }
+  ],
+  defaultVariants: {
+    action: "muted",
+    variant: "solid"
+  }
+});
+const toastTitleStyle = tva({
+  base: "text-sm font-semibold leading-tight"
+});
+const toastDescriptionStyle = tva({
+  base: "text-xs opacity-90 leading-normal"
+});
+
+export { toastDescriptionStyle, toastStyle, toastTitleStyle };

package/dist/components/Toast/Toast.types.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+export type ToastAction = 'error' | 'warning' | 'success' | 'info' | 'muted';
+export type ToastVariant = 'solid' | 'outline';
+export interface ToastContextValue {
+    action?: ToastAction;
+    variant?: ToastVariant;
+}
+export interface ToastProps extends React.HTMLAttributes<HTMLDivElement> {
+    action?: ToastAction;
+    variant?: ToastVariant;
+    className?: string;
+    children?: React.ReactNode;
+}
+export interface ToastTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
+    className?: string;
+    children?: React.ReactNode;
+}
+export interface ToastDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
+    className?: string;
+    children?: React.ReactNode;
+}
+//# sourceMappingURL=Toast.types.d.ts.map

package/dist/components/Toast/Toast.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.types.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC;AAC7E,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,SAAS,CAAC;AAE/C,MAAM,WAAW,iBAAiB;IAChC,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,OAAO,CAAC,EAAE,YAAY,CAAC;CACxB;AAED,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACtE,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC;IAC/E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC;IACvF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B"}

package/dist/components/Toast/index.d.ts

@@ -0,0 +1,4 @@
+export * from './Toast';
+export * from './Toast.types';
+export * from './Toast.styles';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Toast/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC"}

package/dist/components/VStack/VStack.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import type { VStackProps } from './VStack.types';
+export declare const VStack: React.ForwardRefExoticComponent<VStackProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=VStack.d.ts.map

package/dist/components/VStack/VStack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VStack.d.ts","sourceRoot":"","sources":["../../../src/components/VStack/VStack.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAGlD,eAAO,MAAM,MAAM,oFAYlB,CAAC"}

package/dist/components/VStack/VStack.js

@@ -0,0 +1,21 @@
+import { jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { vstackStyle } from './VStack.styles.js';
+import { cn } from '@timmbr/utils';
+
+const VStack = React.forwardRef(
+  ({ space = "none", reversed = false, className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(vstackStyle({ space, reversed }), className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+VStack.displayName = "VStack";
+
+export { VStack };

package/dist/components/VStack/VStack.styles.d.ts

@@ -0,0 +1,8 @@
+export declare const vstackStyle: (props?: ({
+    space?: string | boolean | undefined;
+    reversed?: string | boolean | undefined;
+} & {
+    class?: string;
+    className?: string;
+}) | undefined) => string;
+//# sourceMappingURL=VStack.styles.d.ts.map

package/dist/components/VStack/VStack.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VStack.styles.d.ts","sourceRoot":"","sources":["../../../src/components/VStack/VStack.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW;;;;;;yBAuBtB,CAAC"}

package/dist/components/VStack/VStack.styles.js

@@ -0,0 +1,28 @@
+import { tva } from '../../theme/config.js';
+
+const vstackStyle = tva({
+  base: "flex flex-col",
+  variants: {
+    space: {
+      none: "gap-0",
+      xs: "gap-1",
+      sm: "gap-2",
+      md: "gap-3",
+      lg: "gap-4",
+      xl: "gap-6",
+      "2xl": "gap-8",
+      "3xl": "gap-12",
+      "4xl": "gap-16"
+    },
+    reversed: {
+      true: "flex-col-reverse",
+      false: "flex-col"
+    }
+  },
+  defaultVariants: {
+    space: "none",
+    reversed: false
+  }
+});
+
+export { vstackStyle };

package/dist/components/VStack/VStack.types.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export type VStackSpace = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
+export interface VStackProps extends React.HTMLAttributes<HTMLDivElement> {
+    space?: VStackSpace;
+    reversed?: boolean;
+    className?: string;
+    children?: React.ReactNode;
+}
+//# sourceMappingURL=VStack.types.d.ts.map

package/dist/components/VStack/VStack.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VStack.types.d.ts","sourceRoot":"","sources":["../../../src/components/VStack/VStack.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;AAE5F,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACvE,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B"}

package/dist/components/VStack/index.d.ts

@@ -0,0 +1,4 @@
+export * from './VStack';
+export * from './VStack.types';
+export * from './VStack.styles';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/VStack/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/VStack/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,23 @@
+export * from './theme/config';
+export * from './provider/TimmbrNativeProvider';
+export * from './components/Box';
+export * from './components/VStack';
+export * from './components/HStack';
+export * from './components/Text';
+export * from './components/Heading';
+export * from './components/Button';
+export * from './components/Badge';
+export * from './components/Card';
+export * from './components/Input';
+export * from './components/Textarea';
+export * from './components/Tabs';
+export * from './components/Actionsheet';
+export * from './components/Modal';
+export * from './components/Switch';
+export * from './components/Spinner';
+export * from './components/Avatar';
+export * from './components/Divider';
+export * from './components/Pressable';
+export * from './components/Toast';
+export * from './components/Icon';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iCAAiC,CAAC;AAEhD,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,0BAA0B,CAAC;AACzC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC"}

package/dist/index.js

@@ -0,0 +1,42 @@
+export { createStyleContext, nativeThemes, nativeTokens, tva, useStyleContext, vars, withStyleContext } from './theme/config.js';
+export { GluestackUIProvider, TimmbrNativeProvider, useThemeMode, useTimmbrTheme } from './provider/TimmbrNativeProvider.js';
+export { Actionsheet, ActionsheetBackdrop, ActionsheetContent, ActionsheetDragIndicator, ActionsheetDragIndicatorWrapper, ActionsheetIcon, ActionsheetItem, ActionsheetItemText, useActionsheetContext } from './components/Actionsheet/Actionsheet.js';
+export { Avatar, AvatarBadge, AvatarFallbackText, AvatarImage, useAvatarContext } from './components/Avatar/Avatar.js';
+export { Badge, BadgeIcon, BadgeText, useBadgeContext } from './components/Badge/Badge.js';
+export { Box } from './components/Box/Box.js';
+export { Button, ButtonGroup, ButtonIcon, ButtonSpinner, ButtonText, useButtonContext } from './components/Button/Button.js';
+export { Card, CardBody, CardFooter, CardHeader, useCardContext } from './components/Card/Card.js';
+export { Divider } from './components/Divider/Divider.js';
+export { HStack } from './components/HStack/HStack.js';
+export { Heading } from './components/Heading/Heading.js';
+export { Icon } from './components/Icon/Icon.js';
+export { Input, InputField, InputIcon, InputSlot, useInputContext } from './components/Input/Input.js';
+export { Modal, ModalBackdrop, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, useModalContext } from './components/Modal/Modal.js';
+export { Pressable } from './components/Pressable/Pressable.js';
+export { Spinner } from './components/Spinner/Spinner.js';
+export { Switch } from './components/Switch/Switch.js';
+export { Tabs, TabsContent, TabsList, TabsTrigger, TabsTriggerText, useTabsContext } from './components/Tabs/Tabs.js';
+export { Text } from './components/Text/Text.js';
+export { Textarea, TextareaInput, useTextareaContext } from './components/Textarea/Textarea.js';
+export { Toast, ToastDescription, ToastTitle, useToastContext } from './components/Toast/Toast.js';
+export { VStack } from './components/VStack/VStack.js';
+export { actionsheetBackdropStyle, actionsheetContentStyle, actionsheetDragIndicatorStyle, actionsheetDragIndicatorWrapperStyle, actionsheetItemStyle, actionsheetItemTextStyle, actionsheetStyle } from './components/Actionsheet/Actionsheet.styles.js';
+export { avatarBadgeStyle, avatarFallbackTextStyle, avatarImageStyle, avatarStyle } from './components/Avatar/Avatar.styles.js';
+export { badgeStyle, badgeTextStyle } from './components/Badge/Badge.styles.js';
+export { boxStyle } from './components/Box/Box.styles.js';
+export { buttonGroupStyle, buttonIconStyle, buttonStyle, buttonTextStyle } from './components/Button/Button.styles.js';
+export { cardBodyStyle, cardFooterStyle, cardHeaderStyle, cardStyle } from './components/Card/Card.styles.js';
+export { dividerStyle } from './components/Divider/Divider.styles.js';
+export { headingStyle } from './components/Heading/Heading.styles.js';
+export { hstackStyle } from './components/HStack/HStack.styles.js';
+export { iconStyle } from './components/Icon/Icon.styles.js';
+export { inputFieldStyle, inputSlotStyle, inputStyle } from './components/Input/Input.styles.js';
+export { modalBackdropStyle, modalBodyStyle, modalCloseButtonStyle, modalContentStyle, modalFooterStyle, modalHeaderStyle, modalStyle } from './components/Modal/Modal.styles.js';
+export { pressableStyle } from './components/Pressable/Pressable.styles.js';
+export { spinnerStyle } from './components/Spinner/Spinner.styles.js';
+export { switchStyle, switchThumbStyle } from './components/Switch/Switch.styles.js';
+export { tabsContentStyle, tabsListStyle, tabsStyle, tabsTriggerStyle, tabsTriggerTextStyle } from './components/Tabs/Tabs.styles.js';
+export { textStyle } from './components/Text/Text.styles.js';
+export { textareaInputStyle, textareaStyle } from './components/Textarea/Textarea.styles.js';
+export { toastDescriptionStyle, toastStyle, toastTitleStyle } from './components/Toast/Toast.styles.js';
+export { vstackStyle } from './components/VStack/VStack.styles.js';

package/dist/provider/TimmbrNativeProvider.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+export type ThemeMode = 'light' | 'dark' | 'system';
+export type ResolvedTheme = 'light' | 'dark';
+export interface TimmbrNativeContextValue {
+    mode: ThemeMode;
+    resolvedTheme: ResolvedTheme;
+    setMode: (mode: ThemeMode) => void;
+    toggleTheme: () => void;
+}
+export declare const useTimmbrTheme: () => TimmbrNativeContextValue;
+export declare const useThemeMode: () => TimmbrNativeContextValue;
+export interface TimmbrNativeProviderProps {
+    mode?: ThemeMode;
+    defaultMode?: ThemeMode;
+    children: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare function TimmbrNativeProvider({ mode: controlledMode, defaultMode, children, className, style, }: TimmbrNativeProviderProps): React.JSX.Element;
+export declare const GluestackUIProvider: typeof TimmbrNativeProvider;
+//# sourceMappingURL=TimmbrNativeProvider.d.ts.map

package/dist/provider/TimmbrNativeProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimmbrNativeProvider.d.ts","sourceRoot":"","sources":["../../src/provider/TimmbrNativeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;AACpD,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,MAAM,CAAC;AAE7C,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,SAAS,CAAC;IAChB,aAAa,EAAE,aAAa,CAAC;IAC7B,OAAO,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACnC,WAAW,EAAE,MAAM,IAAI,CAAC;CACzB;AASD,eAAO,MAAM,cAAc,QAAO,wBAEjC,CAAC;AAEF,eAAO,MAAM,YAAY,QAJS,wBAIQ,CAAC;AAE3C,MAAM,WAAW,yBAAyB;IACxC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,wBAAgB,oBAAoB,CAAC,EACnC,IAAI,EAAE,cAAc,EACpB,WAAsB,EACtB,QAAQ,EACR,SAAS,EACT,KAAK,GACN,EAAE,yBAAyB,qBA+F3B;AAED,eAAO,MAAM,mBAAmB,6BAAuB,CAAC"}

package/dist/provider/TimmbrNativeProvider.js

@@ -0,0 +1,110 @@
+import { jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { cn } from '@timmbr/utils';
+import { nativeThemes } from '../theme/config.js';
+
+const TimmbrNativeContext = React.createContext({
+  mode: "system",
+  resolvedTheme: "light",
+  setMode: () => {
+  },
+  toggleTheme: () => {
+  }
+});
+const useTimmbrTheme = () => {
+  return React.useContext(TimmbrNativeContext);
+};
+const useThemeMode = useTimmbrTheme;
+function TimmbrNativeProvider({
+  mode: controlledMode,
+  defaultMode = "system",
+  children,
+  className,
+  style
+}) {
+  const [uncontrolledMode, setUncontrolledMode] = React.useState(defaultMode);
+  const currentMode = controlledMode ?? uncontrolledMode;
+  const [domIsDark, setDomIsDark] = React.useState(() => {
+    if (typeof document !== "undefined") {
+      return document.documentElement.classList.contains("dark") || document.body.classList.contains("dark");
+    }
+    return false;
+  });
+  const [systemIsDark, setSystemIsDark] = React.useState(() => {
+    if (typeof window !== "undefined" && window.matchMedia) {
+      return window.matchMedia("(prefers-color-scheme: dark)").matches;
+    }
+    return false;
+  });
+  React.useEffect(() => {
+    if (typeof document === "undefined") return;
+    const updateTheme = () => {
+      const isDark = document.documentElement.classList.contains("dark") || document.body.classList.contains("dark");
+      setDomIsDark(isDark);
+    };
+    updateTheme();
+    const observer = new MutationObserver(updateTheme);
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] });
+    return () => observer.disconnect();
+  }, []);
+  React.useEffect(() => {
+    if (typeof window === "undefined" || !window.matchMedia) return;
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const handler = (e) => {
+      setSystemIsDark(e.matches);
+    };
+    if (mediaQuery.addEventListener) {
+      mediaQuery.addEventListener("change", handler);
+      return () => mediaQuery.removeEventListener("change", handler);
+    }
+  }, []);
+  const resolvedTheme = React.useMemo(() => {
+    if (currentMode === "dark") return "dark";
+    if (currentMode === "light") return "light";
+    if (typeof document !== "undefined") {
+      return domIsDark ? "dark" : "light";
+    }
+    return systemIsDark ? "dark" : "light";
+  }, [currentMode, domIsDark, systemIsDark]);
+  const setMode = React.useCallback(
+    (newMode) => {
+      setUncontrolledMode(newMode);
+    },
+    []
+  );
+  const toggleTheme = React.useCallback(() => {
+    setUncontrolledMode((prev) => {
+      const active = prev === "system" ? typeof document !== "undefined" ? domIsDark ? "dark" : "light" : systemIsDark ? "dark" : "light" : prev;
+      return active === "dark" ? "light" : "dark";
+    });
+  }, [domIsDark, systemIsDark]);
+  const contextValue = React.useMemo(
+    () => ({
+      mode: currentMode,
+      resolvedTheme,
+      setMode,
+      toggleTheme
+    }),
+    [currentMode, resolvedTheme, setMode, toggleTheme]
+  );
+  return /* @__PURE__ */ jsx(TimmbrNativeContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-theme": resolvedTheme,
+      "data-mode": currentMode,
+      className: cn(
+        "timmbr-native-provider min-h-full w-full font-sans antialiased text-foreground bg-background",
+        resolvedTheme === "dark" ? "dark" : "",
+        className
+      ),
+      style: {
+        ...nativeThemes[resolvedTheme],
+        ...style
+      },
+      children
+    }
+  ) });
+}
+const GluestackUIProvider = TimmbrNativeProvider;
+
+export { GluestackUIProvider, TimmbrNativeProvider, useThemeMode, useTimmbrTheme };