thread-ui 0.7.14 → 0.8.0

package/dist/styled-system/patterns/bleed..js

@@ -0,0 +1,24 @@
+import { getPatternStyles, patternFns } from '../helpers..js';
+import { css } from '../css/index..js';
+
+const bleedConfig = {
+transform(props, { map, isCssUnit, isCssVar }) {
+  const { inline, block, ...rest } = props;
+  const valueFn = (v) => isCssUnit(v) || isCssVar(v) ? v : `token(spacing.${v}, ${v})`;
+  return {
+    "--bleed-x": map(inline, valueFn),
+    "--bleed-y": map(block, valueFn),
+    marginInline: "calc(var(--bleed-x, 0) * -1)",
+    marginBlock: "calc(var(--bleed-y, 0) * -1)",
+    ...rest
+  };
+},
+defaultValues:{inline:'0',block:'0'}}
+
+export const getBleedStyle = (styles = {}) => {
+  const _styles = getPatternStyles(bleedConfig, styles)
+  return bleedConfig.transform(_styles, patternFns)
+}
+
+export const bleed = (styles) => css(getBleedStyle(styles))
+bleed.raw = getBleedStyle

package/dist/styled-system/patterns/bleed.js

@@ -0,0 +1,24 @@
+import { getPatternStyles, patternFns } from '../helpers.js';
+import { css } from '../css/index.js';
+
+const bleedConfig = {
+transform(props, { map, isCssUnit, isCssVar }) {
+  const { inline, block, ...rest } = props;
+  const valueFn = (v) => isCssUnit(v) || isCssVar(v) ? v : `token(spacing.${v}, ${v})`;
+  return {
+    "--bleed-x": map(inline, valueFn),
+    "--bleed-y": map(block, valueFn),
+    marginInline: "calc(var(--bleed-x, 0) * -1)",
+    marginBlock: "calc(var(--bleed-y, 0) * -1)",
+    ...rest
+  };
+},
+defaultValues:{inline:'0',block:'0'}}
+
+export const getBleedStyle = (styles = {}) => {
+  const _styles = getPatternStyles(bleedConfig, styles)
+  return bleedConfig.transform(_styles, patternFns)
+}
+
+export const bleed = (styles) => css(getBleedStyle(styles))
+bleed.raw = getBleedStyle

package/dist/styled-system/patterns/box..js

@@ -0,0 +1,15 @@
+import { getPatternStyles, patternFns } from '../helpers..js';
+import { css } from '../css/index..js';
+
+const boxConfig = {
+transform(props) {
+  return props;
+}}
+
+export const getBoxStyle = (styles = {}) => {
+  const _styles = getPatternStyles(boxConfig, styles)
+  return boxConfig.transform(_styles, patternFns)
+}
+
+export const box = (styles) => css(getBoxStyle(styles))
+box.raw = getBoxStyle

package/dist/styled-system/patterns/box.js

@@ -0,0 +1,15 @@
+import { getPatternStyles, patternFns } from '../helpers.js';
+import { css } from '../css/index.js';
+
+const boxConfig = {
+transform(props) {
+  return props;
+}}
+
+export const getBoxStyle = (styles = {}) => {
+  const _styles = getPatternStyles(boxConfig, styles)
+  return boxConfig.transform(_styles, patternFns)
+}
+
+export const box = (styles) => css(getBoxStyle(styles))
+box.raw = getBoxStyle

package/dist/styled-system/patterns/center..js

@@ -0,0 +1,21 @@
+import { getPatternStyles, patternFns } from '../helpers..js';
+import { css } from '../css/index..js';
+
+const centerConfig = {
+transform(props) {
+  const { inline, ...rest } = props;
+  return {
+    display: inline ? "inline-flex" : "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    ...rest
+  };
+}}
+
+export const getCenterStyle = (styles = {}) => {
+  const _styles = getPatternStyles(centerConfig, styles)
+  return centerConfig.transform(_styles, patternFns)
+}
+
+export const center = (styles) => css(getCenterStyle(styles))
+center.raw = getCenterStyle

