@themeable/layout 1.0.2

package/Stack.css

@@ -0,0 +1,86 @@
+.h-stack {
+  display: flex;
+  flex-direction: row;
+  flex-shrink: 0;
+}
+
+.v-stack {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  flex-shrink: 0;
+}
+
+.v-stack.left {
+  align-items: flex-start;
+}
+
+.v-stack.center {
+  align-items: center;
+}
+
+.v-stack.right {
+  align-items: flex-end;
+}
+
+.v-stack.top {
+  justify-content: flex-start;
+}
+
+.v-stack.middle {
+  justify-content: center;
+}
+
+.v-stack.bottom {
+  justify-content: flex-end;
+}
+
+.h-stack.left {
+  justify-content: flex-start;
+}
+
+.h-stack.center {
+  justify-content: center;
+}
+
+.h-stack.right {
+  justify-content: flex-end;
+}
+
+.h-stack.top {
+  align-items: flex-start;
+}
+
+.h-stack.middle {
+  align-items: center;
+}
+
+.h-stack.bottom {
+  align-items: flex-end;
+}
+
+/* Self controls */
+.v-stack>.width-fill,
+.h-stack>.height-fill {
+  align-self: stretch;
+}
+
+.v-stack>.height-fill,
+.h-stack>.width-fill {
+  flex: 1 0 0;
+}
+
+
+.scroll-vertical {
+  overflow-y: auto;
+  flex: 1;
+}
+
+.scroll-horizontal {
+  overflow-x: auto;
+  flex: 1;
+}
+
+.h-stack.wrap {
+  flex-wrap: wrap;
+}

package/dist/EnviroSniffer.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const EnviroSniffer: () => React.JSX.Element;

package/dist/EnviroSniffer.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { useThemeable } from "./Provider";
+import { useTokens } from "./Provider/Tokens";
+export var EnviroSniffer = function () {
+    var viewSize = useTokens().viewSize;
+    var browserViewport = useThemeable().browserViewport;
+    return (React.createElement(React.Fragment, null,
+        React.createElement("p", null,
+            "Browser size: ",
+            browserViewport),
+        React.createElement("p", null,
+            "View size: ",
+            viewSize)));
+};

package/dist/Provider/Tokens.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+type ViewSize = 'compact' | 'medium' | 'expanded';
+type ViewSizeLimit = 'compact' | 'medium';
+type SpacingContextValue = {
+    spacingMode?: 'normal' | 'grouped';
+    setMaxViewSize?: ViewSizeLimit;
+    viewSize?: ViewSize;
+};
+export declare const Modifier: ({ setMaxViewSize: localSetMaxViewSize, children, }: {
+    setMaxViewSize?: ViewSizeLimit;
+    children: React.ReactNode;
+}) => React.JSX.Element;
+export declare const useTokens: () => SpacingContextValue;
+export {};

package/dist/Provider/Tokens.js

@@ -0,0 +1,35 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React, { createContext, useContext } from 'react';
+import { useThemeable } from './index';
+var clampViewSize = function (actual, limit) {
+    if (!limit)
+        return actual;
+    if (limit === 'compact')
+        return 'compact';
+    return actual === 'compact' ? 'compact' : 'medium';
+};
+// @ts-ignore
+var TokenContext = createContext({});
+export var Modifier = function (_a) {
+    var localSetMaxViewSize = _a.setMaxViewSize, children = _a.children;
+    var parent = useContext(TokenContext);
+    var browserViewport = useThemeable().browserViewport;
+    // Inherit from parent if not provided locally
+    var inheritedSetMaxViewSize = localSetMaxViewSize !== null && localSetMaxViewSize !== void 0 ? localSetMaxViewSize : parent.setMaxViewSize;
+    var maxViewSize = clampViewSize(browserViewport || 'expanded', inheritedSetMaxViewSize);
+    var value = __assign(__assign({}, parent), { setMaxViewSize: inheritedSetMaxViewSize, viewSize: maxViewSize });
+    return (React.createElement(TokenContext.Provider, { value: value }, children));
+};
+export var useTokens = function () {
+    return useContext(TokenContext);
+};

package/dist/Provider/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Theme } from "./types";
+export declare const ThemeableContext: React.Context<Theme | undefined>;
+interface ThemeConfigProps {
+    children: React.ReactNode;
+}
+export declare const LayoutProvider: ({ children, }: ThemeConfigProps) => React.JSX.Element;
+export declare const useThemeable: () => Theme;
+export {};

package/dist/Provider/index.js

