@mekari/pixel3-styled-system 0.0.0

package/jsx/visually-hidden.mjs

@@ -0,0 +1,16 @@
+import { defineComponent, h, computed } from 'vue'
+import { styled } from './factory.mjs';
+import { getVisuallyHiddenStyle } from '../patterns/visually-hidden.mjs';
+
+export const VisuallyHidden = defineComponent({
+    name: 'VisuallyHidden',
+    inheritAttrs: false,
+    props: [],
+    setup(props, { attrs, slots }) {
+        const styleProps = computed(() => getVisuallyHiddenStyle(props))
+        return () => {
+            const computedProps = { ...styleProps.value, ...attrs }
+            return h(styled.div, computedProps, slots)
+        }
+    }
+})

package/jsx/vstack.d.ts

@@ -0,0 +1,10 @@
+/* eslint-disable */
+import type { FunctionalComponent } from 'vue'
+import type { VstackProperties } from '../patterns/vstack';
+import type { HTMLStyledProps } from '../types/jsx';
+import type { DistributiveOmit } from '../types/system-types';
+
+export interface VstackProps extends VstackProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof VstackProperties > {}
+
+
+export declare const VStack: FunctionalComponent<VstackProps>

package/jsx/vstack.mjs

@@ -0,0 +1,16 @@
+import { defineComponent, h, computed } from 'vue'
+import { styled } from './factory.mjs';
+import { getVstackStyle } from '../patterns/vstack.mjs';
+
+export const VStack = defineComponent({
+    name: 'VStack',
+    inheritAttrs: false,
+    props: ["justify", "gap"],
+    setup(props, { attrs, slots }) {
+        const styleProps = computed(() => getVstackStyle(props))
+        return () => {
+            const computedProps = { ...styleProps.value, ...attrs }
+            return h(styled.div, computedProps, slots)
+        }
+    }
+})

package/jsx/wrap.d.ts

@@ -0,0 +1,10 @@
+/* eslint-disable */
+import type { FunctionalComponent } from 'vue'
+import type { WrapProperties } from '../patterns/wrap';
+import type { HTMLStyledProps } from '../types/jsx';
+import type { DistributiveOmit } from '../types/system-types';
+
+export interface WrapProps extends WrapProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof WrapProperties > {}
+
+
+export declare const Wrap: FunctionalComponent<WrapProps>

package/jsx/wrap.mjs

@@ -0,0 +1,16 @@
+import { defineComponent, h, computed } from 'vue'
+import { styled } from './factory.mjs';
+import { getWrapStyle } from '../patterns/wrap.mjs';
+
+export const Wrap = defineComponent({
+    name: 'Wrap',
+    inheritAttrs: false,
+    props: ["gap", "rowGap", "columnGap", "align", "justify"],
+    setup(props, { attrs, slots }) {
+        const styleProps = computed(() => getWrapStyle(props))
+        return () => {
+            const computedProps = { ...styleProps.value, ...attrs }
+            return h(styled.div, computedProps, slots)
+        }
+    }
+})

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@mekari/pixel3-styled-system",
+  "description": "This package is auto-generated by Panda CSS",
+  "version": "0.0.0",
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    "./css": {
+      "types": "./css/index.d.ts",
+      "require": "./css/index.mjs",
+      "import": "./css/index.mjs"
+    },
+    "./jsx": {
+      "types": "./jsx/index.d.ts",
+      "require": "./jsx/index.mjs",
+      "import": "./jsx/index.mjs"
+    },
+    "./patterns": {
+      "types": "./patterns/index.d.ts",
+      "require": "./patterns/index.mjs",
+      "import": "./patterns/index.mjs"
+    },
+    "./recipes": {
+      "types": "./recipes/index.d.ts",
+      "require": "./recipes/index.mjs",
+      "import": "./recipes/index.mjs"
+    },
+    "./tokens": {
+      "types": "./tokens/index.d.ts",
+      "require": "./tokens/index.mjs",
+      "import": "./tokens/index.mjs"
+    },
+    "./types": {
+      "types": "./types/index.d.ts"
+    },
+    "./styles.css": "./styles.css"
+  }
+}