package/dist/styled-system/patterns/center.js

@@ -0,0 +1,21 @@
+import { getPatternStyles, patternFns } from '../helpers.js';
+import { css } from '../css/index.js';
+
+const centerConfig = {
+transform(props) {
+  const { inline, ...rest } = props;
+  return {
+    display: inline ? "inline-flex" : "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    ...rest
+  };
+}}
+
+export const getCenterStyle = (styles = {}) => {
+  const _styles = getPatternStyles(centerConfig, styles)
+  return centerConfig.transform(_styles, patternFns)
+}
+
+export const center = (styles) => css(getCenterStyle(styles))
+center.raw = getCenterStyle

package/dist/styled-system/patterns/circle..js

@@ -0,0 +1,25 @@
+import { getPatternStyles, patternFns } from '../helpers..js';
+import { css } from '../css/index..js';
+
+const circleConfig = {
+transform(props) {
+  const { size, ...rest } = props;
+  return {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flex: "0 0 auto",
+    width: size,
+    height: size,
+    borderRadius: "9999px",
+    ...rest
+  };
+}}
+
+export const getCircleStyle = (styles = {}) => {
+  const _styles = getPatternStyles(circleConfig, styles)
+  return circleConfig.transform(_styles, patternFns)
+}
+
+export const circle = (styles) => css(getCircleStyle(styles))
+circle.raw = getCircleStyle

package/dist/styled-system/patterns/circle.js

@@ -0,0 +1,25 @@
+import { getPatternStyles, patternFns } from '../helpers.js';
+import { css } from '../css/index.js';
+
+const circleConfig = {
+transform(props) {
+  const { size, ...rest } = props;
+  return {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flex: "0 0 auto",
+    width: size,
+    height: size,
+    borderRadius: "9999px",
+    ...rest
+  };
+}}
+
+export const getCircleStyle = (styles = {}) => {
+  const _styles = getPatternStyles(circleConfig, styles)
+  return circleConfig.transform(_styles, patternFns)
+}
+
+export const circle = (styles) => css(getCircleStyle(styles))
+circle.raw = getCircleStyle

package/dist/styled-system/patterns/container..js

@@ -0,0 +1,22 @@
+import { getPatternStyles, patternFns } from '../helpers..js';
+import { css } from '../css/index..js';
+
+const containerConfig = {
+transform(props) {
+  return {
+    width: "100%",
+    marginRight: "auto",
+    marginLeft: "auto",
+    maxWidth: "1400px",
+    paddingRight: "2rem",
+    paddingLeft: "2rem"
+  };
+}}
+
+export const getContainerStyle = (styles = {}) => {
+  const _styles = getPatternStyles(containerConfig, styles)
+  return containerConfig.transform(_styles, patternFns)
+}
+
+export const container = (styles) => css(getContainerStyle(styles))
+container.raw = getContainerStyle

package/dist/styled-system/patterns/container.js

@@ -0,0 +1,22 @@
+import { getPatternStyles, patternFns } from '../helpers.js';
+import { css } from '../css/index.js';
+
+const containerConfig = {
+transform(props) {
+  return {
+    width: "100%",
+    marginRight: "auto",
+    marginLeft: "auto",
+    maxWidth: "1400px",
+    paddingRight: "2rem",
+    paddingLeft: "2rem"
+  };
+}}
+
+export const getContainerStyle = (styles = {}) => {
+  const _styles = getPatternStyles(containerConfig, styles)
+  return containerConfig.transform(_styles, patternFns)
+}
+
+export const container = (styles) => css(getContainerStyle(styles))
+container.raw = getContainerStyle

package/dist/styled-system/patterns/cq..js

@@ -0,0 +1,21 @@
+import { getPatternStyles, patternFns } from '../helpers..js';
+import { css } from '../css/index..js';
+
+const cqConfig = {
+transform(props) {
+  const { name, type, ...rest } = props;
+  return {
+    containerType: type,
+    containerName: name,
+    ...rest
+  };
+},
+defaultValues:{type:'inline-size'}}
+
+export const getCqStyle = (styles = {}) => {
+  const _styles = getPatternStyles(cqConfig, styles)
+  return cqConfig.transform(_styles, patternFns)
+}
+
+export const cq = (styles) => css(getCqStyle(styles))
+cq.raw = getCqStyle