@@ -0,0 +1,37 @@
+import React, { createContext, useContext, useState, useEffect } from 'react';
+export var ThemeableContext = createContext(undefined);
+export var LayoutProvider = function (_a) {
+    var children = _a.children;
+    var _b = useState('compact'), browserViewport = _b[0], setBrowserViewport = _b[1];
+    var prefResponsive = {
+        medium: 600,
+        expanded: 1200
+    };
+    useEffect(function () {
+        var updateViewportSize = function () {
+            var width = window.innerWidth;
+            if (width > prefResponsive.expanded) {
+                setBrowserViewport('expanded');
+            }
+            else if (width > prefResponsive.medium) {
+                setBrowserViewport('medium');
+            }
+            else {
+                setBrowserViewport('compact');
+            }
+        };
+        updateViewportSize();
+        window.addEventListener('resize', updateViewportSize);
+        return function () { return window.removeEventListener('resize', updateViewportSize); };
+    }, [prefResponsive]);
+    return (React.createElement(ThemeableContext.Provider, { value: {
+            browserViewport: browserViewport
+        } }, children));
+};
+export var useThemeable = function () {
+    var context = useContext(ThemeableContext);
+    if (!context) {
+        throw new Error('useThemeable must be used within a ThemeableProvider');
+    }
+    return context;
+};

package/dist/Provider/types.d.ts

@@ -0,0 +1,193 @@
+export interface ColorScheme {
+    textSecondaryAlpha: string;
+    textPrimary: string;
+    iconAlpha: string;
+    accentAlpha: string;
+    notice: string;
+    onPrimary: string;
+    fillContainer: string;
+    surfaceHoverAlpha: string;
+    negative: string;
+    primaryAlpha: string;
+    divider: string;
+    backgroundElevated: string;
+    dividerAlpha: string;
+    surfaceDown: string;
+    fillControl: string;
+    icon: string;
+    informative: string;
+    backgroundFlat: string;
+    border: string;
+    surfaceDownAlpha: string;
+    readOnly: string;
+    readOnlyAlpha: string;
+    surfaceHover: string;
+    fillContainerAlpha: string;
+    borderAlpha: string;
+    fillControlAlpha: string;
+    textSecondary: string;
+    textPrimaryAlpha: string;
+    positive: string;
+    onAccent: string;
+    accent: string;
+    primary: string;
+}
+export interface Radius {
+    smallControl: number;
+    largeControl: number;
+    container: number;
+    page: number;
+}
+export interface Size {
+    large: number;
+    small: number;
+    base: number;
+}
+export interface ResponsiveSize {
+    expanded: number;
+    medium: number;
+    maxPageBleed: number;
+}
+export interface Space {
+    hExtra: number;
+    hSmall: number;
+    content: number;
+    vExtra: number;
+    hSection: number;
+    hUnify: number;
+    vSection: number;
+    vSmall: number;
+    vUnify: number;
+}
+export interface Text {
+    title3LetterSpacing: number;
+    headlineLetterSpacing: number;
+    title2Size: number;
+    title1LineHeight: number;
+    subheadLineHeight: number;
+    bodyLineHeight: number;
+    title3LineHeight: number;
+    subheadSize: number;
+    caption1LetterSpacing: number;
+    caption2LineHeight: number;
+    caption1Size: number;
+    footnoteSize: number;
+    caption2LetterSpacing: number;
+    bodyLetterSpacing: number;
+    title2LineHeight: number;
+    headlineLineHeight: number;
+    title2LetterSpacing: number;
+    caption1LineHeight: number;
+    title3Size: number;
+    footnoteLetterSpacing: number;
+    title1Size: number;
+    footnoteLineHeight: number;
+    subheadLetterSpacing: number;
+    caption2Size: number;
+    bodySize: number;
+    headlineSize: number;
+    title1LetterSpacing: number;
+}
+export interface TextWeight {
+    footnoteBold: number;
+    bodyLight: number;
+    footnoteLight: number;
+    footnote: number;
+    caption2Bold: number;
+    bodyBold: number;
+    subhead: number;
+    title2Regular: number;
+    title2: number;
+    subheadLight: number;
+    title2Light: number;
+    caption2: number;
+    headlineBold: number;
+    footnoteRegular: number;
+    body: number;
+    title1: number;
+    title1Light: number;
+    title3Light: number;
+    subheadRegular: number;
+    subheadBold: number;
+    caption1Bold: number;
+    title3Bold: number;
+    caption1Light: number;
+    headline: number;
+    title3Regular: number;
+    headlineRegular: number;
+    caption1: number;
+    title2Bold: number;
+    title1Bold: number;
+    headlineLight: number;
+    bodyRegular: number;
+    caption2Light: number;
+    title1Regular: number;
+    caption2Regular: number;
+    caption1Regular: number;
+    title3: number;
+}
+export interface TextFamily {
+    name: string;
+    titleFallback: string;
+    fallback: string;
+    src: string;
+    titleName: string;
+    titleSrc: string;
+}
+export interface Foundations {
+    radius: {
+        compact: Radius;
+        medium: Radius;
+        expanded: Radius;
+    };
+    size: {
+        responsive: ResponsiveSize;
+        compact: Size;
+        medium: Size;
+        expanded: Size;
+    };
+    space: {
+        compact: Space;
+        medium: Space;
+        expanded: Space;
+    };
+    color: {
+        light: ColorScheme;
+        dark: ColorScheme;
+    };
+    text: {
+        compact: Text;
+        medium: Text;
+        expanded: Text;
+        weight: TextWeight;
+        family: TextFamily;
+    };
+}
+export interface ThemeData {
+    id: string;
+    owner: string;
+    createdOn: {
+        _seconds: number;
+        _nanoseconds: number;
+    };
+    name: string;
+    foundations: Foundations;
+    css: string;
+    lastModified: {
+        _seconds: number;
+        _nanoseconds: number;
+    };
+}
+export interface Theme {
+    color?: ColorScheme;
+    radius?: Radius;
+    textStyle?: Text;
+    textWeight?: TextWeight;
+    textFamily?: TextFamily;
+    space?: Space;
+    size?: Size;
+    viewportSize?: 'compact' | 'medium' | 'expanded';
+    svgPath?: string;
+    browserViewport?: 'compact' | 'medium' | 'expanded';
+    spacingMode?: 'normal' | 'grouped';
+}