package/patterns/aspect-ratio.d.ts

@@ -0,0 +1,21 @@
+/* eslint-disable */
+import type { SystemStyleObject, ConditionalValue } from '../types/index';
+import type { Properties } from '../types/csstype';
+import type { PropertyValue } from '../types/prop-type';
+import type { DistributiveOmit } from '../types/system-types';
+import type { Tokens } from '../tokens/index';
+
+export interface AspectRatioProperties {
+   ratio?: ConditionalValue<number>
+}
+
+
+interface AspectRatioStyles extends AspectRatioProperties, DistributiveOmit<SystemStyleObject, keyof AspectRatioProperties | 'aspectRatio'> {}
+
+interface AspectRatioPatternFn {
+  (styles?: AspectRatioStyles): string
+  raw: (styles?: AspectRatioStyles) => SystemStyleObject
+}
+
+
+export declare const aspectRatio: AspectRatioPatternFn;

package/patterns/aspect-ratio.mjs

@@ -0,0 +1,35 @@
+import { mapObject } from '../helpers.mjs';
+import { css } from '../css/index.mjs';
+
+const aspectRatioConfig = {
+transform(props, { map }) {
+  const { ratio = 4 / 3, ...rest } = props;
+  return {
+    position: "relative",
+    _before: {
+      content: `""`,
+      display: "block",
+      height: "0",
+      paddingBottom: map(ratio, (r) => `${1 / r * 100}%`)
+    },
+    "&>*": {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      overflow: "hidden",
+      position: "absolute",
+      inset: "0",
+      width: "100%",
+      height: "100%"
+    },
+    "&>img, &>video": {
+      objectFit: "cover"
+    },
+    ...rest
+  };
+}}
+
+export const getAspectRatioStyle = (styles = {}) => aspectRatioConfig.transform(styles, { map: mapObject })
+
+export const aspectRatio = (styles) => css(getAspectRatioStyle(styles))
+aspectRatio.raw = getAspectRatioStyle

package/patterns/bleed.d.ts

@@ -0,0 +1,22 @@
+/* eslint-disable */
+import type { SystemStyleObject, ConditionalValue } from '../types/index';
+import type { Properties } from '../types/csstype';
+import type { PropertyValue } from '../types/prop-type';
+import type { DistributiveOmit } from '../types/system-types';
+import type { Tokens } from '../tokens/index';
+
+export interface BleedProperties {
+   inline?: PropertyValue<'marginInline'>
+	block?: PropertyValue<'marginBlock'>
+}
+
+
+interface BleedStyles extends BleedProperties, DistributiveOmit<SystemStyleObject, keyof BleedProperties > {}
+
+interface BleedPatternFn {
+  (styles?: BleedStyles): string
+  raw: (styles?: BleedStyles) => SystemStyleObject
+}
+
+
+export declare const bleed: BleedPatternFn;

package/patterns/bleed.mjs

@@ -0,0 +1,19 @@
+import { mapObject } from '../helpers.mjs';
+import { css } from '../css/index.mjs';
+
+const bleedConfig = {
+transform(props) {
+  const { inline = "0", block = "0", ...rest } = props;
+  return {
+    "--bleed-x": `spacing.${inline}`,
+    "--bleed-y": `spacing.${block}`,
+    marginInline: "calc(var(--bleed-x, 0) * -1)",
+    marginBlock: "calc(var(--bleed-y, 0) * -1)",
+    ...rest
+  };
+}}
+
+export const getBleedStyle = (styles = {}) => bleedConfig.transform(styles, { map: mapObject })
+
+export const bleed = (styles) => css(getBleedStyle(styles))
+bleed.raw = getBleedStyle

package/patterns/box.d.ts

@@ -0,0 +1,21 @@
+/* eslint-disable */
+import type { SystemStyleObject, ConditionalValue } from '../types/index';
+import type { Properties } from '../types/csstype';
+import type { PropertyValue } from '../types/prop-type';
+import type { DistributiveOmit } from '../types/system-types';
+import type { Tokens } from '../tokens/index';
+
+export interface BoxProperties {
+   
+}
+
+
+interface BoxStyles extends BoxProperties, DistributiveOmit<SystemStyleObject, keyof BoxProperties > {}
+
+interface BoxPatternFn {
+  (styles?: BoxStyles): string
+  raw: (styles?: BoxStyles) => SystemStyleObject
+}
+
+
+export declare const box: BoxPatternFn;

