@mekari/pixel3-styled-system 0.0.0

package/patterns/hstack.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 HstackProperties {
+   justify?: PropertyValue<'justifyContent'>
+	gap?: PropertyValue<'gap'>
+}
+
+
+interface HstackStyles extends HstackProperties, DistributiveOmit<SystemStyleObject, keyof HstackProperties > {}
+
+interface HstackPatternFn {
+  (styles?: HstackStyles): string
+  raw: (styles?: HstackStyles) => SystemStyleObject
+}
+
+
+export declare const hstack: HstackPatternFn;

package/patterns/hstack.mjs

@@ -0,0 +1,20 @@
+import { mapObject } from '../helpers.mjs';
+import { css } from '../css/index.mjs';
+
+const hstackConfig = {
+transform(props) {
+  const { justify, gap = "10px", ...rest } = props;
+  return {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: justify,
+    gap,
+    flexDirection: "row",
+    ...rest
+  };
+}}
+
+export const getHstackStyle = (styles = {}) => hstackConfig.transform(styles, { map: mapObject })
+
+export const hstack = (styles) => css(getHstackStyle(styles))
+hstack.raw = getHstackStyle

package/patterns/index.d.ts

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

package/patterns/index.mjs

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

package/patterns/link-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 LinkBoxProperties {
+   
+}
+
+
+interface LinkBoxStyles extends LinkBoxProperties, DistributiveOmit<SystemStyleObject, keyof LinkBoxProperties > {}
+
+interface LinkBoxPatternFn {
+  (styles?: LinkBoxStyles): string
+  raw: (styles?: LinkBoxStyles) => SystemStyleObject
+}
+
+
+export declare const linkBox: LinkBoxPatternFn;

package/patterns/link-box.mjs

@@ -0,0 +1,19 @@
+import { mapObject } from '../helpers.mjs';
+import { css } from '../css/index.mjs';
+
+const linkBoxConfig = {
+transform(props) {
+  return {
+    position: "relative",
+    "& :where(a, abbr)": {
+      position: "relative",
+      zIndex: "1"
+    },
+    ...props
+  };
+}}
+
+export const getLinkBoxStyle = (styles = {}) => linkBoxConfig.transform(styles, { map: mapObject })
+
+export const linkBox = (styles) => css(getLinkBoxStyle(styles))
+linkBox.raw = getLinkBoxStyle

package/patterns/link-overlay.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 LinkOverlayProperties {
+   
+}
+
+
+interface LinkOverlayStyles extends LinkOverlayProperties, DistributiveOmit<SystemStyleObject, keyof LinkOverlayProperties > {}
+
+interface LinkOverlayPatternFn {
+  (styles?: LinkOverlayStyles): string
+  raw: (styles?: LinkOverlayStyles) => SystemStyleObject
+}
+
+
+export declare const linkOverlay: LinkOverlayPatternFn;

package/patterns/link-overlay.mjs

@@ -0,0 +1,24 @@
+import { mapObject } from '../helpers.mjs';
+import { css } from '../css/index.mjs';
+
+const linkOverlayConfig = {
+transform(props) {
+  return {
+    position: "static",
+    _before: {
+      content: '""',
+      display: "block",
+      position: "absolute",
+      cursor: "inherit",
+      inset: "0",
+      zIndex: "0",
+      ...props["_before"]
+    },
+    ...props
+  };
+}}
+
+export const getLinkOverlayStyle = (styles = {}) => linkOverlayConfig.transform(styles, { map: mapObject })
+
+export const linkOverlay = (styles) => css(getLinkOverlayStyle(styles))
+linkOverlay.raw = getLinkOverlayStyle

package/patterns/spacer.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 SpacerProperties {
+   size?: ConditionalValue<Tokens["spacing"]>
+}
+
+
+interface SpacerStyles extends SpacerProperties, DistributiveOmit<SystemStyleObject, keyof SpacerProperties > {}
+
+interface SpacerPatternFn {
+  (styles?: SpacerStyles): string
+  raw: (styles?: SpacerStyles) => SystemStyleObject
+}
+
+
+export declare const spacer: SpacerPatternFn;

