@hanzogui/stacks 2.0.0

package/src/SizableStack.tsx

@@ -0,0 +1,33 @@
+import { styled } from '@hanzogui/core'
+import { getButtonSized } from '@hanzogui/get-button-sized'
+import type { GetProps } from '@hanzogui/web'
+import { ThemeableStack } from './ThemeableStack'
+import { bordered, circular, elevate } from './variants'
+
+export const SizableStack = styled(ThemeableStack, {
+  name: 'SizableStack',
+
+  variants: {
+    unstyled: {
+      true: {
+        elevate: false,
+        bordered: false,
+      },
+    },
+
+    circular,
+    elevate,
+
+    bordered: {
+      true: bordered,
+    },
+
+    size: {
+      '...size': (val, extras) => {
+        return getButtonSized(val, extras)
+      },
+    },
+  } as const,
+})
+
+export type SizableStackProps = GetProps<typeof SizableStack>

package/src/Stacks.tsx

@@ -0,0 +1,74 @@
+import type { GetProps, SizeTokens } from '@hanzogui/core'
+import { View, styled } from '@hanzogui/core'
+
+import { getElevation } from './getElevation'
+
+export interface StackVariants {
+  /**
+   * @deprecated use `inset: 0, position: 'absolute'` instead
+   */
+  fullscreen?: boolean
+
+  elevation?: number | SizeTokens
+}
+
+export type YStackProps = Omit<GetProps<typeof YStack>, keyof StackVariants> &
+  StackVariants
+
+export type XStackProps = YStackProps
+export type ZStackProps = YStackProps
+
+export const fullscreenStyle = {
+  position: 'absolute',
+  inset: 0,
+} as const
+
+const variants = {
+  fullscreen: {
+    true: fullscreenStyle,
+  },
+
+  elevation: {
+    '...size': getElevation,
+    ':number': getElevation,
+  },
+} as const
+
+/**
+ * @summary A view that arranges its children in a vertical line.
+ * @see — Docs https://gui.dev/ui/stacks#xstack-ystack-zstack
+ */
+export const YStack = styled(View, {
+  flexDirection: 'column',
+  variants,
+})
+
+YStack['displayName'] = 'YStack'
+
+/**
+ * @summary A view that arranges its children in a horizontal line.
+ * @see — Docs https://gui.dev/ui/stacks#xstack-ystack-zstack
+ */
+export const XStack = styled(View, {
+  flexDirection: 'row',
+  variants,
+})
+
+XStack['displayName'] = 'XStack'
+
+/**
+ * @summary A view that stacks its children on top of each other.
+ * @see — Docs https://gui.dev/ui/stacks#xstack-ystack-zstack
+ */
+export const ZStack = styled(
+  YStack,
+  {
+    position: 'relative',
+  },
+  {
+    neverFlatten: true,
+    isZStack: true,
+  }
+)
+
+ZStack['displayName'] = 'ZStack'

package/src/ThemeableStack.tsx

@@ -0,0 +1,47 @@
+import type { GetProps } from '@hanzogui/core'
+import { styled } from '@hanzogui/core'
+
+import { YStack } from './Stacks'
+
+import { bordered, circular, elevate } from './variants'
+
+const chromelessStyle = {
+  backgroundColor: 'transparent',
+  borderColor: 'transparent',
+  shadowColor: 'transparent',
+
+  hoverStyle: {
+    borderColor: 'transparent',
+  },
+}
+
+export const themeableVariants = {
+  circular,
+  elevate,
+
+  bordered: {
+    true: bordered,
+  },
+
+  transparent: {
+    true: {
+      backgroundColor: 'transparent',
+    },
+  },
+
+  chromeless: {
+    true: chromelessStyle,
+    all: {
+      ...chromelessStyle,
+      hoverStyle: chromelessStyle,
+      pressStyle: chromelessStyle,
+      focusStyle: chromelessStyle,
+    },
+  },
+} as const
+
+export const ThemeableStack = styled(YStack, {
+  variants: themeableVariants,
+})
+
+export type ThemeableStackProps = GetProps<typeof ThemeableStack>

package/src/getElevation.tsx

@@ -0,0 +1,47 @@
+import type {
+  SizeTokens,
+  SizeVariantSpreadFunction,
+  ViewProps,
+  VariantSpreadExtras,
+} from '@hanzogui/core'
+import { getVariableValue, isAndroid, isVariable } from '@hanzogui/core'
+
+export const getElevation: SizeVariantSpreadFunction<ViewProps> = (size, extras) => {
+  if (!size) return
+  const { tokens } = extras
+  const token = tokens.size[size]
+  const sizeNum = (isVariable(token) ? +token.val : size) as number
+  return getSizedElevation(sizeNum, extras)
+}
+
+export const getSizedElevation = (
+  val: SizeTokens | number | boolean,
+  { theme, tokens }: VariantSpreadExtras<any>
+) => {
+  let num = 0
+  if (val === true) {
+    const val = getVariableValue(tokens.size['true'])
+    if (typeof val === 'number') {
+      num = val
+    } else {
+      num = 10
+    }
+  } else {
+    num = +val
+  }
+  if (num === 0) {
+    return
+  }
+  const [height, shadowRadius] = [Math.round(num / 4 + 1), Math.round(num / 2 + 2)]
+  const shadow = {
+    shadowColor: theme.shadowColor,
+    shadowRadius,
+    shadowOffset: { height, width: 0 },
+    ...(isAndroid
+      ? {
+          elevationAndroid: 2 * height,
+        }
+      : {}),
+  }
+  return shadow
+}