package/dist/styled-system/patterns/cq.js

@@ -0,0 +1,21 @@
+import { getPatternStyles, patternFns } from '../helpers.js';
+import { css } from '../css/index.js';
+
+const cqConfig = {
+transform(props) {
+  const { name, type, ...rest } = props;
+  return {
+    containerType: type,
+    containerName: name,
+    ...rest
+  };
+},
+defaultValues:{type:'inline-size'}}
+
+export const getCqStyle = (styles = {}) => {
+  const _styles = getPatternStyles(cqConfig, styles)
+  return cqConfig.transform(_styles, patternFns)
+}
+
+export const cq = (styles) => css(getCqStyle(styles))
+cq.raw = getCqStyle

package/dist/styled-system/patterns/divider..js

@@ -0,0 +1,25 @@
+import { getPatternStyles, patternFns } from '../helpers..js';
+import { css } from '../css/index..js';
+
+const dividerConfig = {
+transform(props, { map }) {
+  const { orientation, thickness, color, ...rest } = props;
+  return {
+    "--thickness": thickness,
+    width: map(orientation, (v) => v === "vertical" ? void 0 : "100%"),
+    height: map(orientation, (v) => v === "horizontal" ? void 0 : "100%"),
+    borderBlockEndWidth: map(orientation, (v) => v === "horizontal" ? "var(--thickness)" : void 0),
+    borderInlineEndWidth: map(orientation, (v) => v === "vertical" ? "var(--thickness)" : void 0),
+    borderColor: color,
+    ...rest
+  };
+},
+defaultValues:{orientation:'horizontal',thickness:'1px'}}
+
+export const getDividerStyle = (styles = {}) => {
+  const _styles = getPatternStyles(dividerConfig, styles)
+  return dividerConfig.transform(_styles, patternFns)
+}
+
+export const divider = (styles) => css(getDividerStyle(styles))
+divider.raw = getDividerStyle

package/dist/styled-system/patterns/divider.js

@@ -0,0 +1,25 @@
+import { getPatternStyles, patternFns } from '../helpers.js';
+import { css } from '../css/index.js';
+
+const dividerConfig = {
+transform(props, { map }) {
+  const { orientation, thickness, color, ...rest } = props;
+  return {
+    "--thickness": thickness,
+    width: map(orientation, (v) => v === "vertical" ? void 0 : "100%"),
+    height: map(orientation, (v) => v === "horizontal" ? void 0 : "100%"),
+    borderBlockEndWidth: map(orientation, (v) => v === "horizontal" ? "var(--thickness)" : void 0),
+    borderInlineEndWidth: map(orientation, (v) => v === "vertical" ? "var(--thickness)" : void 0),
+    borderColor: color,
+    ...rest
+  };
+},
+defaultValues:{orientation:'horizontal',thickness:'1px'}}
+
+export const getDividerStyle = (styles = {}) => {
+  const _styles = getPatternStyles(dividerConfig, styles)
+  return dividerConfig.transform(_styles, patternFns)
+}
+
+export const divider = (styles) => css(getDividerStyle(styles))
+divider.raw = getDividerStyle

package/dist/styled-system/patterns/flex..js

@@ -0,0 +1,26 @@
+import { getPatternStyles, patternFns } from '../helpers..js';
+import { css } from '../css/index..js';
+
+const flexConfig = {
+transform(props) {
+  const { direction, align, justify, wrap: wrap2, basis, grow, shrink, ...rest } = props;
+  return {
+    display: "flex",
+    flexDirection: direction,
+    alignItems: align,
+    justifyContent: justify,
+    flexWrap: wrap2,
+    flexBasis: basis,
+    flexGrow: grow,
+    flexShrink: shrink,
+    ...rest
+  };
+}}
+
+export const getFlexStyle = (styles = {}) => {
+  const _styles = getPatternStyles(flexConfig, styles)
+  return flexConfig.transform(_styles, patternFns)
+}
+
+export const flex = (styles) => css(getFlexStyle(styles))
+flex.raw = getFlexStyle