package/dist/Provider/types.js

@@ -0,0 +1 @@
+export {};

package/dist/Stack/HStack.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { HStackProps } from "./types";
+import '../../Stack.css';
+export declare const HStack: React.FC<HStackProps>;

package/dist/Stack/HStack.js

@@ -0,0 +1,76 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React, { useMemo } from "react";
+import { generateGridTemplateColumns, showOnSplit } from "./utils";
+import '../../Stack.css';
+import { Modifier, useTokens } from "../Provider/Tokens";
+export var HStack = function (_a) {
+    var style = _a.style, _b = _a.maxWidth, maxWidth = _b === void 0 ? undefined : _b, children = _a.children, className = _a.className, align = _a.align, showOn = _a.showOn, gridExpanded = _a.gridExpanded, gridMedium = _a.gridMedium, gridCompact = _a.gridCompact, ref = _a.ref, _c = _a.width, width = _c === void 0 ? 'fill' : _c, _d = _a.height, height = _d === void 0 ? 'hug' : _d, wrap = _a.wrap, _e = _a.sectionSpacing, sectionSpacing = _e === void 0 ? false : _e, _f = _a.group, group = _f === void 0 ? false : _f, setMaxViewSize = _a.setMaxViewSize;
+    var _g = useTokens(), spacingMode = _g.spacingMode, viewSize = _g.viewSize;
+    var grid = {
+        compact: gridCompact,
+        medium: gridMedium,
+        expanded: gridExpanded
+    };
+    var hstackStyles = useMemo(function () {
+        var display = (function () {
+            if (gridExpanded && gridMedium && gridCompact)
+                return 'grid';
+            if (viewSize && showOn)
+                return showOnSplit(showOn, viewSize);
+            return undefined;
+        })();
+        return __assign({ maxWidth: maxWidth, transition: '.2s', display: display, 
+            // paddingTop: group ? `${space.vExtra}px` : undefined,
+            // paddingBottom: group ? `${space.vExtra}px` : undefined,
+            // paddingRight: group ? `${space.hExtra}px` : undefined,
+            // paddingLeft: group ? `${space.hExtra}px` : undefined,
+            gridTemplateColumns: gridCompact && gridMedium && gridExpanded && viewSize
+                ? generateGridTemplateColumns(grid[viewSize])
+                : undefined, 
+            // gap: sectionSpacing ? `${space.vSection}px ${space.hSection}px` : undefined,
+            gap: sectionSpacing ? "".concat(24, "px ").concat(24, "px") : undefined }, style);
+    }, [
+        maxWidth,
+        style,
+        gridExpanded,
+        gridMedium,
+        gridCompact,
+        viewSize,
+        showOn,
+        sectionSpacing,
+        // space.vExtra,
+        // space.hExtra,
+        // space.vSection,
+        // space.hSection,
+        grid,
+    ]);
+    var classes = [
+        'h-stack',
+        className,
+        group && 'is-group',
+        "width-".concat(width),
+        "height-".concat(height),
+        // showOn ? showOnSplit(showOn, viewSize || 'expanded') : '',
+        align,
+        wrap && 'wrap',
+        // group && 'group'
+    ]
+        .filter(Boolean)
+        .join(' ');
+    var content = (React.createElement("div", { ref: ref, style: hstackStyles, className: classes }, children));
+    if (setMaxViewSize === 'medium' || setMaxViewSize === 'compact') {
+        return (React.createElement(Modifier, { setMaxViewSize: setMaxViewSize }, content));
+    }
+    return content;
+};
+HStack.displayName = 'HStack';