package/patterns/box.mjs

@@ -0,0 +1,12 @@
+import { mapObject } from '../helpers.mjs';
+import { css } from '../css/index.mjs';
+
+const boxConfig = {
+transform(props) {
+  return props;
+}}
+
+export const getBoxStyle = (styles = {}) => boxConfig.transform(styles, { map: mapObject })
+
+export const box = (styles) => css(getBoxStyle(styles))
+box.raw = getBoxStyle

package/patterns/center.d.ts

@@ -0,0 +1,21 @@
+/* eslint-disable */
+import type { SystemStyleObject, ConditionalValue } from '../types/index';
+import type { Properties } from '../types/csstype';
+import type { PropertyValue } from '../types/prop-type';
+import type { DistributiveOmit } from '../types/system-types';
+import type { Tokens } from '../tokens/index';
+
+export interface CenterProperties {
+   inline?: ConditionalValue<boolean>
+}
+
+
+interface CenterStyles extends CenterProperties, DistributiveOmit<SystemStyleObject, keyof CenterProperties > {}
+
+interface CenterPatternFn {
+  (styles?: CenterStyles): string
+  raw: (styles?: CenterStyles) => SystemStyleObject
+}
+
+
+export declare const center: CenterPatternFn;

package/patterns/center.mjs

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

package/patterns/circle.d.ts

@@ -0,0 +1,21 @@
+/* eslint-disable */
+import type { SystemStyleObject, ConditionalValue } from '../types/index';
+import type { Properties } from '../types/csstype';
+import type { PropertyValue } from '../types/prop-type';
+import type { DistributiveOmit } from '../types/system-types';
+import type { Tokens } from '../tokens/index';
+
+export interface CircleProperties {
+   size?: PropertyValue<'width'>
+}
+
+
+interface CircleStyles extends CircleProperties, DistributiveOmit<SystemStyleObject, keyof CircleProperties > {}
+
+interface CirclePatternFn {
+  (styles?: CircleStyles): string
+  raw: (styles?: CircleStyles) => SystemStyleObject
+}
+
+
+export declare const circle: CirclePatternFn;

package/patterns/circle.mjs

@@ -0,0 +1,22 @@
+import { mapObject } from '../helpers.mjs';
+import { css } from '../css/index.mjs';
+
+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 = {}) => circleConfig.transform(styles, { map: mapObject })
+
+export const circle = (styles) => css(getCircleStyle(styles))
+circle.raw = getCircleStyle

package/patterns/container.d.ts

@@ -0,0 +1,21 @@
+/* eslint-disable */
+import type { SystemStyleObject, ConditionalValue } from '../types/index';
+import type { Properties } from '../types/csstype';
+import type { PropertyValue } from '../types/prop-type';
+import type { DistributiveOmit } from '../types/system-types';
+import type { Tokens } from '../tokens/index';
+
+export interface ContainerProperties {
+   
+}
+
+
+interface ContainerStyles extends ContainerProperties, DistributiveOmit<SystemStyleObject, keyof ContainerProperties > {}
+
+interface ContainerPatternFn {
+  (styles?: ContainerStyles): string
+  raw: (styles?: ContainerStyles) => SystemStyleObject
+}
+
+
+export declare const container: ContainerPatternFn;

package/patterns/container.mjs

@@ -0,0 +1,18 @@
+import { mapObject } from '../helpers.mjs';
+import { css } from '../css/index.mjs';
+
+const containerConfig = {
+transform(props) {
+  return {
+    position: "relative",
+    maxWidth: "8xl",
+    mx: "auto",
+    px: { base: "4", md: "6", lg: "8" },
+    ...props
+  };
+}}
+
+export const getContainerStyle = (styles = {}) => containerConfig.transform(styles, { map: mapObject })
+
+export const container = (styles) => css(getContainerStyle(styles))
+container.raw = getContainerStyle