package/dist/styled-system/patterns/flex.js

@@ -0,0 +1,26 @@
+import { getPatternStyles, patternFns } from '../helpers.js';
+import { css } from '../css/index.js';
+
+const flexConfig = {
+transform(props) {
+  const { direction, align, justify, wrap: wrap2, basis, grow, shrink, ...rest } = props;
+  return {
+    display: "flex",
+    flexDirection: direction,
+    alignItems: align,
+    justifyContent: justify,
+    flexWrap: wrap2,
+    flexBasis: basis,
+    flexGrow: grow,
+    flexShrink: shrink,
+    ...rest
+  };
+}}
+
+export const getFlexStyle = (styles = {}) => {
+  const _styles = getPatternStyles(flexConfig, styles)
+  return flexConfig.transform(_styles, patternFns)
+}
+
+export const flex = (styles) => css(getFlexStyle(styles))
+flex.raw = getFlexStyle

package/dist/styled-system/patterns/float..js

@@ -0,0 +1,52 @@
+import { getPatternStyles, patternFns } from '../helpers..js';
+import { css } from '../css/index..js';
+
+const floatConfig = {
+transform(props, { map }) {
+  const { offset, offsetX, offsetY, placement, ...rest } = props;
+  return {
+    display: "inline-flex",
+    justifyContent: "center",
+    alignItems: "center",
+    position: "absolute",
+    insetBlockStart: map(placement, (v) => {
+      const [side] = v.split("-");
+      const map2 = { top: offsetY, middle: "50%", bottom: "auto" };
+      return map2[side];
+    }),
+    insetBlockEnd: map(placement, (v) => {
+      const [side] = v.split("-");
+      const map2 = { top: "auto", middle: "50%", bottom: offsetY };
+      return map2[side];
+    }),
+    insetInlineStart: map(placement, (v) => {
+      const [, align] = v.split("-");
+      const map2 = { start: offsetX, center: "50%", end: "auto" };
+      return map2[align];
+    }),
+    insetInlineEnd: map(placement, (v) => {
+      const [, align] = v.split("-");
+      const map2 = { start: "auto", center: "50%", end: offsetX };
+      return map2[align];
+    }),
+    translate: map(placement, (v) => {
+      const [side, align] = v.split("-");
+      const mapX = { start: "-50%", center: "-50%", end: "50%" };
+      const mapY = { top: "-50%", middle: "-50%", bottom: "50%" };
+      return `${mapX[align]} ${mapY[side]}`;
+    }),
+    ...rest
+  };
+},
+defaultValues(props) {
+  const offset = props.offset || "0";
+  return { offset, offsetX: offset, offsetY: offset, placement: "top-end" };
+}}
+
+export const getFloatStyle = (styles = {}) => {
+  const _styles = getPatternStyles(floatConfig, styles)
+  return floatConfig.transform(_styles, patternFns)
+}
+
+export const float = (styles) => css(getFloatStyle(styles))
+float.raw = getFloatStyle

package/dist/styled-system/patterns/float.js