package/patterns/spacer.mjs

@@ -0,0 +1,18 @@
+import { mapObject } from '../helpers.mjs';
+import { css } from '../css/index.mjs';
+
+const spacerConfig = {
+transform(props, { map }) {
+  const { size, ...rest } = props;
+  return {
+    alignSelf: "stretch",
+    justifySelf: "stretch",
+    flex: map(size, (v) => v == null ? "1" : `0 0 ${v}`),
+    ...rest
+  };
+}}
+
+export const getSpacerStyle = (styles = {}) => spacerConfig.transform(styles, { map: mapObject })
+
+export const spacer = (styles) => css(getSpacerStyle(styles))
+spacer.raw = getSpacerStyle

package/patterns/square.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 SquareProperties {
+   size?: PropertyValue<'width'>
+}
+
+
+interface SquareStyles extends SquareProperties, DistributiveOmit<SystemStyleObject, keyof SquareProperties > {}
+
+interface SquarePatternFn {
+  (styles?: SquareStyles): string
+  raw: (styles?: SquareStyles) => SystemStyleObject
+}
+
+
+export declare const square: SquarePatternFn;

package/patterns/square.mjs

@@ -0,0 +1,21 @@
+import { mapObject } from '../helpers.mjs';
+import { css } from '../css/index.mjs';
+
+const squareConfig = {
+transform(props) {
+  const { size, ...rest } = props;
+  return {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flex: "0 0 auto",
+    width: size,
+    height: size,
+    ...rest
+  };
+}}
+
+export const getSquareStyle = (styles = {}) => squareConfig.transform(styles, { map: mapObject })
+
+export const square = (styles) => css(getSquareStyle(styles))
+square.raw = getSquareStyle

package/patterns/stack.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 StackProperties {
+   align?: PropertyValue<'alignItems'>
+	justify?: PropertyValue<'justifyContent'>
+	direction?: PropertyValue<'flexDirection'>
+	gap?: PropertyValue<'gap'>
+}
+
+
+interface StackStyles extends StackProperties, DistributiveOmit<SystemStyleObject, keyof StackProperties > {}
+
+interface StackPatternFn {
+  (styles?: StackStyles): string
+  raw: (styles?: StackStyles) => SystemStyleObject
+}
+
+
+export declare const stack: StackPatternFn;

package/patterns/stack.mjs

@@ -0,0 +1,20 @@
+import { mapObject } from '../helpers.mjs';
+import { css } from '../css/index.mjs';
+
+const stackConfig = {
+transform(props) {
+  const { align, justify, direction = "column", gap = "10px", ...rest } = props;
+  return {
+    display: "flex",
+    flexDirection: direction,
+    alignItems: align,
+    justifyContent: justify,
+    gap,
+    ...rest
+  };
+}}
+
+export const getStackStyle = (styles = {}) => stackConfig.transform(styles, { map: mapObject })
+
+export const stack = (styles) => css(getStackStyle(styles))
+stack.raw = getStackStyle

package/patterns/visually-hidden.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 VisuallyHiddenProperties {
+   
+}
+
+
+interface VisuallyHiddenStyles extends VisuallyHiddenProperties, DistributiveOmit<SystemStyleObject, keyof VisuallyHiddenProperties > {}
+
+interface VisuallyHiddenPatternFn {
+  (styles?: VisuallyHiddenStyles): string
+  raw: (styles?: VisuallyHiddenStyles) => SystemStyleObject
+}
+
+
+export declare const visuallyHidden: VisuallyHiddenPatternFn;

package/patterns/visually-hidden.mjs

