@spark-web/columns 3.0.0-rc.2 → 3.0.0-rc.20

package/CHANGELOG.md

@@ -1,5 +1,239 @@
 # @spark-web/columns
 
+## 3.0.0-rc.20
+
+### Minor Changes
+
+- Support for component-level theming; button-level theming
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/theme@4.0.0-rc.20
+  - @spark-web/utils@2.0.0-rc.20
+  - @spark-web/box@2.0.0-rc.20
+
+## 3.0.0-rc.19
+
+### Major Changes
+
+- test
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/theme@4.0.0-rc.19
+  - @spark-web/utils@2.0.0-rc.19
+  - @spark-web/box@2.0.0-rc.19
+
+## 3.0.0-rc.18
+
+### Major Changes
+
+- tests
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/theme@4.0.0-rc.18
+  - @spark-web/utils@2.0.0-rc.18
+  - @spark-web/box@2.0.0-rc.18
+
+## 3.0.0-rc.17
+
+### Major Changes
+
+- test
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/theme@4.0.0-rc.17
+  - @spark-web/utils@2.0.0-rc.17
+  - @spark-web/box@2.0.0-rc.17
+
+## 3.0.0-rc.16
+
+### Major Changes
+
+- test
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/theme@4.0.0-rc.16
+  - @spark-web/utils@2.0.0-rc.16
+  - @spark-web/box@2.0.0-rc.16
+
+## 3.0.0-rc.15
+
+### Major Changes
+
+- test
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/theme@4.0.0-rc.15
+  - @spark-web/utils@2.0.0-rc.15
+  - @spark-web/box@2.0.0-rc.15
+
+## 3.0.0-rc.14
+
+### Major Changes
+
+- test
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/theme@4.0.0-rc.14
+  - @spark-web/utils@2.0.0-rc.14
+  - @spark-web/box@2.0.0-rc.14
+
+## 3.0.0-rc.13
+
+### Major Changes
+
+- test
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/theme@4.0.0-rc.13
+  - @spark-web/utils@2.0.0-rc.13
+  - @spark-web/box@2.0.0-rc.13
+
+## 3.0.0-rc.12
+
+### Major Changes
+
+- test
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/theme@4.0.0-rc.12
+  - @spark-web/utils@2.0.0-rc.12
+  - @spark-web/box@2.0.0-rc.12
+
+## 3.0.0-rc.11
+
+### Major Changes
+
+- test
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/theme@4.0.0-rc.11
+  - @spark-web/utils@2.0.0-rc.11
+  - @spark-web/box@2.0.0-rc.11
+
+## 3.0.0-rc.10
+
+### Major Changes
+
+- test
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/theme@4.0.0-rc.10
+  - @spark-web/utils@2.0.0-rc.10
+  - @spark-web/box@2.0.0-rc.10
+
+## 3.0.0-rc.9
+
+### Major Changes
+
+- test
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/theme@4.0.0-rc.9
+  - @spark-web/utils@2.0.0-rc.9
+  - @spark-web/box@2.0.0-rc.9
+
+## 3.0.0-rc.8
+
+### Major Changes
+
+- test
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/theme@4.0.0-rc.8
+  - @spark-web/utils@2.0.0-rc.8
+  - @spark-web/box@2.0.0-rc.8
+
+## 3.0.0-rc.7
+
+### Major Changes
+
+- test
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/theme@4.0.0-rc.7
+  - @spark-web/utils@2.0.0-rc.7
+  - @spark-web/box@2.0.0-rc.7
+
+## 3.0.0-rc.6
+
+### Major Changes
+
+- test
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/theme@4.0.0-rc.6
+  - @spark-web/utils@2.0.0-rc.6
+  - @spark-web/box@2.0.0-rc.6
+
+## 3.0.0-rc.5
+
+### Major Changes
+
+- test
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/theme@4.0.0-rc.5
+  - @spark-web/utils@2.0.0-rc.5
+  - @spark-web/box@2.0.0-rc.5
+
+## 3.0.0-rc.4
+
+### Major Changes
+
+- bug
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/theme@4.0.0-rc.4
+  - @spark-web/utils@2.0.0-rc.4
+  - @spark-web/box@2.0.0-rc.4
+
+## 3.0.0-rc.3
+
+### Major Changes
+
+- upgrade package
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/theme@4.0.0-rc.3
+  - @spark-web/utils@2.0.0-rc.3
+  - @spark-web/box@2.0.0-rc.3
+
 ## 3.0.0-rc.2
 
 ### Major Changes

package/dist/spark-web-columns.cjs.d.ts