package/dist/Stack/VStack.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { VStackProps } from "./types";
+import '../../Stack.css';
+export declare const VStack: React.ForwardRefExoticComponent<Omit<VStackProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/Stack/VStack.js

@@ -0,0 +1,39 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React, { forwardRef, useRef, useImperativeHandle } from "react";
+// import { useViewportSize, ViewportSizeProvider } from "../ProviderResponsive";
+import { showOnSplit } from "./utils";
+import '../../Stack.css';
+import { Modifier, useTokens } from "../Provider/Tokens";
+export var VStack = forwardRef(function (_a, parentRef) {
+    var style = _a.style, maxWidth = _a.maxWidth, children = _a.children, className = _a.className, align = _a.align, showOn = _a.showOn, _b = _a.height, height = _b === void 0 ? 'hug' : _b, _c = _a.width, width = _c === void 0 ? 'fill' : _c, scroll = _a.scroll, _d = _a.group, group = _d === void 0 ? false : _d, setMaxViewSize = _a.setMaxViewSize;
+    var localRef = useRef(null);
+    useImperativeHandle(parentRef, function () { return localRef.current; });
+    var viewSize = useTokens().viewSize;
+    var combinedClasses = [
+        'v-stack',
+        group && 'is-group',
+        className,
+        "width-".concat(width),
+        "height-".concat(height),
+        align,
+        scroll && "scroll-".concat(scroll),
+    ]
+        .filter(Boolean)
+        .join(' ');
+    var content = (React.createElement("div", { ref: localRef, style: __assign({ maxWidth: maxWidth, display: viewSize !== undefined && showOn ? showOnSplit(showOn, viewSize) : undefined, transition: '.2s' }, style), className: combinedClasses }, children));
+    if (setMaxViewSize === 'medium' || setMaxViewSize === 'compact') {
+        return (React.createElement(Modifier, { setMaxViewSize: setMaxViewSize || 'compact' }, content));
+    }
+    return content;
+});
+VStack.displayName = 'VStack';

package/dist/Stack/index.d.ts

@@ -0,0 +1,2 @@
+export { HStack } from './HStack';
+export { VStack } from './VStack';

package/dist/Stack/index.js

@@ -0,0 +1,2 @@
+export { HStack } from './HStack';
+export { VStack } from './VStack';

package/dist/Stack/types.d.ts

@@ -0,0 +1,27 @@
+import React, { CSSProperties, ReactNode, RefObject } from 'react';
+interface StackProps {
+    style?: CSSProperties;
+    maxWidth?: string | number;
+    children?: ReactNode;
+    className?: string;
+    align?: string;
+    ref?: RefObject<HTMLDivElement>;
+    showOn?: 'compact' | 'medium' | 'expanded' | 'compact medium' | 'medium expanded' | 'compact expanded';
+    width?: 'hug' | 'fill';
+    height?: 'hug' | 'fill';
+    showOverflowBar?: boolean;
+    wrap?: boolean;
+    group?: boolean;
+    setMaxViewSize?: 'compact' | 'medium';
+    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+}
+export interface HStackProps extends StackProps {
+    gridExpanded?: number[];
+    gridMedium?: number[];
+    gridCompact?: number[];
+    sectionSpacing?: boolean;
+}
+export interface VStackProps extends StackProps {
+    scroll?: 'vertical' | 'horizontal' | 'both' | '';
+}
+export {};

package/dist/Stack/types.js

@@ -0,0 +1 @@
+export {};

package/dist/Stack/utils.d.ts

@@ -0,0 +1,2 @@
+export declare const showOnSplit: (showOnValue: string, viewportSize: string) => "flex" | "none";
+export declare const generateGridTemplateColumns: (grid: any) => any;

package/dist/Stack/utils.js