@@ -0,0 +1,15 @@
+import { mapObject } from '../helpers.mjs';
+import { css } from '../css/index.mjs';
+
+const visuallyHiddenConfig = {
+transform(props) {
+  return {
+    srOnly: true,
+    ...props
+  };
+}}
+
+export const getVisuallyHiddenStyle = (styles = {}) => visuallyHiddenConfig.transform(styles, { map: mapObject })
+
+export const visuallyHidden = (styles) => css(getVisuallyHiddenStyle(styles))
+visuallyHidden.raw = getVisuallyHiddenStyle

package/patterns/vstack.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 VstackProperties {
+   justify?: PropertyValue<'justifyContent'>
+	gap?: PropertyValue<'gap'>
+}
+
+
+interface VstackStyles extends VstackProperties, DistributiveOmit<SystemStyleObject, keyof VstackProperties > {}
+
+interface VstackPatternFn {
+  (styles?: VstackStyles): string
+  raw: (styles?: VstackStyles) => SystemStyleObject
+}
+
+
+export declare const vstack: VstackPatternFn;

package/patterns/vstack.mjs

@@ -0,0 +1,20 @@
+import { mapObject } from '../helpers.mjs';
+import { css } from '../css/index.mjs';
+
+const vstackConfig = {
+transform(props) {
+  const { justify, gap = "10px", ...rest } = props;
+  return {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: justify,
+    gap,
+    flexDirection: "column",
+    ...rest
+  };
+}}
+
+export const getVstackStyle = (styles = {}) => vstackConfig.transform(styles, { map: mapObject })
+
+export const vstack = (styles) => css(getVstackStyle(styles))
+vstack.raw = getVstackStyle

package/patterns/wrap.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 WrapProperties {
+   gap?: PropertyValue<'gap'>
+	rowGap?: PropertyValue<'gap'>
+	columnGap?: PropertyValue<'gap'>
+	align?: PropertyValue<'alignItems'>
+	justify?: PropertyValue<'justifyContent'>
+}
+
+
+interface WrapStyles extends WrapProperties, DistributiveOmit<SystemStyleObject, keyof WrapProperties > {}
+
+interface WrapPatternFn {
+  (styles?: WrapStyles): string
+  raw: (styles?: WrapStyles) => SystemStyleObject
+}
+
+
+export declare const wrap: WrapPatternFn;

package/patterns/wrap.mjs

@@ -0,0 +1,22 @@
+import { mapObject } from '../helpers.mjs';
+import { css } from '../css/index.mjs';
+
+const wrapConfig = {
+transform(props) {
+  const { columnGap, rowGap, gap = columnGap || rowGap ? void 0 : "10px", align, justify, ...rest } = props;
+  return {
+    display: "flex",
+    flexWrap: "wrap",
+    alignItems: align,
+    justifyContent: justify,
+    gap,
+    columnGap,
+    rowGap,
+    ...rest
+  };
+}}
+
+export const getWrapStyle = (styles = {}) => wrapConfig.transform(styles, { map: mapObject })
+
+export const wrap = (styles) => css(getWrapStyle(styles))
+wrap.raw = getWrapStyle

package/recipes/accordion.d.ts

@@ -0,0 +1,27 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface AccordionVariant {
+  size: "md"
+}
+
+type AccordionVariantMap = {
+  [key in keyof AccordionVariant]: Array<AccordionVariant[key]>
+}
+
+export type AccordionVariantProps = {
+  [key in keyof AccordionVariant]?: ConditionalValue<AccordionVariant[key]> | undefined
+}
+
+export interface AccordionRecipe {
+  __type: AccordionVariantProps
+  (props?: AccordionVariantProps): Pretty<Record<"root" | "item" | "trigger" | "content", string>>
+  raw: (props?: AccordionVariantProps) => AccordionVariantProps
+  variantMap: AccordionVariantMap
+  variantKeys: Array<keyof AccordionVariant>
+  splitVariantProps<Props extends AccordionVariantProps>(props: Props): [AccordionVariantProps, Pretty<DistributiveOmit<Props, keyof AccordionVariantProps>>]
+}
+
+
+export declare const accordion: AccordionRecipe

