donghy 0.0.1

package/dist/cjs/components/layout/divider/Divider.js

@@ -0,0 +1,45 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Divider = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _DividerModule = _interopRequireDefault(require("./Divider.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/**
+ * 分割线组件属性
+ */
+
+var Divider = exports.Divider = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var _ref$direction = _ref.direction,
+    direction = _ref$direction === void 0 ? 'horizontal' : _ref$direction,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'solid' : _ref$variant,
+    text = _ref.text,
+    _ref$textPosition = _ref.textPosition,
+    textPosition = _ref$textPosition === void 0 ? 'center' : _ref$textPosition,
+    children = _ref.children,
+    className = _ref.className,
+    style = _ref.style;
+  var content = text !== null && text !== void 0 ? text : children;
+  var hasText = content !== undefined && content !== null;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    ref: ref,
+    className: [_DividerModule.default.divider, className].filter(Boolean).join(' '),
+    style: style,
+    "data-direction": direction,
+    "data-variant": variant,
+    "data-text-position": hasText ? textPosition : undefined,
+    children: hasText && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: _DividerModule.default.text,
+      children: content
+    })
+  });
+});
+Divider.displayName = 'Divider';
+var _default = exports.default = Divider;

package/dist/cjs/components/layout/divider/Divider.module.css

@@ -0,0 +1,77 @@
+.divider {
+  --nv-divider-color: var(--nv-color-border, rgba(0, 0, 0, 0.06));
+  --nv-divider-text-color: var(--nv-color-text-secondary, rgba(0, 0, 0, 0.45));
+  --nv-divider-text-font-size: var(--nv-font-size-small, 12px);
+  --nv-divider-spacing: 16px;
+  border: none;
+  margin: 0;
+  padding: 0;
+}
+
+.divider[data-direction='horizontal'] {
+  display: flex;
+  align-items: center;
+  margin: var(--nv-divider-spacing, 16px) 0;
+  border-top: 1px var(--nv-divider-color, rgba(0, 0, 0, 0.06)) solid;
+}
+
+.divider[data-direction='horizontal'][data-variant='dashed'] {
+  border-top-style: dashed;
+}
+
+.divider[data-direction='horizontal'][data-variant='dotted'] {
+  border-top-style: dotted;
+}
+
+.divider[data-direction='horizontal'][data-text-position] {
+  border-top: none;
+}
+
+.divider[data-direction='horizontal'][data-text-position]::before,
+.divider[data-direction='horizontal'][data-text-position]::after {
+  content: '';
+  flex: 1;
+  border-top: 1px var(--nv-divider-color, rgba(0, 0, 0, 0.06)) solid;
+}
+
+.divider[data-direction='horizontal'][data-text-position][data-variant='dashed']::before,
+.divider[data-direction='horizontal'][data-text-position][data-variant='dashed']::after {
+  border-top-style: dashed;
+}
+
+.divider[data-direction='horizontal'][data-text-position][data-variant='dotted']::before,
+.divider[data-direction='horizontal'][data-text-position][data-variant='dotted']::after {
+  border-top-style: dotted;
+}
+
+.divider[data-direction='horizontal'][data-text-position='left']::before {
+  flex: 0 0 5%;
+}
+
+.divider[data-direction='horizontal'][data-text-position='right']::after {
+  flex: 0 0 5%;
+}
+
+.divider[data-direction='vertical'] {
+  display: inline-block;
+  width: 1px;
+  height: 0.9em;
+  margin: 0 calc(var(--nv-divider-spacing, 16px) / 2);
+  vertical-align: middle;
+  border-left: 1px var(--nv-divider-color, rgba(0, 0, 0, 0.06)) solid;
+}
+
+.divider[data-direction='vertical'][data-variant='dashed'] {
+  border-left-style: dashed;
+}
+
+.divider[data-direction='vertical'][data-variant='dotted'] {
+  border-left-style: dotted;
+}
+
+.text {
+  padding: 0 var(--nv-divider-spacing, 16px);
+  font-size: var(--nv-divider-text-font-size, 14px);
+  color: var(--nv-divider-text-color, rgba(0, 0, 0, 0.88));
+  white-space: nowrap;
+}

package/dist/cjs/components/layout/divider/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Divider", {
+  enumerable: true,
+  get: function get() {
+    return _Divider.Divider;
+  }
+});
+var _Divider = require("./Divider");

package/dist/cjs/components/layout/flex/Flex.js