@@ -0,0 +1,9 @@
+// export const showOnSplit = (showOnValue: string) => {
+//   return showOnValue?.split(" ").map(word => `showOn${word.charAt(0).toUpperCase() + word.slice(1)}`).join(" ");
+// }
+export var showOnSplit = function (showOnValue, viewportSize) {
+    return showOnValue.split(' ').includes(viewportSize) ? 'flex' : 'none';
+};
+export var generateGridTemplateColumns = function (grid) {
+    return grid.map(function (value) { return "minmax(0, ".concat(value, "fr)"); }).join(' ');
+};

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { HStack, VStack } from './Stack/index';
+export { EnviroSniffer } from './EnviroSniffer';
+export { LayoutProvider } from './Provider/index';
+export { useTokens } from './Provider/Tokens';

package/dist/index.js

@@ -0,0 +1,4 @@
+export { HStack, VStack } from './Stack/index';
+export { EnviroSniffer } from './EnviroSniffer';
+export { LayoutProvider } from './Provider/index';
+export { useTokens } from './Provider/Tokens';

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@themeable/layout",
+  "author": "Themeable Systems",
+  "version": "1.0.2",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "license": "ISC",
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0"
+  },
+  "devDependencies": {
+    "@swc/core": "^1.11.11",
+    "@types/react": "^18.3.18",
+    "typescript": "^5.5.4"
+  },
+  "scripts": {
+    "build": "tsc",
+    "push": "pnpm build && pnpm version patch && npm publish",
+    "watch": "chokidar \"src/**/*\" \"../shared/**/*\" -c \"pnpm build\""
+  }
+}

package/src/EnviroSniffer.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { useThemeable } from "./Provider";
+import { useTokens } from "./Provider/Tokens";
+
+export const EnviroSniffer = () => {
+
+  const { viewSize } = useTokens();
+  const { browserViewport } = useThemeable()
+  return (
+    <>
+      <p>Browser size: {browserViewport}</p>
+      {/* <p>Color mode: {colorMode}</p> */}
+      <p>View size: {viewSize}</p>
+      {/* <p>Section is: {space.hSection}</p> */}
+      {/* <p>Spacing mode: {spacingMode}</p> */}
+    </>
+  )
+}

package/src/Provider/Tokens.tsx

@@ -0,0 +1,55 @@
+import React, { createContext, useContext } from 'react';
+import { ThemeableContext, useThemeable } from './index';
+
+type ViewSize = 'compact' | 'medium' | 'expanded';
+type ViewSizeLimit = 'compact' | 'medium';
+
+type SpacingContextValue = {
+  spacingMode?: 'normal' | 'grouped';
+  setMaxViewSize?: ViewSizeLimit;
+  viewSize?: ViewSize;
+};
+
+const clampViewSize = (
+  actual: ViewSize,
+  limit?: ViewSizeLimit
+): ViewSize => {
+  if (!limit) return actual;
+  if (limit === 'compact') return 'compact';
+  return actual === 'compact' ? 'compact' : 'medium';
+};
+
+// @ts-ignore
+const TokenContext = createContext<SpacingContextValue>({});
+
+export const Modifier = ({
+  setMaxViewSize: localSetMaxViewSize,
+  children,
+}: {
+  setMaxViewSize?: ViewSizeLimit;
+  children: React.ReactNode;
+}) => {
+  const parent = useContext(TokenContext);
+  const { browserViewport } = useThemeable();
+
+  // Inherit from parent if not provided locally
+  const inheritedSetMaxViewSize = localSetMaxViewSize ?? parent.setMaxViewSize;
+
+  const maxViewSize = clampViewSize(browserViewport || 'expanded', inheritedSetMaxViewSize);
+
+  const value: SpacingContextValue = {
+    ...parent,
+    setMaxViewSize: inheritedSetMaxViewSize,
+    viewSize: maxViewSize,
+  };
+
+  return (
+    <TokenContext.Provider value={value}>
+      {children}
+    </TokenContext.Provider>
+  );
+};
+
+export const useTokens = () => {
+  return useContext(TokenContext);
+};

package/src/Provider/index.tsx

@@ -0,0 +1,51 @@
+import React, { createContext, useContext, useState, useEffect } from 'react';
+import { Theme } from "./types"
+
+export const ThemeableContext = createContext<Theme | undefined>(undefined);
+
+interface ThemeConfigProps {
+  children: React.ReactNode;
+}
+
+export const LayoutProvider = ({
+  children,
+}: ThemeConfigProps) => {
+
+  const [browserViewport, setBrowserViewport] = useState<'compact' | 'medium' | 'expanded'>('compact');
+
+  const prefResponsive = {
+    medium: 600,
+    expanded: 1200
+  }
+  useEffect(() => {
+    const updateViewportSize = () => {
+      const width = window.innerWidth;
+      if (width > prefResponsive.expanded) {
+        setBrowserViewport('expanded');
+      } else if (width > prefResponsive.medium) {
+        setBrowserViewport('medium');
+      } else {
+        setBrowserViewport('compact');
+      }
+    };
+    updateViewportSize();
+    window.addEventListener('resize', updateViewportSize);
+    return () => window.removeEventListener('resize', updateViewportSize);
+  }, [prefResponsive]);
+
+  return (
+    <ThemeableContext.Provider value={{
+      browserViewport
+    }}>
+      {children}
+    </ThemeableContext.Provider>
+  );
+};
+
+export const useThemeable = () => {
+  const context = useContext(ThemeableContext);
+  if (!context) {
+    throw new Error('useThemeable must be used within a ThemeableProvider');
+  }
+  return context;
+};