package/recipes/accordion.mjs

@@ -0,0 +1,50 @@
+import { splitProps, getSlotCompoundVariant } from '../helpers.mjs';
+import { createRecipe } from './create-recipe.mjs';
+
+const accordionDefaultVariants = {
+  "size": "md"
+}
+const accordionCompoundVariants = []
+
+const accordionSlotNames = [
+  [
+    "root",
+    "accordion__root"
+  ],
+  [
+    "item",
+    "accordion__item"
+  ],
+  [
+    "trigger",
+    "accordion__trigger"
+  ],
+  [
+    "content",
+    "accordion__content"
+  ]
+]
+const accordionSlotFns = /* @__PURE__ */ accordionSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, accordionDefaultVariants, getSlotCompoundVariant(accordionCompoundVariants, slotName))])
+
+const accordionFn = (props = {}) => {
+  return Object.fromEntries(accordionSlotFns.map(([slotName, slotFn]) => [slotName, slotFn(props)]))
+}
+
+const accordionVariantKeys = [
+  "size"
+]
+
+export const accordion = /* @__PURE__ */ Object.assign(accordionFn, {
+  __recipe__: false,
+  __name__: 'accordion',
+  raw: (props) => props,
+  variantKeys: accordionVariantKeys,
+  variantMap: {
+  "size": [
+    "md"
+  ]
+},
+  splitVariantProps(props) {
+    return splitProps(props, accordionVariantKeys)
+  },
+})

package/recipes/avatar-group-recipe.d.ts

@@ -0,0 +1,27 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface AvatarGroupRecipeVariant {
+  size: "sm" | "md" | "lg" | "xl"
+}
+
+type AvatarGroupRecipeVariantMap = {
+  [key in keyof AvatarGroupRecipeVariant]: Array<AvatarGroupRecipeVariant[key]>
+}
+
+export type AvatarGroupRecipeVariantProps = {
+  [key in keyof AvatarGroupRecipeVariant]?: ConditionalValue<AvatarGroupRecipeVariant[key]>
+}
+
+export interface AvatarGroupRecipeRecipe {
+  __type: AvatarGroupRecipeVariantProps
+  (props?: AvatarGroupRecipeVariantProps): Pretty<Record<"root" | "excess", string>>
+  raw: (props?: AvatarGroupRecipeVariantProps) => AvatarGroupRecipeVariantProps
+  variantMap: AvatarGroupRecipeVariantMap
+  variantKeys: Array<keyof AvatarGroupRecipeVariant>
+  splitVariantProps<Props extends AvatarGroupRecipeVariantProps>(props: Props): [AvatarGroupRecipeVariantProps, Pretty<DistributiveOmit<Props, keyof AvatarGroupRecipeVariantProps>>]
+}
+
+
+export declare const avatarGroupRecipe: AvatarGroupRecipeRecipe

package/recipes/avatar-group-recipe.mjs

@@ -0,0 +1,43 @@
+import { splitProps, getSlotCompoundVariant } from '../helpers.mjs';
+import { createRecipe } from './create-recipe.mjs';
+
+const avatarGroupRecipeDefaultVariants = {}
+const avatarGroupRecipeCompoundVariants = []
+
+const avatarGroupRecipeSlotNames = [
+  [
+    "root",
+    "avatar-group__root"
+  ],
+  [
+    "excess",
+    "avatar-group__excess"
+  ]
+]
+const avatarGroupRecipeSlotFns = /* @__PURE__ */ avatarGroupRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, avatarGroupRecipeDefaultVariants, getSlotCompoundVariant(avatarGroupRecipeCompoundVariants, slotName))])
+
+const avatarGroupRecipeFn = (props = {}) => {
+  return Object.fromEntries(avatarGroupRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn(props)]))
+}
+
+const avatarGroupRecipeVariantKeys = [
+  "size"
+]
+
+export const avatarGroupRecipe = /* @__PURE__ */ Object.assign(avatarGroupRecipeFn, {
+  __recipe__: false,
+  __name__: 'avatarGroupRecipe',
+  raw: (props) => props,
+  variantKeys: avatarGroupRecipeVariantKeys,
+  variantMap: {
+  "size": [
+    "sm",
+    "md",
+    "lg",
+    "xl"
+  ]
+},
+  splitVariantProps(props) {
+    return splitProps(props, avatarGroupRecipeVariantKeys)
+  },
+})