package/patterns/divider.d.ts

@@ -0,0 +1,23 @@
+/* eslint-disable */
+import type { SystemStyleObject, ConditionalValue } from '../types/index';
+import type { Properties } from '../types/csstype';
+import type { PropertyValue } from '../types/prop-type';
+import type { DistributiveOmit } from '../types/system-types';
+import type { Tokens } from '../tokens/index';
+
+export interface DividerProperties {
+   orientation?: ConditionalValue<"horizontal" | "vertical">
+	thickness?: ConditionalValue<Tokens["sizes"] | Properties["borderWidth"]>
+	color?: ConditionalValue<Tokens["colors"] | Properties["borderColor"]>
+}
+
+
+interface DividerStyles extends DividerProperties, DistributiveOmit<SystemStyleObject, keyof DividerProperties > {}
+
+interface DividerPatternFn {
+  (styles?: DividerStyles): string
+  raw: (styles?: DividerStyles) => SystemStyleObject
+}
+
+
+export declare const divider: DividerPatternFn;

package/patterns/divider.mjs

@@ -0,0 +1,21 @@
+import { mapObject } from '../helpers.mjs';
+import { css } from '../css/index.mjs';
+
+const dividerConfig = {
+transform(props, { map }) {
+  const { orientation = "horizontal", thickness = "1px", 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
+  };
+}}
+
+export const getDividerStyle = (styles = {}) => dividerConfig.transform(styles, { map: mapObject })
+
+export const divider = (styles) => css(getDividerStyle(styles))
+divider.raw = getDividerStyle

package/patterns/flex.d.ts

@@ -0,0 +1,27 @@
+/* eslint-disable */
+import type { SystemStyleObject, ConditionalValue } from '../types/index';
+import type { Properties } from '../types/csstype';
+import type { PropertyValue } from '../types/prop-type';
+import type { DistributiveOmit } from '../types/system-types';
+import type { Tokens } from '../tokens/index';
+
+export interface FlexProperties {
+   align?: PropertyValue<'alignItems'>
+	justify?: PropertyValue<'justifyContent'>
+	direction?: PropertyValue<'flexDirection'>
+	wrap?: PropertyValue<'flexWrap'>
+	basis?: PropertyValue<'flexBasis'>
+	grow?: PropertyValue<'flexGrow'>
+	shrink?: PropertyValue<'flexShrink'>
+}
+
+
+interface FlexStyles extends FlexProperties, DistributiveOmit<SystemStyleObject, keyof FlexProperties > {}
+
+interface FlexPatternFn {
+  (styles?: FlexStyles): string
+  raw: (styles?: FlexStyles) => SystemStyleObject
+}
+
+
+export declare const flex: FlexPatternFn;

package/patterns/flex.mjs

@@ -0,0 +1,23 @@
+import { mapObject } from '../helpers.mjs';
+import { css } from '../css/index.mjs';
+
+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 = {}) => flexConfig.transform(styles, { map: mapObject })
+
+export const flex = (styles) => css(getFlexStyle(styles))
+flex.raw = getFlexStyle

package/patterns/float.d.ts

@@ -0,0 +1,24 @@
+/* eslint-disable */
+import type { SystemStyleObject, ConditionalValue } from '../types/index';
+import type { Properties } from '../types/csstype';
+import type { PropertyValue } from '../types/prop-type';
+import type { DistributiveOmit } from '../types/system-types';
+import type { Tokens } from '../tokens/index';
+
+export interface FloatProperties {
+   offsetX?: ConditionalValue<Tokens["spacing"] | Properties["left"]>
+	offsetY?: ConditionalValue<Tokens["spacing"] | Properties["top"]>
+	offset?: ConditionalValue<Tokens["spacing"] | Properties["top"]>
+	placement?: ConditionalValue<"bottom-end" | "bottom-start" | "top-end" | "top-start" | "bottom-center" | "top-center" | "middle-center" | "middle-end" | "middle-start">
+}
+
+
+interface FloatStyles extends FloatProperties, DistributiveOmit<SystemStyleObject, keyof FloatProperties > {}
+
+interface FloatPatternFn {
+  (styles?: FloatStyles): string
+  raw: (styles?: FloatStyles) => SystemStyleObject
+}
+
+
+export declare const float: FloatPatternFn;

