@webflare/ui 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,30 @@
+import { getPatternStyles, patternFns } from './runtime.js';
+import { memo } 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 function bleedRaw(styles) {
+  const s = getPatternStyles(bleedConfig, styles || {})
+  return bleedConfig.transform(s, patternFns)
+}
+
+export const bleed = /* @__PURE__ */ Object.assign(/* @__PURE__ */ memo(function bleed(styles = {}) {
+  return css(bleedRaw(styles))
+}), { raw: bleedRaw, propKeys: ["block","inline"] })

package/dist/styled-system/patterns/box.d.ts

@@ -0,0 +1,17 @@
+import type { SystemStyleObject } from '../types/system.js';
+
+export interface BoxProperties {}
+
+type BoxRestStyles = Omit<SystemStyleObject, keyof BoxProperties>
+
+interface BoxStyles extends BoxProperties, BoxRestStyles {}
+
+interface BoxPatternFn {
+  (styles?: BoxStyles): string
+  raw: (styles?: BoxStyles) => SystemStyleObject
+  propKeys: Array<keyof BoxProperties>
+}
+
+export declare function boxRaw(styles?: BoxStyles): SystemStyleObject;
+
+export declare const box: BoxPatternFn;

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

@@ -0,0 +1,16 @@
+import { getPatternStyles, patternFns } from './runtime.js';
+import { memo } from '../helpers.js';
+import { css } from '../css/index.js';
+
+const boxConfig = { transform(props) {
+  return props;
+} }
+
+export function boxRaw(styles) {
+  const s = getPatternStyles(boxConfig, styles || {})
+  return boxConfig.transform(s, patternFns)
+}
+
+export const box = /* @__PURE__ */ Object.assign(/* @__PURE__ */ memo(function box(styles = {}) {
+  return css(boxRaw(styles))
+}), { raw: boxRaw, propKeys: [] })

package/dist/styled-system/patterns/center.d.ts

@@ -0,0 +1,19 @@
+import type { ConditionalValue, SystemStyleObject } from '../types/system.js';
+
+export interface CenterProperties {
+  inline?: ConditionalValue<boolean>
+}
+
+type CenterRestStyles = Omit<SystemStyleObject, keyof CenterProperties>
+
+interface CenterStyles extends CenterProperties, CenterRestStyles {}
+
+interface CenterPatternFn {
+  (styles?: CenterStyles): string
+  raw: (styles?: CenterStyles) => SystemStyleObject
+  propKeys: Array<keyof CenterProperties>
+}
+
+export declare function centerRaw(styles?: CenterStyles): SystemStyleObject;
+
+export declare const center: CenterPatternFn;

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

@@ -0,0 +1,22 @@
+import { getPatternStyles, patternFns } from './runtime.js';
+import { memo } 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 function centerRaw(styles) {
+  const s = getPatternStyles(centerConfig, styles || {})
+  return centerConfig.transform(s, patternFns)
+}
+
+export const center = /* @__PURE__ */ Object.assign(/* @__PURE__ */ memo(function center(styles = {}) {
+  return css(centerRaw(styles))
+}), { raw: centerRaw, propKeys: ["inline"] })

package/dist/styled-system/patterns/circle.d.ts

@@ -0,0 +1,19 @@
+import type { SystemProperties, SystemStyleObject } from '../types/system.js';
+
+export interface CircleProperties {
+  size?: SystemProperties["width"]
+}
+
+type CircleRestStyles = Omit<SystemStyleObject, keyof CircleProperties>
+
+interface CircleStyles extends CircleProperties, CircleRestStyles {}
+
+interface CirclePatternFn {
+  (styles?: CircleStyles): string
+  raw: (styles?: CircleStyles) => SystemStyleObject
+  propKeys: Array<keyof CircleProperties>
+}
+
+export declare function circleRaw(styles?: CircleStyles): SystemStyleObject;
+
+export declare const circle: CirclePatternFn;

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

@@ -0,0 +1,26 @@
+import { getPatternStyles, patternFns } from './runtime.js';
+import { memo } 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 function circleRaw(styles) {
+  const s = getPatternStyles(circleConfig, styles || {})
+  return circleConfig.transform(s, patternFns)
+}
+
+export const circle = /* @__PURE__ */ Object.assign(/* @__PURE__ */ memo(function circle(styles = {}) {
+  return css(circleRaw(styles))
+}), { raw: circleRaw, propKeys: ["size"] })

package/dist/styled-system/patterns/container.d.ts

@@ -0,0 +1,17 @@
+import type { SystemStyleObject } from '../types/system.js';
+
+export interface ContainerProperties {}
+
+type ContainerRestStyles = Omit<SystemStyleObject, keyof ContainerProperties>
+
+interface ContainerStyles extends ContainerProperties, ContainerRestStyles {}
+
+interface ContainerPatternFn {
+  (styles?: ContainerStyles): string
+  raw: (styles?: ContainerStyles) => SystemStyleObject
+  propKeys: Array<keyof ContainerProperties>
+}
+
+export declare function containerRaw(styles?: ContainerStyles): SystemStyleObject;
+
+export declare const container: ContainerPatternFn;

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