package/recipes/avatar-group-slot-recipe.d.ts

@@ -0,0 +1,27 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface AvatarGroupSlotRecipeVariant {
+  size: "sm" | "md" | "lg" | "xl"
+}
+
+type AvatarGroupSlotRecipeVariantMap = {
+  [key in keyof AvatarGroupSlotRecipeVariant]: Array<AvatarGroupSlotRecipeVariant[key]>
+}
+
+export type AvatarGroupSlotRecipeVariantProps = {
+  [key in keyof AvatarGroupSlotRecipeVariant]?: ConditionalValue<AvatarGroupSlotRecipeVariant[key]> | undefined
+}
+
+export interface AvatarGroupSlotRecipeRecipe {
+  __type: AvatarGroupSlotRecipeVariantProps
+  (props?: AvatarGroupSlotRecipeVariantProps): Pretty<Record<"root" | "excess", string>>
+  raw: (props?: AvatarGroupSlotRecipeVariantProps) => AvatarGroupSlotRecipeVariantProps
+  variantMap: AvatarGroupSlotRecipeVariantMap
+  variantKeys: Array<keyof AvatarGroupSlotRecipeVariant>
+  splitVariantProps<Props extends AvatarGroupSlotRecipeVariantProps>(props: Props): [AvatarGroupSlotRecipeVariantProps, Pretty<DistributiveOmit<Props, keyof AvatarGroupSlotRecipeVariantProps>>]
+}
+
+
+export declare const avatarGroupSlotRecipe: AvatarGroupSlotRecipeRecipe

package/recipes/avatar-group-slot-recipe.mjs

@@ -0,0 +1,43 @@
+import { splitProps, getSlotCompoundVariant } from '../helpers.mjs';
+import { createRecipe } from './create-recipe.mjs';
+
+const avatarGroupSlotRecipeDefaultVariants = {}
+const avatarGroupSlotRecipeCompoundVariants = []
+
+const avatarGroupSlotRecipeSlotNames = [
+  [
+    "root",
+    "avatar-group__root"
+  ],
+  [
+    "excess",
+    "avatar-group__excess"
+  ]
+]
+const avatarGroupSlotRecipeSlotFns = /* @__PURE__ */ avatarGroupSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, avatarGroupSlotRecipeDefaultVariants, getSlotCompoundVariant(avatarGroupSlotRecipeCompoundVariants, slotName))])
+
+const avatarGroupSlotRecipeFn = (props = {}) => {
+  return Object.fromEntries(avatarGroupSlotRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn(props)]))
+}
+
+const avatarGroupSlotRecipeVariantKeys = [
+  "size"
+]
+
+export const avatarGroupSlotRecipe = /* @__PURE__ */ Object.assign(avatarGroupSlotRecipeFn, {
+  __recipe__: false,
+  __name__: 'avatarGroupSlotRecipe',
+  raw: (props) => props,
+  variantKeys: avatarGroupSlotRecipeVariantKeys,
+  variantMap: {
+  "size": [
+    "sm",
+    "md",
+    "lg",
+    "xl"
+  ]
+},
+  splitVariantProps(props) {
+    return splitProps(props, avatarGroupSlotRecipeVariantKeys)
+  },
+})