@themeable/layout 1.0.2 → 1.0.3

package/dist/EnviroSniffer.js

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

package/dist/Provider/Layout.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 useLayout: () => SpacingContextValue;
+export {};

package/dist/Provider/Layout.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 { useThemeableLayout } 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 = useThemeableLayout().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 useLayout = function () {
+    return useContext(TokenContext);
+};

package/dist/Provider/index.d.ts

@@ -5,5 +5,5 @@ interface ThemeConfigProps {
     children: React.ReactNode;
 }
 export declare const LayoutProvider: ({ children, }: ThemeConfigProps) => React.JSX.Element;
-export declare const useThemeable: () => Theme;
+export declare const useThemeableLayout: () => Theme;
 export {};

package/dist/Provider/index.js

@@ -28,10 +28,10 @@ export var LayoutProvider = function (_a) {
             browserViewport: browserViewport
         } }, children));
 };
-export var useThemeable = function () {
+export var useThemeableLayout = function () {
     var context = useContext(ThemeableContext);
     if (!context) {
-        throw new Error('useThemeable must be used within a ThemeableProvider');
+        throw new Error('useThemeableLayout must be used within a ThemeableLayoutProvider');
     }
     return context;
 };

package/dist/Stack/HStack.js

@@ -12,10 +12,10 @@ var __assign = (this && this.__assign) || function () {
 import React, { useMemo } from "react";
 import { generateGridTemplateColumns, showOnSplit } from "./utils";
 import '../../Stack.css';
-import { Modifier, useTokens } from "../Provider/Tokens";
+import { Modifier, useLayout } from "../Provider/Layout";
 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 style = _a.style, _b = _a.maxWidth, maxWidth = _b === void 0 ? undefined : _b, children = _a.children, className = _a.className, align = _a.align, showOn = _a.showOn, _c = _a.padding, padding = _c === void 0 ? false : _c, gridExpanded = _a.gridExpanded, gridMedium = _a.gridMedium, gridCompact = _a.gridCompact, ref = _a.ref, _d = _a.width, width = _d === void 0 ? 'fill' : _d, _e = _a.height, height = _e === void 0 ? 'hug' : _e, wrap = _a.wrap, _f = _a.sectionSpacing, sectionSpacing = _f === void 0 ? false : _f, _g = _a.group, group = _g === void 0 ? false : _g, setMaxViewSize = _a.setMaxViewSize;
+    var viewSize = useLayout().viewSize;
     var grid = {
         compact: gridCompact,
         medium: gridMedium,
@@ -29,12 +29,8 @@ export var HStack = function (_a) {
                 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
+        var paddingUtil = viewSize !== 'compact' ? 20 : 16;
+        return __assign({ maxWidth: maxWidth, transition: '.2s', display: display, padding: padding ? paddingUtil : undefined, gridTemplateColumns: gridCompact && gridMedium && gridExpanded && viewSize
                 ? generateGridTemplateColumns(grid[viewSize])
                 : undefined, 
             // gap: sectionSpacing ? `${space.vSection}px ${space.hSection}px` : undefined,

package/dist/Stack/VStack.js

@@ -13,12 +13,12 @@ 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";
+import { Modifier, useLayout } from "../Provider/Layout";
 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 style = _a.style, maxWidth = _a.maxWidth, children = _a.children, className = _a.className, align = _a.align, showOn = _a.showOn, _b = _a.padding, padding = _b === void 0 ? false : _b, _c = _a.height, height = _c === void 0 ? 'hug' : _c, _d = _a.width, width = _d === void 0 ? 'fill' : _d, scroll = _a.scroll, _e = _a.group, group = _e === void 0 ? false : _e, setMaxViewSize = _a.setMaxViewSize;
     var localRef = useRef(null);
     useImperativeHandle(parentRef, function () { return localRef.current; });
-    var viewSize = useTokens().viewSize;
+    var viewSize = useLayout().viewSize;
     var combinedClasses = [
         'v-stack',
         group && 'is-group',
@@ -30,7 +30,10 @@ export var VStack = forwardRef(function (_a, parentRef) {
     ]
         .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));
+    var paddingUtil = viewSize !== 'compact' ? 20 : 16;
+    var content = (React.createElement("div", { ref: localRef, style: __assign({ maxWidth: maxWidth, display: viewSize !== undefined && showOn ? showOnSplit(showOn, viewSize) : undefined, transition: '.2s', padding: padding ? paddingUtil : undefined }, style), className: combinedClasses },
+        viewSize,
+        children));
     if (setMaxViewSize === 'medium' || setMaxViewSize === 'compact') {
         return (React.createElement(Modifier, { setMaxViewSize: setMaxViewSize || 'compact' }, content));
     }

package/dist/Stack/types.d.ts

@@ -5,6 +5,7 @@ interface StackProps {
     children?: ReactNode;
     className?: string;
     align?: string;
+    padding?: boolean;
     ref?: RefObject<HTMLDivElement>;
     showOn?: 'compact' | 'medium' | 'expanded' | 'compact medium' | 'medium expanded' | 'compact expanded';
     width?: 'hug' | 'fill';

package/dist/index.d.ts

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

package/dist/index.js

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@themeable/layout",
   "author": "Themeable Systems",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/EnviroSniffer.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
-import { useThemeable } from "./Provider";
-import { useTokens } from "./Provider/Tokens";
+import { useThemeableLayout } from "./Provider";
+import { useLayout } from "./Provider/Layout";
 
 export const EnviroSniffer = () => {
 
-  const { viewSize } = useTokens();
-  const { browserViewport } = useThemeable()
+  const { viewSize } = useLayout();
+  const { browserViewport } = useThemeableLayout()
   return (
     <>
       <p>Browser size: {browserViewport}</p>

package/src/Provider/{Tokens.tsx → Layout.tsx}

@@ -1,5 +1,5 @@
 import React, { createContext, useContext } from 'react';
-import { ThemeableContext, useThemeable } from './index';
+import { ThemeableContext, useThemeableLayout } from './index';
 
 type ViewSize = 'compact' | 'medium' | 'expanded';
 type ViewSizeLimit = 'compact' | 'medium';
@@ -30,7 +30,7 @@ export const Modifier = ({
   children: React.ReactNode;
 }) => {
   const parent = useContext(TokenContext);
-  const { browserViewport } = useThemeable();
+  const { browserViewport } = useThemeableLayout();
 
   // Inherit from parent if not provided locally
   const inheritedSetMaxViewSize = localSetMaxViewSize ?? parent.setMaxViewSize;
@@ -50,6 +50,6 @@ export const Modifier = ({
   );
 };
 
-export const useTokens = () => {
+export const useLayout = () => {
   return useContext(TokenContext);
 };

package/src/Provider/index.tsx

@@ -42,10 +42,10 @@ export const LayoutProvider = ({
   );
 };
 
-export const useThemeable = () => {
+export const useThemeableLayout = () => {
   const context = useContext(ThemeableContext);
   if (!context) {
-    throw new Error('useThemeable must be used within a ThemeableProvider');
+    throw new Error('useThemeableLayout must be used within a ThemeableLayoutProvider');
   }
   return context;
 };

package/src/Stack/HStack.tsx

@@ -2,8 +2,7 @@ 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";
+import { Modifier, useLayout } from "../Provider/Layout";
 
 export const HStack: React.FC<HStackProps> = ({
   style,
@@ -12,6 +11,7 @@ export const HStack: React.FC<HStackProps> = ({
   className,
   align,
   showOn,
+  padding = false,
   gridExpanded,
   gridMedium,
   gridCompact,
@@ -23,7 +23,7 @@ export const HStack: React.FC<HStackProps> = ({
   group = false,
   setMaxViewSize
 }) => {
-  const { spacingMode, viewSize } = useTokens();
+  const { viewSize } = useLayout();
 
 
   const grid = {
@@ -39,14 +39,13 @@ export const HStack: React.FC<HStackProps> = ({
       return undefined;
     })();
 
+    const paddingUtil = viewSize !== 'compact' ? 20 : 16
+
     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,
+      padding: padding ? paddingUtil : undefined,
       gridTemplateColumns:
         gridCompact && gridMedium && gridExpanded && viewSize
           ? generateGridTemplateColumns(grid[viewSize])

package/src/Stack/VStack.tsx

@@ -3,8 +3,7 @@ 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";
+import { Modifier, useLayout } from "../Provider/Layout";
 
 export const VStack = forwardRef<HTMLDivElement, VStackProps>(
   ({
@@ -14,6 +13,7 @@ export const VStack = forwardRef<HTMLDivElement, VStackProps>(
     className,
     align,
     showOn,
+    padding = false,
     height = 'hug',
     width = 'fill',
     scroll,
@@ -24,7 +24,7 @@ export const VStack = forwardRef<HTMLDivElement, VStackProps>(
 
     useImperativeHandle(parentRef, () => localRef.current!);
 
-    const { viewSize } = useTokens();
+    const { viewSize } = useLayout();
 
     const combinedClasses = [
       'v-stack',
@@ -38,6 +38,9 @@ export const VStack = forwardRef<HTMLDivElement, VStackProps>(
       .filter(Boolean)
       .join(' ');
 
+
+    const paddingUtil = viewSize !== 'compact' ? 20 : 16
+
     const content = (
       <div
         ref={localRef}
@@ -45,14 +48,12 @@ export const VStack = forwardRef<HTMLDivElement, VStackProps>(
           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,
+          padding: padding ? paddingUtil : undefined,
           ...style
         }}
         className={combinedClasses}
       >
+        {viewSize}
         {children}
       </div>
     );

package/src/Stack/types.tsx

@@ -6,6 +6,7 @@ interface StackProps {
   children?: ReactNode;
   className?: string;
   align?: string;
+  padding?: boolean;
   ref?: RefObject<HTMLDivElement>;
   showOn?: 'compact' | 'medium' | 'expanded' | 'compact medium' | 'medium expanded' | 'compact expanded';
   width?: 'hug' | 'fill';

package/src/index.ts

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