@@ -0,0 +1,37 @@
+import { getPatternStyles, patternFns } from './runtime.js';
+import { memo } from '../helpers.js';
+import { css } from '../css/index.js';
+
+const containerConfig = { transform({ maxWidth, px }) {
+  return {
+    position: "relative",
+    maxWidth: {
+      "base": "360px",
+      "3xs": "360px",
+      "2xs": "400px",
+      "xs": "500px",
+      "sm": "620px",
+      "md": "740px",
+      "lg": "1000px",
+      "xl": "1200px",
+      "2xl": "1400px",
+      "3xl": "1600px",
+      ...maxWidth
+    },
+    mx: "auto",
+    px: {
+      base: "lg",
+      ...px
+    },
+    transition: "max-width 200ms"
+  };
+} }
+
+export function containerRaw(styles) {
+  const s = getPatternStyles(containerConfig, styles || {})
+  return containerConfig.transform(s, patternFns)
+}
+
+export const container = /* @__PURE__ */ Object.assign(/* @__PURE__ */ memo(function container(styles = {}) {
+  return css(containerRaw(styles))
+}), { raw: containerRaw, propKeys: [] })

package/dist/styled-system/patterns/cq.d.ts

@@ -0,0 +1,21 @@
+import type { TokenValue } from '../types/tokens.js';
+import type { ConditionalValue, SystemProperties, SystemStyleObject } from '../types/system.js';
+
+export interface CqProperties {
+  name?: ConditionalValue<TokenValue<"containerNames"> | SystemProperties["containerName"]>
+  type?: SystemProperties["containerType"]
+}
+
+type CqRestStyles = Omit<SystemStyleObject, keyof CqProperties>
+
+interface CqStyles extends CqProperties, CqRestStyles {}
+
+interface CqPatternFn {
+  (styles?: CqStyles): string
+  raw: (styles?: CqStyles) => SystemStyleObject
+  propKeys: Array<keyof CqProperties>
+}
+
+export declare function cqRaw(styles?: CqStyles): SystemStyleObject;
+
+export declare const cq: CqPatternFn;

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

@@ -0,0 +1,24 @@
+import { getPatternStyles, patternFns } from './runtime.js';
+import { memo } 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 function cqRaw(styles) {
+  const s = getPatternStyles(cqConfig, styles || {})
+  return cqConfig.transform(s, patternFns)
+}
+
+export const cq = /* @__PURE__ */ Object.assign(/* @__PURE__ */ memo(function cq(styles = {}) {
+  return css(cqRaw(styles))
+}), { raw: cqRaw, propKeys: ["name","type"] })

package/dist/styled-system/patterns/divider.d.ts

@@ -0,0 +1,22 @@
+import type { TokenValue } from '../types/tokens.js';
+import type { ConditionalValue, SystemProperties, SystemStyleObject } from '../types/system.js';
+
+export interface DividerProperties {
+  color?: ConditionalValue<TokenValue<"colors"> | SystemProperties["borderColor"]>
+  orientation?: ConditionalValue<"horizontal" | "vertical">
+  thickness?: ConditionalValue<TokenValue<"sizes"> | SystemProperties["borderWidth"]>
+}
+
+type DividerRestStyles = Omit<SystemStyleObject, keyof DividerProperties>
+
+interface DividerStyles extends DividerProperties, DividerRestStyles {}
+
+interface DividerPatternFn {
+  (styles?: DividerStyles): string
+  raw: (styles?: DividerStyles) => SystemStyleObject
+  propKeys: Array<keyof DividerProperties>
+}
+
+export declare function dividerRaw(styles?: DividerStyles): SystemStyleObject;
+
+export declare const divider: DividerPatternFn;

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

@@ -0,0 +1,31 @@
+import { getPatternStyles, patternFns } from './runtime.js';
+import { memo } from '../helpers.js';
+import { css } from '../css/index.js';
+
+const dividerConfig = {
+  transform(props, { map }) {
+    const { orientation, thickness, color: color2, ...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: color2,
+      ...rest
+    };
+  },
+  defaultValues: {
+    orientation: "horizontal",
+    thickness: "1px"
+  }
+}
+
+export function dividerRaw(styles) {
+  const s = getPatternStyles(dividerConfig, styles || {})
+  return dividerConfig.transform(s, patternFns)
+}
+
+export const divider = /* @__PURE__ */ Object.assign(/* @__PURE__ */ memo(function divider(styles = {}) {
+  return css(dividerRaw(styles))
+}), { raw: dividerRaw, propKeys: ["color","orientation","thickness"] })