package/patterns/float.mjs

@@ -0,0 +1,45 @@
+import { mapObject } from '../helpers.mjs';
+import { css } from '../css/index.mjs';
+
+const floatConfig = {
+transform(props, { map }) {
+  const { offset = "0", offsetX = offset, offsetY = offset, placement = "top-end", ...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
+  };
+}}
+
+export const getFloatStyle = (styles = {}) => floatConfig.transform(styles, { map: mapObject })
+
+export const float = (styles) => css(getFloatStyle(styles))
+float.raw = getFloatStyle

package/patterns/grid-item.d.ts

@@ -0,0 +1,26 @@
+/* eslint-disable */
+import type { SystemStyleObject, ConditionalValue } from '../types/index';
+import type { Properties } from '../types/csstype';
+import type { PropertyValue } from '../types/prop-type';
+import type { DistributiveOmit } from '../types/system-types';
+import type { Tokens } from '../tokens/index';
+
+export interface GridItemProperties {
+   colSpan?: ConditionalValue<number>
+	rowSpan?: ConditionalValue<number>
+	colStart?: ConditionalValue<number>
+	rowStart?: ConditionalValue<number>
+	colEnd?: ConditionalValue<number>
+	rowEnd?: ConditionalValue<number>
+}
+
+
+interface GridItemStyles extends GridItemProperties, DistributiveOmit<SystemStyleObject, keyof GridItemProperties > {}
+
+interface GridItemPatternFn {
+  (styles?: GridItemStyles): string
+  raw: (styles?: GridItemStyles) => SystemStyleObject
+}
+
+
+export declare const gridItem: GridItemPatternFn;

package/patterns/grid-item.mjs

@@ -0,0 +1,22 @@
+import { mapObject } from '../helpers.mjs';
+import { css } from '../css/index.mjs';
+
+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 = {}) => gridItemConfig.transform(styles, { map: mapObject })
+
+export const gridItem = (styles) => css(getGridItemStyle(styles))
+gridItem.raw = getGridItemStyle

package/patterns/grid.d.ts

@@ -0,0 +1,25 @@
+/* eslint-disable */
+import type { SystemStyleObject, ConditionalValue } from '../types/index';
+import type { Properties } from '../types/csstype';
+import type { PropertyValue } from '../types/prop-type';
+import type { DistributiveOmit } from '../types/system-types';
+import type { Tokens } from '../tokens/index';
+
+export interface GridProperties {
+   gap?: PropertyValue<'gap'>
+	columnGap?: PropertyValue<'gap'>
+	rowGap?: PropertyValue<'gap'>
+	columns?: ConditionalValue<number>
+	minChildWidth?: ConditionalValue<Tokens["sizes"] | Properties["width"]>
+}
+
+
+interface GridStyles extends GridProperties, DistributiveOmit<SystemStyleObject, keyof GridProperties > {}
+
+interface GridPatternFn {
+  (styles?: GridStyles): string
+  raw: (styles?: GridStyles) => SystemStyleObject
+}
+
+
+export declare const grid: GridPatternFn;

package/patterns/grid.mjs

@@ -0,0 +1,22 @@
+import { mapObject } from '../helpers.mjs';
+import { css } from '../css/index.mjs';
+
+const gridConfig = {
+transform(props, { map }) {
+  const regex = /\d+(cm|in|pt|em|px|rem|vh|vmax|vmin|vw|ch|lh|%)$/;
+  const { columnGap, rowGap, gap = columnGap || rowGap ? void 0 : "10px", columns, minChildWidth, ...rest } = props;
+  const getValue = (v) => regex.test(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
+  };
+}}
+
+export const getGridStyle = (styles = {}) => gridConfig.transform(styles, { map: mapObject })
+
+export const grid = (styles) => css(getGridStyle(styles))
+grid.raw = getGridStyle