@@ -0,0 +1,52 @@
+import { getPatternStyles, patternFns } from '../helpers.js';
+import { css } from '../css/index.js';
+
+const floatConfig = {
+transform(props, { map }) {
+  const { offset, offsetX, offsetY, placement, ...rest } = props;
+  return {
+    display: "inline-flex",
+    justifyContent: "center",
+    alignItems: "center",
+    position: "absolute",
+    insetBlockStart: map(placement, (v) => {
+      const [side] = v.split("-");
+      const map2 = { top: offsetY, middle: "50%", bottom: "auto" };
+      return map2[side];
+    }),
+    insetBlockEnd: map(placement, (v) => {
+      const [side] = v.split("-");
+      const map2 = { top: "auto", middle: "50%", bottom: offsetY };
+      return map2[side];
+    }),
+    insetInlineStart: map(placement, (v) => {
+      const [, align] = v.split("-");
+      const map2 = { start: offsetX, center: "50%", end: "auto" };
+      return map2[align];
+    }),
+    insetInlineEnd: map(placement, (v) => {
+      const [, align] = v.split("-");
+      const map2 = { start: "auto", center: "50%", end: offsetX };
+      return map2[align];
+    }),
+    translate: map(placement, (v) => {
+      const [side, align] = v.split("-");
+      const mapX = { start: "-50%", center: "-50%", end: "50%" };
+      const mapY = { top: "-50%", middle: "-50%", bottom: "50%" };
+      return `${mapX[align]} ${mapY[side]}`;
+    }),
+    ...rest
+  };
+},
+defaultValues(props) {
+  const offset = props.offset || "0";
+  return { offset, offsetX: offset, offsetY: offset, placement: "top-end" };
+}}
+
+export const getFloatStyle = (styles = {}) => {
+  const _styles = getPatternStyles(floatConfig, styles)
+  return floatConfig.transform(_styles, patternFns)
+}
+
+export const float = (styles) => css(getFloatStyle(styles))
+float.raw = getFloatStyle

package/dist/styled-system/patterns/grid-item..js

@@ -0,0 +1,25 @@
+import { getPatternStyles, patternFns } from '../helpers..js';
+import { css } from '../css/index..js';
+
+const gridItemConfig = {
+transform(props, { map }) {
+  const { colSpan, rowSpan, colStart, rowStart, colEnd, rowEnd, ...rest } = props;
+  const spanFn = (v) => v === "auto" ? v : `span ${v}`;
+  return {
+    gridColumn: colSpan != null ? map(colSpan, spanFn) : void 0,
+    gridRow: rowSpan != null ? map(rowSpan, spanFn) : void 0,
+    gridColumnStart: colStart,
+    gridColumnEnd: colEnd,
+    gridRowStart: rowStart,
+    gridRowEnd: rowEnd,
+    ...rest
+  };
+}}
+
+export const getGridItemStyle = (styles = {}) => {
+  const _styles = getPatternStyles(gridItemConfig, styles)
+  return gridItemConfig.transform(_styles, patternFns)
+}
+
+export const gridItem = (styles) => css(getGridItemStyle(styles))
+gridItem.raw = getGridItemStyle

package/dist/styled-system/patterns/grid-item.js

@@ -0,0 +1,25 @@
+import { getPatternStyles, patternFns } from '../helpers.js';
+import { css } from '../css/index.js';
+
+const gridItemConfig = {
+transform(props, { map }) {
+  const { colSpan, rowSpan, colStart, rowStart, colEnd, rowEnd, ...rest } = props;
+  const spanFn = (v) => v === "auto" ? v : `span ${v}`;
+  return {
+    gridColumn: colSpan != null ? map(colSpan, spanFn) : void 0,
+    gridRow: rowSpan != null ? map(rowSpan, spanFn) : void 0,
+    gridColumnStart: colStart,
+    gridColumnEnd: colEnd,
+    gridRowStart: rowStart,
+    gridRowEnd: rowEnd,
+    ...rest
+  };
+}}
+
+export const getGridItemStyle = (styles = {}) => {
+  const _styles = getPatternStyles(gridItemConfig, styles)
+  return gridItemConfig.transform(_styles, patternFns)
+}
+
+export const gridItem = (styles) => css(getGridItemStyle(styles))
+gridItem.raw = getGridItemStyle

package/dist/styled-system/patterns/grid..js