package/dist/styled-system/patterns/flex.d.ts

@@ -0,0 +1,25 @@
+import type { SystemProperties, SystemStyleObject } from '../types/system.js';
+
+export interface FlexProperties {
+  align?: SystemProperties["alignItems"]
+  basis?: SystemProperties["flexBasis"]
+  direction?: SystemProperties["flexDirection"]
+  grow?: SystemProperties["flexGrow"]
+  justify?: SystemProperties["justifyContent"]
+  shrink?: SystemProperties["flexShrink"]
+  wrap?: SystemProperties["flexWrap"]
+}
+
+type FlexRestStyles = Omit<SystemStyleObject, keyof FlexProperties>
+
+interface FlexStyles extends FlexProperties, FlexRestStyles {}
+
+interface FlexPatternFn {
+  (styles?: FlexStyles): string
+  raw: (styles?: FlexStyles) => SystemStyleObject
+  propKeys: Array<keyof FlexProperties>
+}
+
+export declare function flexRaw(styles?: FlexStyles): SystemStyleObject;
+
+export declare const flex: FlexPatternFn;

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

@@ -0,0 +1,27 @@
+import { getPatternStyles, patternFns } from './runtime.js';
+import { memo } 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 function flexRaw(styles) {
+  const s = getPatternStyles(flexConfig, styles || {})
+  return flexConfig.transform(s, patternFns)
+}
+
+export const flex = /* @__PURE__ */ Object.assign(/* @__PURE__ */ memo(function flex(styles = {}) {
+  return css(flexRaw(styles))
+}), { raw: flexRaw, propKeys: ["align","basis","direction","grow","justify","shrink","wrap"] })

package/dist/styled-system/patterns/float.d.ts

@@ -0,0 +1,23 @@
+import type { TokenValue } from '../types/tokens.js';
+import type { ConditionalValue, SystemProperties, SystemStyleObject } from '../types/system.js';
+
+export interface FloatProperties {
+  offset?: ConditionalValue<TokenValue<"spacing"> | SystemProperties["top"]>
+  offsetX?: ConditionalValue<TokenValue<"spacing"> | SystemProperties["left"]>
+  offsetY?: ConditionalValue<TokenValue<"spacing"> | SystemProperties["top"]>
+  placement?: ConditionalValue<"bottom-end" | "bottom-start" | "top-end" | "top-start" | "bottom-center" | "top-center" | "middle-center" | "middle-end" | "middle-start">
+}
+
+type FloatRestStyles = Omit<SystemStyleObject, keyof FloatProperties>
+
+interface FloatStyles extends FloatProperties, FloatRestStyles {}
+
+interface FloatPatternFn {
+  (styles?: FloatStyles): string
+  raw: (styles?: FloatStyles) => SystemStyleObject
+  propKeys: Array<keyof FloatProperties>
+}
+
+export declare function floatRaw(styles?: FloatStyles): SystemStyleObject;
+
+export declare const float: FloatPatternFn;

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

@@ -0,0 +1,78 @@
+import { getPatternStyles, patternFns } from './runtime.js';
+import { memo } 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("-");
+        return {
+          top: offsetY,
+          middle: "50%",
+          bottom: "auto"
+        }[side];
+      }),
+      insetBlockEnd: map(placement, (v) => {
+        const [side] = v.split("-");
+        return {
+          top: "auto",
+          middle: "50%",
+          bottom: offsetY
+        }[side];
+      }),
+      insetInlineStart: map(placement, (v) => {
+        const [, align] = v.split("-");
+        return {
+          start: offsetX,
+          center: "50%",
+          end: "auto"
+        }[align];
+      }),
+      insetInlineEnd: map(placement, (v) => {
+        const [, align] = v.split("-");
+        return {
+          start: "auto",
+          center: "50%",
+          end: offsetX
+        }[align];
+      }),
+      translate: map(placement, (v) => {
+        const [side, align] = v.split("-");
+        return `${{
+          start: "-50%",
+          center: "-50%",
+          end: "50%"
+        }[align]} ${{
+          top: "-50%",
+          middle: "-50%",
+          bottom: "50%"
+        }[side]}`;
+      }),
+      ...rest
+    };
+  },
+  defaultValues(props) {
+    const offset = props.offset || "0";
+    return {
+      offset,
+      offsetX: offset,
+      offsetY: offset,
+      placement: "top-end"
+    };
+  }
+}
+
+export function floatRaw(styles) {
+  const s = getPatternStyles(floatConfig, styles || {})
+  return floatConfig.transform(s, patternFns)
+}
+
+export const float = /* @__PURE__ */ Object.assign(/* @__PURE__ */ memo(function float(styles = {}) {
+  return css(floatRaw(styles))
+}), { raw: floatRaw, propKeys: ["offset","offsetX","offsetY","placement"] })