package/src/Provider/types.tsx

@@ -0,0 +1,212 @@
+// Define the structure of the color object (light and dark modes)
+export interface ColorScheme {
+  textSecondaryAlpha: string;
+  textPrimary: string;
+  iconAlpha: string;
+  accentAlpha: string;
+  notice: string;
+  onPrimary: string;
+  fillContainer: string;
+  surfaceHoverAlpha: string;
+  negative: string;
+  primaryAlpha: string;
+  divider: string;
+  backgroundElevated: string;
+  dividerAlpha: string;
+  surfaceDown: string;
+  fillControl: string;
+  icon: string;
+  informative: string;
+  backgroundFlat: string;
+  border: string;
+  surfaceDownAlpha: string;
+  readOnly: string;
+  readOnlyAlpha: string;
+  surfaceHover: string;
+  fillContainerAlpha: string;
+  borderAlpha: string;
+  fillControlAlpha: string;
+  textSecondary: string;
+  textPrimaryAlpha: string;
+  positive: string;
+  onAccent: string;
+  accent: string;
+  primary: string;
+}
+
+// Define the structure of the radius object (compact, medium, expanded)
+export interface Radius {
+  smallControl: number;
+  largeControl: number;
+  container: number;
+  page: number;
+}
+
+// Define the structure of the size object
+export interface Size {
+  large: number;
+  small: number;
+  base: number;
+}
+
+export interface ResponsiveSize {
+  expanded: number;
+  medium: number;
+  maxPageBleed: number;
+}
+
+// Define the structure of the space object
+export interface Space {
+  hExtra: number;
+  hSmall: number;
+  content: number;
+  vExtra: number;
+  hSection: number;
+  hUnify: number;
+  vSection: number;
+  vSmall: number;
+  vUnify: number;
+}
+
+// Define the structure of the text object
+export interface Text {
+  title3LetterSpacing: number;
+  headlineLetterSpacing: number;
+  title2Size: number;
+  title1LineHeight: number;
+  subheadLineHeight: number;
+  bodyLineHeight: number;
+  title3LineHeight: number;
+  subheadSize: number;
+  caption1LetterSpacing: number;
+  caption2LineHeight: number;
+  caption1Size: number;
+  footnoteSize: number;
+  caption2LetterSpacing: number;
+  bodyLetterSpacing: number;
+  title2LineHeight: number;
+  headlineLineHeight: number;
+  title2LetterSpacing: number;
+  caption1LineHeight: number;
+  title3Size: number;
+  footnoteLetterSpacing: number;
+  title1Size: number;
+  footnoteLineHeight: number;
+  subheadLetterSpacing: number;
+  caption2Size: number;
+  bodySize: number;
+  headlineSize: number;
+  title1LetterSpacing: number;
+}
+
+export interface TextWeight {
+  footnoteBold: number;
+  bodyLight: number;
+  footnoteLight: number;
+  footnote: number;
+  caption2Bold: number;
+  bodyBold: number;
+  subhead: number;
+  title2Regular: number;
+  title2: number;
+  subheadLight: number;
+  title2Light: number;
+  caption2: number;
+  headlineBold: number;
+  footnoteRegular: number;
+  body: number;
+  title1: number;
+  title1Light: number;
+  title3Light: number;
+  subheadRegular: number;
+  subheadBold: number;
+  caption1Bold: number;
+  title3Bold: number;
+  caption1Light: number;
+  headline: number;
+  title3Regular: number;
+  headlineRegular: number;
+  caption1: number;
+  title2Bold: number;
+  title1Bold: number;
+  headlineLight: number;
+  bodyRegular: number;
+  caption2Light: number;
+  title1Regular: number;
+  caption2Regular: number;
+  caption1Regular: number;
+  title3: number;
+}
+
+export interface TextFamily {
+  name: string;
+  titleFallback: string;
+  fallback: string;
+  src: string;
+  titleName: string;
+  titleSrc: string;
+}
+
+// Define the structure of the foundations object
+export interface Foundations {
+  radius: {
+    compact: Radius;
+    medium: Radius;
+    expanded: Radius;
+  };
+  size: {
+    responsive: ResponsiveSize;
+    compact: Size;
+    medium: Size;
+    expanded: Size;
+  };
+  space: {
+    compact: Space;
+    medium: Space;
+    expanded: Space;
+  };
+  color: {
+    light: ColorScheme;
+    dark: ColorScheme;
+  };
+  text: {
+    compact: Text;
+    medium: Text;
+    expanded: Text;
+    weight: TextWeight;
+    family: TextFamily;
+  };
+}
+
+// Define the structure of the entire fetched data object
+export interface ThemeData {
+  id: string;
+  owner: string;
+  createdOn: {
+    _seconds: number;
+    _nanoseconds: number;
+  };
+  name: string;
+  foundations: Foundations;
+  css: string;
+  lastModified: {
+    _seconds: number;
+    _nanoseconds: number;
+  };
+}
+
+// Define the Theme interface for the context
+export interface Theme {
+  color?: ColorScheme;
+  radius?: Radius;
+  textStyle?: Text;
+  textWeight?: TextWeight;
+  textFamily?: TextFamily;
+  space?: Space;
+  size?: Size;
+  viewportSize?: 'compact' | 'medium' | 'expanded';
+  svgPath?: string;
+  browserViewport?: 'compact' | 'medium' | 'expanded';
+  spacingMode?: 'normal' | 'grouped';
+}
+