@@ -0,0 +1,27 @@
+import { getPatternStyles, patternFns } from '../helpers..js';
+import { css } from '../css/index..js';
+
+const gridConfig = {
+transform(props, { map, isCssUnit }) {
+  const { columnGap, rowGap, gap, columns, minChildWidth, ...rest } = props;
+  const getValue = (v) => isCssUnit(v) ? v : `token(sizes.${v}, ${v})`;
+  return {
+    display: "grid",
+    gridTemplateColumns: columns != null ? map(columns, (v) => `repeat(${v}, minmax(0, 1fr))`) : minChildWidth != null ? map(minChildWidth, (v) => `repeat(auto-fit, minmax(${getValue(v)}, 1fr))`) : void 0,
+    gap,
+    columnGap,
+    rowGap,
+    ...rest
+  };
+},
+defaultValues(props) {
+  return { gap: props.columnGap || props.rowGap ? void 0 : "8px" };
+}}
+
+export const getGridStyle = (styles = {}) => {
+  const _styles = getPatternStyles(gridConfig, styles)
+  return gridConfig.transform(_styles, patternFns)
+}
+
+export const grid = (styles) => css(getGridStyle(styles))
+grid.raw = getGridStyle

package/dist/styled-system/patterns/grid.js

@@ -0,0 +1,27 @@
+import { getPatternStyles, patternFns } from '../helpers.js';
+import { css } from '../css/index.js';
+
+const gridConfig = {
+transform(props, { map, isCssUnit }) {
+  const { columnGap, rowGap, gap, columns, minChildWidth, ...rest } = props;
+  const getValue = (v) => isCssUnit(v) ? v : `token(sizes.${v}, ${v})`;
+  return {
+    display: "grid",
+    gridTemplateColumns: columns != null ? map(columns, (v) => `repeat(${v}, minmax(0, 1fr))`) : minChildWidth != null ? map(minChildWidth, (v) => `repeat(auto-fit, minmax(${getValue(v)}, 1fr))`) : void 0,
+    gap,
+    columnGap,
+    rowGap,
+    ...rest
+  };
+},
+defaultValues(props) {
+  return { gap: props.columnGap || props.rowGap ? void 0 : "8px" };
+}}
+
+export const getGridStyle = (styles = {}) => {
+  const _styles = getPatternStyles(gridConfig, styles)
+  return gridConfig.transform(_styles, patternFns)
+}
+
+export const grid = (styles) => css(getGridStyle(styles))
+grid.raw = getGridStyle

package/dist/styled-system/patterns/hstack..js

@@ -0,0 +1,24 @@
+import { getPatternStyles, patternFns } from '../helpers..js';
+import { css } from '../css/index..js';
+
+const hstackConfig = {
+transform(props) {
+  const { justify, gap, ...rest } = props;
+  return {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: justify,
+    gap,
+    flexDirection: "row",
+    ...rest
+  };
+},
+defaultValues:{gap:'8px'}}
+
+export const getHstackStyle = (styles = {}) => {
+  const _styles = getPatternStyles(hstackConfig, styles)
+  return hstackConfig.transform(_styles, patternFns)
+}
+
+export const hstack = (styles) => css(getHstackStyle(styles))
+hstack.raw = getHstackStyle

package/dist/styled-system/patterns/hstack.js

@@ -0,0 +1,24 @@
+import { getPatternStyles, patternFns } from '../helpers.js';
+import { css } from '../css/index.js';
+
+const hstackConfig = {
+transform(props) {
+  const { justify, gap, ...rest } = props;
+  return {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: justify,
+    gap,
+    flexDirection: "row",
+    ...rest
+  };
+},
+defaultValues:{gap:'8px'}}
+
+export const getHstackStyle = (styles = {}) => {
+  const _styles = getPatternStyles(hstackConfig, styles)
+  return hstackConfig.transform(_styles, patternFns)
+}
+
+export const hstack = (styles) => css(getHstackStyle(styles))
+hstack.raw = getHstackStyle

package/dist/styled-system/patterns/index..js

@@ -0,0 +1,20 @@
+export * from './container..js';
+export * from './box..js';
+export * from './flex..js';
+export * from './stack..js';
+export * from './vstack..js';
+export * from './hstack..js';
+export * from './spacer..js';
+export * from './square..js';
+export * from './circle..js';
+export * from './center..js';
+export * from './link-overlay..js';
+export * from './aspect-ratio..js';
+export * from './grid..js';
+export * from './grid-item..js';
+export * from './wrap..js';
+export * from './divider..js';
+export * from './float..js';
+export * from './bleed..js';
+export * from './visually-hidden..js';
+export * from './cq..js';