@@ -0,0 +1,110 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.VStack = exports.JUSTIFY_MAP = exports.HStack = exports.Flex = exports.ALIGN_MAP = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _FlexModule = _interopRequireDefault(require("./Flex.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } /**
+ * Flex布局组件属性
+ */ /**
+ * 水平堆叠组件属性（省略direction）
+ */ /**
+ * 垂直堆叠组件属性（省略direction）
+ */
+var JUSTIFY_MAP = exports.JUSTIFY_MAP = {
+  start: 'flex-start',
+  center: 'center',
+  end: 'flex-end',
+  between: 'space-between',
+  around: 'space-around',
+  evenly: 'space-evenly'
+};
+var ALIGN_MAP = exports.ALIGN_MAP = {
+  start: 'flex-start',
+  center: 'center',
+  end: 'flex-end',
+  stretch: 'stretch',
+  baseline: 'baseline'
+};
+var Flex = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var _ref$direction = _ref.direction,
+    direction = _ref$direction === void 0 ? 'row' : _ref$direction,
+    justify = _ref.justify,
+    align = _ref.align,
+    wrap = _ref.wrap,
+    gap = _ref.gap,
+    flex = _ref.flex,
+    grow = _ref.grow,
+    shrink = _ref.shrink,
+    basis = _ref.basis,
+    children = _ref.children,
+    className = _ref.className,
+    style = _ref.style;
+  var dataAttrs = {
+    'data-direction': direction,
+    'data-justify': justify || undefined,
+    'data-align': align || undefined,
+    'data-wrap': wrap === true ? 'wrap' : wrap || undefined
+  };
+  var inlineStyle = _objectSpread({}, style);
+  if (gap !== undefined) {
+    if (Array.isArray(gap)) {
+      inlineStyle.rowGap = gap[0];
+      inlineStyle.columnGap = gap[1];
+    } else {
+      inlineStyle.gap = gap;
+    }
+  }
+  if (flex !== undefined) {
+    inlineStyle.flex = typeof flex === 'number' ? String(flex) : flex;
+  }
+  if (grow !== undefined) {
+    inlineStyle.flexGrow = grow;
+  }
+  if (shrink !== undefined) {
+    inlineStyle.flexShrink = shrink;
+  }
+  if (basis !== undefined) {
+    inlineStyle.flexBasis = typeof basis === 'number' ? "".concat(basis, "px") : basis;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({
+    ref: ref,
+    className: [_FlexModule.default.flex, className].filter(Boolean).join(' '),
+    style: inlineStyle
+  }, dataAttrs), {}, {
+    children: children
+  }));
+});
+Flex.displayName = 'Flex';
+var HStack = exports.HStack = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Flex, _objectSpread({
+    ref: ref,
+    direction: "row",
+    align: "center"
+  }, props));
+});
+HStack.displayName = 'Flex.HStack';
+var VStack = exports.VStack = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Flex, _objectSpread({
+    ref: ref,
+    direction: "column",
+    align: "stretch"
+  }, props));
+});
+VStack.displayName = 'Flex.VStack';
+var FlexComponent = exports.Flex = Object.assign(Flex, {
+  HStack: HStack,
+  VStack: VStack
+});
+var _default = exports.default = FlexComponent;

package/dist/cjs/components/layout/flex/Flex.module.css

@@ -0,0 +1,26 @@
+.flex {
+  display: flex;
+  min-width: 0;
+}
+
+.flex[data-direction='row'] { flex-direction: row; }
+.flex[data-direction='column'] { flex-direction: column; }
+.flex[data-direction='row-reverse'] { flex-direction: row-reverse; }
+.flex[data-direction='column-reverse'] { flex-direction: column-reverse; }
+
+.flex[data-justify='start'] { justify-content: flex-start; }
+.flex[data-justify='center'] { justify-content: center; }
+.flex[data-justify='end'] { justify-content: flex-end; }
+.flex[data-justify='between'] { justify-content: space-between; }
+.flex[data-justify='around'] { justify-content: space-around; }
+.flex[data-justify='evenly'] { justify-content: space-evenly; }
+
+.flex[data-align='start'] { align-items: flex-start; }
+.flex[data-align='center'] { align-items: center; }
+.flex[data-align='end'] { align-items: flex-end; }
+.flex[data-align='stretch'] { align-items: stretch; }
+.flex[data-align='baseline'] { align-items: baseline; }
+
+.flex[data-wrap='wrap'] { flex-wrap: wrap; }
+.flex[data-wrap='nowrap'] { flex-wrap: nowrap; }
+.flex[data-wrap='wrap-reverse'] { flex-wrap: wrap-reverse; }