package/dist/styled-system/patterns/grid-item.d.ts

@@ -0,0 +1,24 @@
+import type { ConditionalValue, SystemStyleObject } from '../types/system.js';
+
+export interface GridItemProperties {
+  colEnd?: ConditionalValue<number>
+  colSpan?: ConditionalValue<number>
+  colStart?: ConditionalValue<number>
+  rowEnd?: ConditionalValue<number>
+  rowSpan?: ConditionalValue<number>
+  rowStart?: ConditionalValue<number>
+}
+
+type GridItemRestStyles = Omit<SystemStyleObject, keyof GridItemProperties>
+
+interface GridItemStyles extends GridItemProperties, GridItemRestStyles {}
+
+interface GridItemPatternFn {
+  (styles?: GridItemStyles): string
+  raw: (styles?: GridItemStyles) => SystemStyleObject
+  propKeys: Array<keyof GridItemProperties>
+}
+
+export declare function gridItemRaw(styles?: GridItemStyles): SystemStyleObject;
+
+export declare const gridItem: GridItemPatternFn;

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

@@ -0,0 +1,26 @@
+import { getPatternStyles, patternFns } from './runtime.js';
+import { memo } 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 function gridItemRaw(styles) {
+  const s = getPatternStyles(gridItemConfig, styles || {})
+  return gridItemConfig.transform(s, patternFns)
+}
+
+export const gridItem = /* @__PURE__ */ Object.assign(/* @__PURE__ */ memo(function gridItem(styles = {}) {
+  return css(gridItemRaw(styles))
+}), { raw: gridItemRaw, propKeys: ["colEnd","colSpan","colStart","rowEnd","rowSpan","rowStart"] })

package/dist/styled-system/patterns/grid.d.ts

@@ -0,0 +1,24 @@
+import type { TokenValue } from '../types/tokens.js';
+import type { ConditionalValue, SystemProperties, SystemStyleObject } from '../types/system.js';
+
+export interface GridProperties {
+  columnGap?: SystemProperties["gap"]
+  columns?: ConditionalValue<number>
+  gap?: SystemProperties["gap"]
+  minChildWidth?: ConditionalValue<TokenValue<"sizes"> | SystemProperties["width"]>
+  rowGap?: SystemProperties["gap"]
+}
+
+type GridRestStyles = Omit<SystemStyleObject, keyof GridProperties>
+
+interface GridStyles extends GridProperties, GridRestStyles {}
+
+interface GridPatternFn {
+  (styles?: GridStyles): string
+  raw: (styles?: GridStyles) => SystemStyleObject
+  propKeys: Array<keyof GridProperties>
+}
+
+export declare function gridRaw(styles?: GridStyles): SystemStyleObject;
+
+export declare const grid: GridPatternFn;

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

@@ -0,0 +1,30 @@
+import { getPatternStyles, patternFns } from './runtime.js';
+import { memo } 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 function gridRaw(styles) {
+  const s = getPatternStyles(gridConfig, styles || {})
+  return gridConfig.transform(s, patternFns)
+}
+
+export const grid = /* @__PURE__ */ Object.assign(/* @__PURE__ */ memo(function grid(styles = {}) {
+  return css(gridRaw(styles))
+}), { raw: gridRaw, propKeys: ["columnGap","columns","gap","minChildWidth","rowGap"] })

package/dist/styled-system/patterns/hstack.d.ts

@@ -0,0 +1,20 @@
+import type { SystemProperties, SystemStyleObject } from '../types/system.js';
+
+export interface HstackProperties {
+  gap?: SystemProperties["gap"]
+  justify?: SystemProperties["justifyContent"]
+}
+
+type HstackRestStyles = Omit<SystemStyleObject, keyof HstackProperties>
+
+interface HstackStyles extends HstackProperties, HstackRestStyles {}
+
+interface HstackPatternFn {
+  (styles?: HstackStyles): string
+  raw: (styles?: HstackStyles) => SystemStyleObject
+  propKeys: Array<keyof HstackProperties>
+}
+
+export declare function hstackRaw(styles?: HstackStyles): SystemStyleObject;
+
+export declare const hstack: HstackPatternFn;

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

@@ -0,0 +1,27 @@
+import { getPatternStyles, patternFns } from './runtime.js';
+import { memo } 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 function hstackRaw(styles) {
+  const s = getPatternStyles(hstackConfig, styles || {})
+  return hstackConfig.transform(s, patternFns)
+}
+
+export const hstack = /* @__PURE__ */ Object.assign(/* @__PURE__ */ memo(function hstack(styles = {}) {
+  return css(hstackRaw(styles))
+}), { raw: hstackRaw, propKeys: ["gap","justify"] })

package/dist/styled-system/patterns/index.d.ts

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