package/src/index.ts

@@ -0,0 +1,5 @@
+export * from './Stacks'
+export * from './ThemeableStack'
+export * from './SizableStack'
+export * from './NestingContext'
+export * from './getElevation'

package/src/variants.tsx

@@ -0,0 +1,38 @@
+import { getElevation } from './getElevation'
+
+export const elevate = {
+  true: (_: boolean, extras: any) => {
+    return getElevation(extras.props['size'], extras) as any
+  },
+}
+
+export const bordered = (val: boolean | number, { props }) => {
+  return {
+    // TODO size it with size in '...size'
+    borderWidth: typeof val === 'number' ? val : 1,
+    borderColor: '$borderColor',
+  }
+}
+
+const circularStyle = {
+  borderRadius: 100_000,
+  padding: 0,
+}
+
+export const circular = {
+  true: (_, { props, tokens }) => {
+    if (!('size' in props)) {
+      return circularStyle
+    }
+    const size = typeof props.size === 'number' ? props.size : tokens.size[props.size]
+    return {
+      ...circularStyle,
+      width: size,
+      height: size,
+      maxWidth: size,
+      maxHeight: size,
+      minWidth: size,
+      minHeight: size,
+    }
+  },
+}

package/types/NestingContext.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const ButtonNestingContext: React.Context<boolean>;
+//# sourceMappingURL=NestingContext.d.ts.map

package/types/SizableStack.d.ts

@@ -0,0 +1,14 @@
+import type { GetProps } from '@gui/web';
+export declare const SizableStack: import("@gui/core").GuiComponent<import("@gui/core").TamaDefer, import("@gui/core").GuiElement, import("@gui/core").RNGuiViewNonStyleProps, import("@gui/core").StackStyleBase, {
+    size?: import("@gui/core").SizeTokens | undefined;
+    unstyled?: boolean | undefined;
+    elevation?: number | import("@gui/core").SizeTokens | undefined;
+    transparent?: boolean | undefined;
+    fullscreen?: boolean | undefined;
+    circular?: boolean | undefined;
+    elevate?: boolean | undefined;
+    bordered?: boolean | undefined;
+    chromeless?: boolean | "all" | undefined;
+}, import("@gui/core").StaticConfigPublic>;
+export type SizableStackProps = GetProps<typeof SizableStack>;
+//# sourceMappingURL=SizableStack.d.ts.map

package/types/Stacks.d.ts

@@ -0,0 +1,43 @@
+import type { GetProps, SizeTokens } from '@gui/core';
+export interface StackVariants {
+    /**
+     * @deprecated use `inset: 0, position: 'absolute'` instead
+     */
+    fullscreen?: boolean;
+    elevation?: number | SizeTokens;
+}
+export type YStackProps = Omit<GetProps<typeof YStack>, keyof StackVariants> & StackVariants;
+export type XStackProps = YStackProps;
+export type ZStackProps = YStackProps;
+export declare const fullscreenStyle: {
+    readonly position: "absolute";
+    readonly inset: 0;
+};
+/**
+ * @summary A view that arranges its children in a vertical line.
+ * @see — Docs https://gui.dev/ui/stacks#xstack-ystack-zstack
+ */
+export declare const YStack: import("@gui/core").GuiComponent<import("@gui/core").TamaDefer, import("@gui/core").GuiElement, import("@gui/core").RNGuiViewNonStyleProps, import("@gui/core").StackStyleBase, {
+    elevation?: number | SizeTokens | undefined;
+    fullscreen?: boolean | undefined;
+}, import("@gui/core").StaticConfigPublic>;
+/**
+ * @summary A view that arranges its children in a horizontal line.
+ * @see — Docs https://gui.dev/ui/stacks#xstack-ystack-zstack
+ */
+export declare const XStack: import("@gui/core").GuiComponent<import("@gui/core").TamaDefer, import("@gui/core").GuiElement, import("@gui/core").RNGuiViewNonStyleProps, import("@gui/core").StackStyleBase, {
+    elevation?: number | SizeTokens | undefined;
+    fullscreen?: boolean | undefined;
+}, import("@gui/core").StaticConfigPublic>;
+/**
+ * @summary A view that stacks its children on top of each other.
+ * @see — Docs https://gui.dev/ui/stacks#xstack-ystack-zstack
+ */
+export declare const ZStack: import("@gui/core").GuiComponent<import("@gui/core").TamaDefer, import("@gui/core").GuiElement, import("@gui/core").RNGuiViewNonStyleProps, import("@gui/core").StackStyleBase, {
+    elevation?: number | SizeTokens | undefined;
+    fullscreen?: boolean | undefined;
+}, import("@gui/core").StaticConfigPublic & {
+    neverFlatten: true;
+    isZStack: true;
+}>;
+//# sourceMappingURL=Stacks.d.ts.map