package/dist/cjs/components/layout/flex/index.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Flex", {
+  enumerable: true,
+  get: function get() {
+    return _Flex.Flex;
+  }
+});
+Object.defineProperty(exports, "HStack", {
+  enumerable: true,
+  get: function get() {
+    return _Flex.HStack;
+  }
+});
+Object.defineProperty(exports, "VStack", {
+  enumerable: true,
+  get: function get() {
+    return _Flex.VStack;
+  }
+});
+var _Flex = require("./Flex");

package/dist/cjs/components/layout/grid/Grid.js

@@ -0,0 +1,171 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Row = exports.Col = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _breakpoint = require("../../shared/constants/breakpoint");
+var _useMatchMedia = require("../../shared/hooks/useMatchMedia");
+var _GridModule = _interopRequireDefault(require("./Grid.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } /**
+ * Grid行组件属性
+ */ /**
+ * Grid列组件属性
+ */
+var RowContext = /*#__PURE__*/(0, _react.createContext)({});
+function resolveResponsiveSpan(breakpoint, baseSpan, baseOffset, responsive) {
+  var currentIndex = _breakpoint.BREAKPOINT_ORDER.indexOf(breakpoint);
+  for (var i = currentIndex; i >= 0; i--) {
+    var bp = _breakpoint.BREAKPOINT_ORDER[i];
+    var bpValue = responsive[bp];
+    if (bpValue !== undefined) {
+      if (typeof bpValue === 'number') {
+        return {
+          span: bpValue,
+          offset: undefined
+        };
+      }
+      return {
+        span: bpValue.span,
+        offset: bpValue.offset
+      };
+    }
+  }
+  return {
+    span: baseSpan,
+    offset: baseOffset
+  };
+}
+var Row = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var gutter = _ref.gutter,
+    justify = _ref.justify,
+    align = _ref.align,
+    _ref$wrap = _ref.wrap,
+    wrap = _ref$wrap === void 0 ? true : _ref$wrap,
+    children = _ref.children,
+    className = _ref.className,
+    style = _ref.style;
+  var dataAttrs = {
+    'data-justify': justify || undefined,
+    'data-align': align || undefined,
+    'data-wrap': wrap === false ? 'nowrap' : undefined
+  };
+  var rowStyle = _objectSpread({}, style);
+  if (gutter !== undefined) {
+    var _ref2 = Array.isArray(gutter) ? gutter : [gutter, 0],
+      _ref3 = _slicedToArray(_ref2, 2),
+      horizontalGutter = _ref3[0],
+      verticalGutter = _ref3[1];
+    rowStyle.marginLeft = horizontalGutter / 2 * -1;
+    rowStyle.marginRight = horizontalGutter / 2 * -1;
+    if (verticalGutter > 0) {
+      rowStyle.marginTop = verticalGutter / 2 * -1;
+      rowStyle.marginBottom = verticalGutter / 2 * -1;
+    }
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(RowContext.Provider, {
+    value: {
+      gutter: gutter
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({
+      ref: ref,
+      className: [_GridModule.default.row, className].filter(Boolean).join(' '),
+      style: rowStyle
+    }, dataAttrs), {}, {
+      children: children
+    }))
+  });
+});
+Row.displayName = 'Row';
+var Col = exports.Col = /*#__PURE__*/(0, _react.forwardRef)(function (_ref4, ref) {
+  var span = _ref4.span,
+    offset = _ref4.offset,
+    push = _ref4.push,
+    pull = _ref4.pull,
+    xs = _ref4.xs,
+    sm = _ref4.sm,
+    md = _ref4.md,
+    lg = _ref4.lg,
+    xl = _ref4.xl,
+    xxl = _ref4.xxl,
+    children = _ref4.children,
+    className = _ref4.className,
+    style = _ref4.style;
+  var _useContext = (0, _react.useContext)(RowContext),
+    gutter = _useContext.gutter;
+  var currentBreakpoint = (0, _useMatchMedia.useMatchMedia)();
+  var _useState = (0, _react.useState)('xs'),
+    _useState2 = _slicedToArray(_useState, 2),
+    breakpoint = _useState2[0],
+    setBreakpoint = _useState2[1];
+  (0, _react.useEffect)(function () {
+    setBreakpoint(currentBreakpoint);
+  }, [currentBreakpoint]);
+  var responsive = {
+    xs: xs,
+    sm: sm,
+    md: md,
+    lg: lg,
+    xl: xl,
+    xxl: xxl
+  };
+  var resolved = resolveResponsiveSpan(breakpoint, span, offset, responsive);
+  var colStyle = _objectSpread({}, style);
+  if (resolved.span !== undefined) {
+    var width = resolved.span / 24 * 100;
+    colStyle.flex = "0 0 ".concat(width, "%");
+    colStyle.maxWidth = "".concat(width, "%");
+  } else {
+    colStyle.flex = '1 1 0';
+  }
+  if (resolved.offset !== undefined && resolved.offset > 0) {
+    colStyle.marginLeft = "".concat(resolved.offset / 24 * 100, "%");
+  }
+  if (push !== undefined && push > 0) {
+    colStyle.left = "".concat(push / 24 * 100, "%");
+    colStyle.position = 'relative';
+  }
+  if (pull !== undefined && pull > 0) {
+    colStyle.right = "".concat(pull / 24 * 100, "%");
+    colStyle.position = 'relative';
+  }
+  if (gutter !== undefined) {
+    var _ref5 = Array.isArray(gutter) ? gutter : [gutter, 0],
+      _ref6 = _slicedToArray(_ref5, 2),
+      horizontalGutter = _ref6[0],
+      verticalGutter = _ref6[1];
+    colStyle.paddingLeft = horizontalGutter / 2;
+    colStyle.paddingRight = horizontalGutter / 2;
+    if (verticalGutter > 0) {
+      colStyle.paddingTop = verticalGutter / 2;
+      colStyle.paddingBottom = verticalGutter / 2;
+    }
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    ref: ref,
+    className: [_GridModule.default.col, className].filter(Boolean).join(' '),
+    style: colStyle,
+    children: children
+  });
+});
+Col.displayName = 'Row.Col';
+var RowComponent = exports.Row = Object.assign(Row, {
+  Col: Col
+});
+var _default = exports.default = RowComponent;