package/src/Stack/HStack.tsx

@@ -0,0 +1,109 @@
+import React, { useMemo } from "react";
+import { generateGridTemplateColumns, showOnSplit } from "./utils";
+import { HStackProps } from "./types";
+import '../../Stack.css';
+import { Modifier, useTokens } from "../Provider/Tokens";
+import { useThemeable } from "../Provider";
+
+export const HStack: React.FC<HStackProps> = ({
+  style,
+  maxWidth = undefined,
+  children,
+  className,
+  align,
+  showOn,
+  gridExpanded,
+  gridMedium,
+  gridCompact,
+  ref,
+  width = 'fill',
+  height = 'hug',
+  wrap,
+  sectionSpacing = false,
+  group = false,
+  setMaxViewSize
+}) => {
+  const { spacingMode, viewSize } = useTokens();
+
+
+  const grid = {
+    compact: gridCompact,
+    medium: gridMedium,
+    expanded: gridExpanded
+  };
+
+  const hstackStyles = useMemo(() => {
+    const display = (() => {
+      if (gridExpanded && gridMedium && gridCompact) return 'grid';
+      if (viewSize && showOn) return showOnSplit(showOn, viewSize);
+      return undefined;
+    })();
+
+    return {
+      maxWidth,
+      transition: '.2s',
+      display,
+      // paddingTop: group ? `${space.vExtra}px` : undefined,
+      // paddingBottom: group ? `${space.vExtra}px` : undefined,
+      // paddingRight: group ? `${space.hExtra}px` : undefined,
+      // paddingLeft: group ? `${space.hExtra}px` : undefined,
+      gridTemplateColumns:
+        gridCompact && gridMedium && gridExpanded && viewSize
+          ? generateGridTemplateColumns(grid[viewSize])
+          : undefined,
+      // gap: sectionSpacing ? `${space.vSection}px ${space.hSection}px` : undefined,
+      gap: sectionSpacing ? `${24}px ${24}px` : undefined,
+      ...style,
+    };
+  }, [
+    maxWidth,
+    style,
+    gridExpanded,
+    gridMedium,
+    gridCompact,
+    viewSize,
+    showOn,
+    sectionSpacing,
+    // space.vExtra,
+    // space.hExtra,
+    // space.vSection,
+    // space.hSection,
+    grid,
+  ]);
+
+  const classes = [
+    'h-stack',
+    className,
+    group && 'is-group',
+    `width-${width}`,
+    `height-${height}`,
+    // showOn ? showOnSplit(showOn, viewSize || 'expanded') : '',
+    align,
+    wrap && 'wrap',
+    // group && 'group'
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  const content = (
+    <div
+      ref={ref}
+      style={hstackStyles}
+      className={classes}
+    >
+      {children}
+    </div>
+  );
+
+  if (setMaxViewSize === 'medium' || setMaxViewSize === 'compact') {
+    return (
+      <Modifier setMaxViewSize={setMaxViewSize}>
+        {content}
+      </Modifier>
+    );
+  }
+
+  return content;
+};
+
+HStack.displayName = 'HStack';

package/src/Stack/VStack.tsx

@@ -0,0 +1,71 @@
+import React, { forwardRef, useRef, useEffect, useState, useImperativeHandle, useMemo } from "react";
+import { VStackProps } from "./types";
+// import { useViewportSize, ViewportSizeProvider } from "../ProviderResponsive";
+import { showOnSplit } from "./utils";
+import '../../Stack.css';
+import { Modifier, useTokens } from "../Provider/Tokens";
+import { useThemeable } from "../Provider";
+
+export const VStack = forwardRef<HTMLDivElement, VStackProps>(
+  ({
+    style,
+    maxWidth,
+    children,
+    className,
+    align,
+    showOn,
+    height = 'hug',
+    width = 'fill',
+    scroll,
+    group = false,
+    setMaxViewSize,
+  }, parentRef) => {
+    const localRef = useRef<HTMLDivElement>(null);
+
+    useImperativeHandle(parentRef, () => localRef.current!);
+
+    const { viewSize } = useTokens();
+
+    const combinedClasses = [
+      'v-stack',
+      group && 'is-group',
+      className,
+      `width-${width}`,
+      `height-${height}`,
+      align,
+      scroll && `scroll-${scroll}`,
+    ]
+      .filter(Boolean)
+      .join(' ');
+
+    const content = (
+      <div
+        ref={localRef}
+        style={{
+          maxWidth,
+          display: viewSize !== undefined && showOn ? showOnSplit(showOn, viewSize) : undefined,
+          transition: '.2s',
+          // paddingTop: group ? `${space.vExtra}px` : undefined,
+          // paddingBottom: group ? `${space.vExtra}px` : undefined,
+          // paddingRight: group ? `${space.hExtra}px` : undefined,
+          // paddingLeft: group ? `${space.hExtra}px` : undefined,
+          ...style
+        }}
+        className={combinedClasses}
+      >
+        {children}
+      </div>
+    );
+
+    if (setMaxViewSize === 'medium' || setMaxViewSize === 'compact') {
+      return (
+        <Modifier setMaxViewSize={setMaxViewSize || 'compact'}>
+          {content}
+        </Modifier>
+      );
+    }
+
+    return content;
+  }
+);
+VStack.displayName = 'VStack';

package/src/Stack/index.tsx

@@ -0,0 +1,2 @@
+export { HStack } from './HStack'
+export { VStack } from './VStack';

package/src/Stack/types.tsx

@@ -0,0 +1,30 @@
+import React, { CSSProperties, ReactNode, RefObject, forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+
+interface StackProps {
+  style?: CSSProperties;
+  maxWidth?: string | number;
+  children?: ReactNode;
+  className?: string;
+  align?: string;
+  ref?: RefObject<HTMLDivElement>;
+  showOn?: 'compact' | 'medium' | 'expanded' | 'compact medium' | 'medium expanded' | 'compact expanded';
+  width?: 'hug' | 'fill';
+  height?: 'hug' | 'fill';
+  showOverflowBar?: boolean;
+  wrap?: boolean;
+  group?: boolean;
+  setMaxViewSize?: 'compact' | 'medium'
+  onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+}
+
+export interface HStackProps extends StackProps {
+  gridExpanded?: number[];
+  gridMedium?: number[];
+  gridCompact?: number[];
+  sectionSpacing?: boolean;
+}
+
+// VStack related props
+export interface VStackProps extends StackProps {
+  scroll?: 'vertical' | 'horizontal' | 'both' | ''
+}

package/src/Stack/utils.tsx

@@ -0,0 +1,12 @@
+// export const showOnSplit = (showOnValue: string) => {
+//   return showOnValue?.split(" ").map(word => `showOn${word.charAt(0).toUpperCase() + word.slice(1)}`).join(" ");
+// }
+
+export const showOnSplit = (showOnValue: string, viewportSize: string) => {
+  return showOnValue.split(' ').includes(viewportSize) ? 'flex' : 'none';
+}
+
+export const generateGridTemplateColumns = (grid: any) => {
+  return grid.map((value: number) => `minmax(0, ${value}fr)`).join(' ')
+};
+

package/src/index.ts

@@ -0,0 +1,5 @@
+export { HStack, VStack } from './Stack/index';
+export { EnviroSniffer } from './EnviroSniffer'
+
+export { LayoutProvider } from './Provider/index';
+export { useTokens } from './Provider/Tokens'

package/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "ESNext",
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "strict": true,
+    "jsx": "react",
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "declaration": true,
+    "moduleResolution": "node"
+  },
+  "include": [
+    "src/**/*"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist"
+  ]
+}