package/types/ThemeableStack.d.ts

@@ -0,0 +1,87 @@
+import type { GetProps } from '@gui/core';
+export declare const themeableVariants: {
+    readonly circular: {
+        true: (_: any, { props, tokens }: {
+            props: any;
+            tokens: any;
+        }) => {
+            borderRadius: number;
+            padding: number;
+        } | {
+            width: any;
+            height: any;
+            maxWidth: any;
+            maxHeight: any;
+            minWidth: any;
+            minHeight: any;
+            borderRadius: number;
+            padding: number;
+        };
+    };
+    readonly elevate: {
+        true: (_: boolean, extras: any) => any;
+    };
+    readonly bordered: {
+        readonly true: (val: boolean | number, { props }: {
+            props: any;
+        }) => {
+            borderWidth: number;
+            borderColor: string;
+        };
+    };
+    readonly transparent: {
+        readonly true: {
+            readonly backgroundColor: "transparent";
+        };
+    };
+    readonly chromeless: {
+        readonly true: {
+            backgroundColor: string;
+            borderColor: string;
+            shadowColor: string;
+            hoverStyle: {
+                borderColor: string;
+            };
+        };
+        readonly all: {
+            readonly hoverStyle: {
+                backgroundColor: string;
+                borderColor: string;
+                shadowColor: string;
+                hoverStyle: {
+                    borderColor: string;
+                };
+            };
+            readonly pressStyle: {
+                backgroundColor: string;
+                borderColor: string;
+                shadowColor: string;
+                hoverStyle: {
+                    borderColor: string;
+                };
+            };
+            readonly focusStyle: {
+                backgroundColor: string;
+                borderColor: string;
+                shadowColor: string;
+                hoverStyle: {
+                    borderColor: string;
+                };
+            };
+            readonly backgroundColor: string;
+            readonly borderColor: string;
+            readonly shadowColor: string;
+        };
+    };
+};
+export declare const ThemeableStack: import("@gui/core").GuiComponent<import("@gui/core").TamaDefer, import("@gui/core").GuiElement, import("@gui/core").RNGuiViewNonStyleProps, import("@gui/core").StackStyleBase, {
+    elevation?: number | import("@gui/core").SizeTokens | undefined;
+    transparent?: boolean | undefined;
+    fullscreen?: boolean | undefined;
+    circular?: boolean | undefined;
+    elevate?: boolean | undefined;
+    bordered?: boolean | undefined;
+    chromeless?: boolean | "all" | undefined;
+}, import("@gui/core").StaticConfigPublic>;
+export type ThemeableStackProps = GetProps<typeof ThemeableStack>;
+//# sourceMappingURL=ThemeableStack.d.ts.map

package/types/getElevation.d.ts

@@ -0,0 +1,12 @@
+import type { SizeTokens, SizeVariantSpreadFunction, ViewProps, VariantSpreadExtras } from '@gui/core';
+export declare const getElevation: SizeVariantSpreadFunction<ViewProps>;
+export declare const getSizedElevation: (val: SizeTokens | number | boolean, { theme, tokens }: VariantSpreadExtras<any>) => {
+    elevationAndroid?: number | undefined;
+    shadowColor: import("@gui/core").Variable<string> | import("@gui/core").Variable<any> | import("@gui/core").Variable<undefined> | undefined;
+    shadowRadius: number;
+    shadowOffset: {
+        height: number;
+        width: number;
+    };
+} | undefined;
+//# sourceMappingURL=getElevation.d.ts.map

package/types/index.d.ts

@@ -0,0 +1,6 @@
+export * from './Stacks';
+export * from './ThemeableStack';
+export * from './SizableStack';
+export * from './NestingContext';
+export * from './getElevation';
+//# sourceMappingURL=index.d.ts.map

package/types/variants.d.ts

@@ -0,0 +1,28 @@
+export declare const elevate: {
+    true: (_: boolean, extras: any) => any;
+};
+export declare const bordered: (val: boolean | number, { props }: {
+    props: any;
+}) => {
+    borderWidth: number;
+    borderColor: string;
+};
+export declare const circular: {
+    true: (_: any, { props, tokens }: {
+        props: any;
+        tokens: any;
+    }) => {
+        borderRadius: number;
+        padding: number;
+    } | {
+        width: any;
+        height: any;
+        maxWidth: any;
+        maxHeight: any;
+        minWidth: any;
+        minHeight: any;
+        borderRadius: number;
+        padding: number;
+    };
+};
+//# sourceMappingURL=variants.d.ts.map