package/dist/cjs/components/layout/grid/Grid.module.css

@@ -0,0 +1,22 @@
+.row {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.row[data-justify='start'] { justify-content: flex-start; }
+.row[data-justify='center'] { justify-content: center; }
+.row[data-justify='end'] { justify-content: flex-end; }
+.row[data-justify='space-between'] { justify-content: space-between; }
+.row[data-justify='space-around'] { justify-content: space-around; }
+
+.row[data-align='top'] { align-items: flex-start; }
+.row[data-align='middle'] { align-items: center; }
+.row[data-align='bottom'] { align-items: flex-end; }
+.row[data-align='stretch'] { align-items: stretch; }
+
+.row[data-wrap='nowrap'] { flex-wrap: nowrap; }
+
+.col {
+  max-width: 100%;
+  min-width: 0;
+}

package/dist/cjs/components/layout/grid/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Col", {
+  enumerable: true,
+  get: function get() {
+    return _Grid.Col;
+  }
+});
+Object.defineProperty(exports, "Row", {
+  enumerable: true,
+  get: function get() {
+    return _Grid.Row;
+  }
+});
+var _Grid = require("./Grid");

package/dist/cjs/components/layout/index.js

@@ -0,0 +1,79 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Col", {
+  enumerable: true,
+  get: function get() {
+    return _grid.Col;
+  }
+});
+Object.defineProperty(exports, "Divider", {
+  enumerable: true,
+  get: function get() {
+    return _divider.Divider;
+  }
+});
+Object.defineProperty(exports, "Flex", {
+  enumerable: true,
+  get: function get() {
+    return _flex.Flex;
+  }
+});
+Object.defineProperty(exports, "HStack", {
+  enumerable: true,
+  get: function get() {
+    return _flex.HStack;
+  }
+});
+Object.defineProperty(exports, "Layout", {
+  enumerable: true,
+  get: function get() {
+    return _layout.Layout;
+  }
+});
+Object.defineProperty(exports, "Masonry", {
+  enumerable: true,
+  get: function get() {
+    return _masonry.Masonry;
+  }
+});
+Object.defineProperty(exports, "Row", {
+  enumerable: true,
+  get: function get() {
+    return _grid.Row;
+  }
+});
+Object.defineProperty(exports, "Space", {
+  enumerable: true,
+  get: function get() {
+    return _space.Space;
+  }
+});
+Object.defineProperty(exports, "Splitter", {
+  enumerable: true,
+  get: function get() {
+    return _splitter.Splitter;
+  }
+});
+Object.defineProperty(exports, "Stack", {
+  enumerable: true,
+  get: function get() {
+    return _stack.Stack;
+  }
+});
+Object.defineProperty(exports, "VStack", {
+  enumerable: true,
+  get: function get() {
+    return _flex.VStack;
+  }
+});
+var _layout = require("./layout");
+var _divider = require("./divider");
+var _flex = require("./flex");
+var _grid = require("./grid");
+var _masonry = require("./masonry");
+var _space = require("./space");
+var _splitter = require("./splitter");
+var _stack = require("./stack");