@@ -1,2 +1,2 @@
-export * from "./declarations/src/index";
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3Bhcmstd2ViLWNvbHVtbnMuY2pzLmQudHMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuL2RlY2xhcmF0aW9ucy9zcmMvaW5kZXguZC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSJ9
+export * from "../src/index";
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3Bhcmstd2ViLWNvbHVtbnMuY2pzLmQudHMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi9zcmMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEifQ==

package/dist/spark-web-columns.cjs.js

@@ -1,7 +1,16 @@
-'use strict';
+"use strict";
+// this file might look strange and you might be wondering what it's for
+// it's lets you import your source files by importing this entrypoint
+// as you would import it if it was built with preconstruct build
+// this file is slightly different to some others though
+// it has a require hook which compiles your code with Babel
+// this means that you don't have to set up @babel/register or anything like that
+// but you can still require this module and it'll be compiled
 
-if (process.env.NODE_ENV === "production") {
-  module.exports = require("./spark-web-columns.cjs.prod.js");
-} else {
-  module.exports = require("./spark-web-columns.cjs.dev.js");
-}
+// this bit of code imports the require hook and registers it
+let unregister = require("../../../node_modules/@preconstruct/hook").___internalHook(typeof __dirname === 'undefined' ? undefined : __dirname, "../../..", "..");
+
+// this re-exports the source file
+module.exports = require("../src/index.ts");
+
+unregister();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-web/columns",
-  "version": "3.0.0-rc.2",
+  "version": "3.0.0-rc.20",
   "homepage": "https://github.com/brighte-labs/spark-web#readme",
   "repository": {
     "type": "git",
@@ -16,10 +16,10 @@
   ],
   "dependencies": {
     "@babel/runtime": "^7.25.0",
-    "@emotion/react": "^11.13.5",
-    "@spark-web/box": "^2.0.0-rc.2",
-    "@spark-web/theme": "^4.0.0-rc.2",
-    "@spark-web/utils": "^2.0.0-rc.2"
+    "@emotion/react": "^11.14.0",
+    "@spark-web/box": "^2.0.0-rc.20",
+    "@spark-web/theme": "^4.0.0-rc.20",
+    "@spark-web/utils": "^2.0.0-rc.20"
   },
   "devDependencies": {
     "@types/react": "^18.2.0",

package/dist/declarations/src/alignment.d.ts

@@ -1,14 +0,0 @@
-declare const alignYLookup: {
-    readonly top: "start";
-    readonly center: "center";
-    readonly bottom: "end";
-    readonly stretch: "stretch";
-};
-export declare type AlignY = keyof typeof alignYLookup;
-export declare const alignYToAlignItems: (prop?: import("@spark-web/theme").ResponsiveProp<"center" | "top" | "bottom" | "stretch"> | undefined) => "center" | "start" | "stretch" | "end" | {
-    mobile: "center" | "start" | "stretch" | "end" | undefined;
-    tablet: "center" | "start" | "stretch" | "end" | undefined;
-    desktop: "center" | "start" | "stretch" | "end" | undefined;
-    wide: "center" | "start" | "stretch" | "end" | undefined;
-} | undefined;
-export {};

package/dist/declarations/src/columns.d.ts

@@ -1,39 +0,0 @@
-import type { BoxProps } from '@spark-web/box';
-import type { BrighteTheme, ResponsiveProp, ResponsiveRangeProps } from '@spark-web/theme';
-import type { DataAttributeMap } from '@spark-web/utils/internal';
-import type { ReactNode } from 'react';
-import type { AlignY } from "./alignment.js";
-declare type Gap = ResponsiveProp<keyof Omit<BrighteTheme['spacing'], 'none'>>;
-declare type ValidBoxProps = Omit<BoxProps, 'display' | 'alignItems' | 'gap' | 'flexDirection' | 'justifyContent' | 'flexWrap' | 'dangerouslySetInnerHTML'>;
-export declare type ColumnsProps = {
-    /** Vertically align items within the container. */
-    alignY?: ResponsiveProp<AlignY>;
-    /** Elements representing each column. */
-    children: ReactNode;
-    /** At which breakpoint, if any, should the columns collapse. */
-    collapseBelow?: ResponsiveRangeProps['below'];
-    /** Sets data attributes on the component. */
-    data?: DataAttributeMap;
-    /** The size of the gap between each column. */
-    gap?: Gap;
-    /** Define the relative width of each column. By default each column is the same width. */
-    template?: number[];
-} & ValidBoxProps;
-export declare const Columns: <Comp extends import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> = "div">(props: {
-    as?: Comp | undefined;
-    ref?: import("react").Ref<Comp extends "symbol" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "set" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | keyof HTMLElementTagNameMap ? (HTMLElementTagNameMap & Pick<SVGElementTagNameMap, "symbol" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "set" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view">)[Comp] : Comp extends new (...args: any) => any ? InstanceType<Comp> : undefined> | undefined;
-} & Omit<import("react").PropsWithoutRef<import("react").ComponentProps<Comp>>, "as"> & {
-    /** Vertically align items within the container. */
-    alignY?: ResponsiveProp<"center" | "top" | "bottom" | "stretch"> | undefined;
-    /** Elements representing each column. */
-    children: ReactNode;
-    /** At which breakpoint, if any, should the columns collapse. */
-    collapseBelow?: ResponsiveRangeProps['below'];
-    /** Sets data attributes on the component. */
-    data?: DataAttributeMap | undefined;
-    /** The size of the gap between each column. */
-    gap?: Gap | undefined;
-    /** Define the relative width of each column. By default each column is the same width. */
-    template?: number[] | undefined;
-} & ValidBoxProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-export {};

package/dist/declarations/src/index.d.ts

@@ -1,2 +0,0 @@
-export { Columns } from "./columns.js";
-export type { ColumnsProps } from "./columns.js";

package/dist/spark-web-columns.cjs.dev.js

@@ -1,62 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
-var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-var react$1 = require('@emotion/react');
-var box = require('@spark-web/box');
-var theme = require('@spark-web/theme');
-var ts = require('@spark-web/utils/ts');
-var react = require('react');
-var jsxRuntime = require('@emotion/react/jsx-runtime');
-
-var alignYLookup = {
-  top: 'start',
-  center: 'center',
-  bottom: 'end',
-  stretch: 'stretch'
-};
-var alignYToAlignItems = theme.createResponsiveMapFn(alignYLookup);
-
-var _excluded = ["alignY", "collapseBelow", "data", "gap", "template"];
-var Columns = ts.forwardRefWithAs(function (_ref, forwardedRef) {
-  var _ref$alignY = _ref.alignY,
-    alignY = _ref$alignY === void 0 ? 'top' : _ref$alignY,
-    collapseBelow = _ref.collapseBelow,
-    data = _ref.data,
-    gap = _ref.gap,
-    template = _ref.template,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var theme$1 = theme.useTheme();
-  var alignItems = alignYToAlignItems(alignY);
-  var count = react.Children.count(props.children);
-  var gridTemplateColumns = template ? template.map(function (c) {
-    return "".concat(c, "fr");
-  }).join(' ') : "repeat(".concat(count, ", 1fr)");
-  var _theme$utils$responsi = theme$1.utils.responsiveRange({
-      below: collapseBelow
-    }),
-    _theme$utils$responsi2 = _slicedToArray(_theme$utils$responsi, 4),
-    collapseOnMobile = _theme$utils$responsi2[0],
-    collapseOnTablet = _theme$utils$responsi2[1],
-    collapseOnDesktop = _theme$utils$responsi2[2],
-    collapseOnWide = _theme$utils$responsi2[3];
-  return jsxRuntime.jsx(box.Box, _objectSpread({
-    ref: forwardedRef,
-    css: react$1.css(theme$1.utils.resolveResponsiveProps({
-      alignItems: alignItems,
-      display: 'grid',
-      gap: theme$1.utils.mapResponsiveScale(gap, theme$1.spacing),
-      gridTemplateColumns: collapseBelow ? theme$1.utils.optimizeResponsiveArray([collapseOnMobile ? null : gridTemplateColumns, collapseOnTablet ? null : gridTemplateColumns, collapseOnDesktop ? null : gridTemplateColumns, collapseOnWide ? null : gridTemplateColumns]) : gridTemplateColumns,
-      // fix flex overflow bug that prevents text truncation
-      '> *': {
-        minWidth: 0
-      }
-    })),
-    data: data
-  }, props));
-});
-
-exports.Columns = Columns;

package/dist/spark-web-columns.cjs.prod.js

@@ -1,62 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
-var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-var react$1 = require('@emotion/react');
-var box = require('@spark-web/box');
-var theme = require('@spark-web/theme');
-var ts = require('@spark-web/utils/ts');
-var react = require('react');
-var jsxRuntime = require('@emotion/react/jsx-runtime');
-
-var alignYLookup = {
-  top: 'start',
-  center: 'center',
-  bottom: 'end',
-  stretch: 'stretch'
-};
-var alignYToAlignItems = theme.createResponsiveMapFn(alignYLookup);
-
-var _excluded = ["alignY", "collapseBelow", "data", "gap", "template"];
-var Columns = ts.forwardRefWithAs(function (_ref, forwardedRef) {
-  var _ref$alignY = _ref.alignY,
-    alignY = _ref$alignY === void 0 ? 'top' : _ref$alignY,
-    collapseBelow = _ref.collapseBelow,
-    data = _ref.data,
-    gap = _ref.gap,
-    template = _ref.template,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var theme$1 = theme.useTheme();
-  var alignItems = alignYToAlignItems(alignY);
-  var count = react.Children.count(props.children);
-  var gridTemplateColumns = template ? template.map(function (c) {
-    return "".concat(c, "fr");
-  }).join(' ') : "repeat(".concat(count, ", 1fr)");
-  var _theme$utils$responsi = theme$1.utils.responsiveRange({
-      below: collapseBelow
-    }),
-    _theme$utils$responsi2 = _slicedToArray(_theme$utils$responsi, 4),
-    collapseOnMobile = _theme$utils$responsi2[0],
-    collapseOnTablet = _theme$utils$responsi2[1],
-    collapseOnDesktop = _theme$utils$responsi2[2],
-    collapseOnWide = _theme$utils$responsi2[3];
-  return jsxRuntime.jsx(box.Box, _objectSpread({
-    ref: forwardedRef,
-    css: react$1.css(theme$1.utils.resolveResponsiveProps({
-      alignItems: alignItems,
-      display: 'grid',
-      gap: theme$1.utils.mapResponsiveScale(gap, theme$1.spacing),
-      gridTemplateColumns: collapseBelow ? theme$1.utils.optimizeResponsiveArray([collapseOnMobile ? null : gridTemplateColumns, collapseOnTablet ? null : gridTemplateColumns, collapseOnDesktop ? null : gridTemplateColumns, collapseOnWide ? null : gridTemplateColumns]) : gridTemplateColumns,
-      // fix flex overflow bug that prevents text truncation
-      '> *': {
-        minWidth: 0
-      }
-    })),
-    data: data
-  }, props));
-});
-
-exports.Columns = Columns;

package/dist/spark-web-columns.esm.js

@@ -1,58 +0,0 @@
-import _objectSpread from '@babel/runtime/helpers/esm/objectSpread2';
-import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
-import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
-import { css } from '@emotion/react';
-import { Box } from '@spark-web/box';
-import { createResponsiveMapFn, useTheme } from '@spark-web/theme';
-import { forwardRefWithAs } from '@spark-web/utils/ts';
-import { Children } from 'react';
-import { jsx } from '@emotion/react/jsx-runtime';
-
-var alignYLookup = {
-  top: 'start',
-  center: 'center',
-  bottom: 'end',
-  stretch: 'stretch'
-};
-var alignYToAlignItems = createResponsiveMapFn(alignYLookup);
-
-var _excluded = ["alignY", "collapseBelow", "data", "gap", "template"];
-var Columns = forwardRefWithAs(function (_ref, forwardedRef) {
-  var _ref$alignY = _ref.alignY,
-    alignY = _ref$alignY === void 0 ? 'top' : _ref$alignY,
-    collapseBelow = _ref.collapseBelow,
-    data = _ref.data,
-    gap = _ref.gap,
-    template = _ref.template,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var theme = useTheme();
-  var alignItems = alignYToAlignItems(alignY);
-  var count = Children.count(props.children);
-  var gridTemplateColumns = template ? template.map(function (c) {
-    return "".concat(c, "fr");
-  }).join(' ') : "repeat(".concat(count, ", 1fr)");
-  var _theme$utils$responsi = theme.utils.responsiveRange({
-      below: collapseBelow
-    }),
-    _theme$utils$responsi2 = _slicedToArray(_theme$utils$responsi, 4),
-    collapseOnMobile = _theme$utils$responsi2[0],
-    collapseOnTablet = _theme$utils$responsi2[1],
-    collapseOnDesktop = _theme$utils$responsi2[2],
-    collapseOnWide = _theme$utils$responsi2[3];
-  return jsx(Box, _objectSpread({
-    ref: forwardedRef,
-    css: css(theme.utils.resolveResponsiveProps({
-      alignItems: alignItems,
-      display: 'grid',
-      gap: theme.utils.mapResponsiveScale(gap, theme.spacing),
-      gridTemplateColumns: collapseBelow ? theme.utils.optimizeResponsiveArray([collapseOnMobile ? null : gridTemplateColumns, collapseOnTablet ? null : gridTemplateColumns, collapseOnDesktop ? null : gridTemplateColumns, collapseOnWide ? null : gridTemplateColumns]) : gridTemplateColumns,
-      // fix flex overflow bug that prevents text truncation
-      '> *': {
-        minWidth: 0
-      }
-    })),
-    data: data
-  }, props));
-});
-
-export { Columns };