@tuuject/koi-react 0.0.0-stage → 0.1.0

package/styled-system/jsx/hstack.js

@@ -0,0 +1,11 @@
+import { createElement, forwardRef } from 'react';
+import { hstack } from '../patterns/hstack';
+import { splitProps } from '../helpers';
+import { styled } from './factory';
+
+export const HStack = /* @__PURE__ */ forwardRef(function HStack(props, ref) {
+  const [patternProps, restProps] = splitProps(props, hstack.propKeys)
+  const styleProps = hstack.raw(patternProps)
+  const mergedProps = { ref, ...restProps, css: styleProps }
+  return createElement(styled["div"], mergedProps)
+})

package/styled-system/jsx/index.d.ts

@@ -0,0 +1,25 @@
+export * from './factory';
+export * from './is-valid-prop';
+export * from './create-recipe-context';
+export * from './create-slot-recipe-context';
+export * from './aspect-ratio';
+export * from './bleed';
+export * from './box';
+export * from './center';
+export * from './circle';
+export * from './container';
+export * from './cq';
+export * from './divider';
+export * from './flex';
+export * from './float';
+export * from './grid';
+export * from './grid-item';
+export * from './hstack';
+export * from './link-overlay';
+export * from './spacer';
+export * from './square';
+export * from './stack';
+export * from './visually-hidden';
+export * from './vstack';
+export * from './wrap';
+export { HTMLStyledProps, StyledComponent, Styled, StyledVariantProps, JsxFactoryOptions, ComponentProps, DataAttrs, AsProps } from '../types/jsx';

package/styled-system/jsx/index.js

@@ -0,0 +1,24 @@
+export * from './factory';
+export * from './is-valid-prop';
+export * from './create-recipe-context';
+export * from './create-slot-recipe-context';
+export * from './aspect-ratio';
+export * from './bleed';
+export * from './box';
+export * from './center';
+export * from './circle';
+export * from './container';
+export * from './cq';
+export * from './divider';
+export * from './flex';
+export * from './float';
+export * from './grid';
+export * from './grid-item';
+export * from './hstack';
+export * from './link-overlay';
+export * from './spacer';
+export * from './square';
+export * from './stack';
+export * from './visually-hidden';
+export * from './vstack';
+export * from './wrap';

package/styled-system/jsx/is-valid-prop.d.ts

@@ -0,0 +1,7 @@
+import type { DistributiveOmit, JsxStyleProps } from '../types/system';
+
+type CssPropKey = keyof JsxStyleProps;
+type OmittedCssProps<T> = DistributiveOmit<T, CssPropKey>;
+export declare function isCssProperty(value: string): boolean;
+export declare function splitCssProps<T>(props: T): [JsxStyleProps, OmittedCssProps<T>];
+export {};

package/styled-system/jsx/is-valid-prop.js

@@ -0,0 +1,12 @@
+import { splitProps } from '../helpers';
+
+const cssPropertySet = new Set(["css"])
+const cssPropertySelectorRe = /&|@/
+
+export function isCssProperty(value) {
+  return cssPropertySet.has(value) || value.startsWith("--") || cssPropertySelectorRe.test(value)
+}
+
+export function splitCssProps(props) {
+  return splitProps(props, isCssProperty)
+}

package/styled-system/jsx/link-overlay.d.ts

@@ -0,0 +1,7 @@
+import type { FunctionComponent } from 'react';
+import type { LinkOverlayProperties } from '../patterns/link-overlay';
+import type { HTMLStyledProps } from '../types/jsx';
+import type { DistributiveOmit } from '../types/system';
+
+export interface LinkOverlayProps extends LinkOverlayProperties, DistributiveOmit<HTMLStyledProps<'a'>, keyof LinkOverlayProperties> {}
+export declare const LinkOverlay: FunctionComponent<LinkOverlayProps>;

package/styled-system/jsx/link-overlay.js

@@ -0,0 +1,11 @@
+import { createElement, forwardRef } from 'react';
+import { linkOverlay } from '../patterns/link-overlay';
+import { splitProps } from '../helpers';
+import { styled } from './factory';
+
+export const LinkOverlay = /* @__PURE__ */ forwardRef(function LinkOverlay(props, ref) {
+  const [patternProps, restProps] = splitProps(props, linkOverlay.propKeys)
+  const styleProps = linkOverlay.raw(patternProps)
+  const mergedProps = { ref, ...restProps, css: styleProps }
+  return createElement(styled["a"], mergedProps)
+})

package/styled-system/jsx/spacer.d.ts

@@ -0,0 +1,7 @@
+import type { FunctionComponent } from 'react';
+import type { SpacerProperties } from '../patterns/spacer';
+import type { HTMLStyledProps } from '../types/jsx';
+import type { DistributiveOmit } from '../types/system';
+
+export interface SpacerProps extends SpacerProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof SpacerProperties> {}
+export declare const Spacer: FunctionComponent<SpacerProps>;

package/styled-system/jsx/spacer.js

@@ -0,0 +1,11 @@
+import { createElement, forwardRef } from 'react';
+import { spacer } from '../patterns/spacer';
+import { splitProps } from '../helpers';
+import { styled } from './factory';
+
+export const Spacer = /* @__PURE__ */ forwardRef(function Spacer(props, ref) {
+  const [patternProps, restProps] = splitProps(props, spacer.propKeys)
+  const styleProps = spacer.raw(patternProps)
+  const mergedProps = { ref, ...restProps, css: styleProps }
+  return createElement(styled["div"], mergedProps)
+})

package/styled-system/jsx/square.d.ts

@@ -0,0 +1,7 @@
+import type { FunctionComponent } from 'react';
+import type { SquareProperties } from '../patterns/square';
+import type { HTMLStyledProps } from '../types/jsx';
+import type { DistributiveOmit } from '../types/system';
+
+export interface SquareProps extends SquareProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof SquareProperties> {}
+export declare const Square: FunctionComponent<SquareProps>;

package/styled-system/jsx/square.js

@@ -0,0 +1,11 @@
+import { createElement, forwardRef } from 'react';
+import { square } from '../patterns/square';
+import { splitProps } from '../helpers';
+import { styled } from './factory';
+
+export const Square = /* @__PURE__ */ forwardRef(function Square(props, ref) {
+  const [patternProps, restProps] = splitProps(props, square.propKeys)
+  const styleProps = square.raw(patternProps)
+  const mergedProps = { ref, ...restProps, css: styleProps }
+  return createElement(styled["div"], mergedProps)
+})

package/styled-system/jsx/stack.d.ts

@@ -0,0 +1,7 @@
+import type { FunctionComponent } from 'react';
+import type { StackProperties } from '../patterns/stack';
+import type { HTMLStyledProps } from '../types/jsx';
+import type { DistributiveOmit } from '../types/system';
+
+export interface StackProps extends StackProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof StackProperties> {}
+export declare const Stack: FunctionComponent<StackProps>;

package/styled-system/jsx/stack.js

@@ -0,0 +1,11 @@
+import { createElement, forwardRef } from 'react';
+import { stack } from '../patterns/stack';
+import { splitProps } from '../helpers';
+import { styled } from './factory';
+
+export const Stack = /* @__PURE__ */ forwardRef(function Stack(props, ref) {
+  const [patternProps, restProps] = splitProps(props, stack.propKeys)
+  const styleProps = stack.raw(patternProps)
+  const mergedProps = { ref, ...restProps, css: styleProps }
+  return createElement(styled["div"], mergedProps)
+})

package/styled-system/jsx/visually-hidden.d.ts

@@ -0,0 +1,7 @@
+import type { FunctionComponent } from 'react';
+import type { VisuallyHiddenProperties } from '../patterns/visually-hidden';
+import type { HTMLStyledProps } from '../types/jsx';
+import type { DistributiveOmit } from '../types/system';
+
+export interface VisuallyHiddenProps extends VisuallyHiddenProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof VisuallyHiddenProperties> {}
+export declare const VisuallyHidden: FunctionComponent<VisuallyHiddenProps>;

package/styled-system/jsx/visually-hidden.js

@@ -0,0 +1,11 @@
+import { createElement, forwardRef } from 'react';
+import { visuallyHidden } from '../patterns/visually-hidden';
+import { splitProps } from '../helpers';
+import { styled } from './factory';
+
+export const VisuallyHidden = /* @__PURE__ */ forwardRef(function VisuallyHidden(props, ref) {
+  const [patternProps, restProps] = splitProps(props, visuallyHidden.propKeys)
+  const styleProps = visuallyHidden.raw(patternProps)
+  const mergedProps = { ref, ...restProps, css: styleProps }
+  return createElement(styled["div"], mergedProps)
+})

package/styled-system/jsx/vstack.d.ts

@@ -0,0 +1,7 @@
+import type { FunctionComponent } from 'react';
+import type { VstackProperties } from '../patterns/vstack';
+import type { HTMLStyledProps } from '../types/jsx';
+import type { DistributiveOmit } from '../types/system';
+
+export interface VstackProps extends VstackProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof VstackProperties> {}
+export declare const VStack: FunctionComponent<VstackProps>;

package/styled-system/jsx/vstack.js

@@ -0,0 +1,11 @@
+import { createElement, forwardRef } from 'react';
+import { vstack } from '../patterns/vstack';
+import { splitProps } from '../helpers';
+import { styled } from './factory';
+
+export const VStack = /* @__PURE__ */ forwardRef(function VStack(props, ref) {
+  const [patternProps, restProps] = splitProps(props, vstack.propKeys)
+  const styleProps = vstack.raw(patternProps)
+  const mergedProps = { ref, ...restProps, css: styleProps }
+  return createElement(styled["div"], mergedProps)
+})

package/styled-system/jsx/wrap.d.ts

@@ -0,0 +1,7 @@
+import type { FunctionComponent } from 'react';
+import type { WrapProperties } from '../patterns/wrap';
+import type { HTMLStyledProps } from '../types/jsx';
+import type { DistributiveOmit } from '../types/system';
+
+export interface WrapProps extends WrapProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof WrapProperties> {}
+export declare const Wrap: FunctionComponent<WrapProps>;

package/styled-system/jsx/wrap.js

@@ -0,0 +1,11 @@
+import { createElement, forwardRef } from 'react';
+import { wrap } from '../patterns/wrap';
+import { splitProps } from '../helpers';
+import { styled } from './factory';
+
+export const Wrap = /* @__PURE__ */ forwardRef(function Wrap(props, ref) {
+  const [patternProps, restProps] = splitProps(props, wrap.propKeys)
+  const styleProps = wrap.raw(patternProps)
+  const mergedProps = { ref, ...restProps, css: styleProps }
+  return createElement(styled["div"], mergedProps)
+})

package/styled-system/patterns/aspect-ratio.d.ts

@@ -0,0 +1,19 @@
+import type { ConditionalValue, SystemStyleObject } from '../types/system';
+
+export interface AspectRatioProperties {
+  ratio?: ConditionalValue<number>
+}
+
+type AspectRatioRestStyles = Omit<SystemStyleObject, keyof AspectRatioProperties | "aspectRatio">
+
+interface AspectRatioStyles extends AspectRatioProperties, AspectRatioRestStyles {}
+
+interface AspectRatioPatternFn {
+  (styles?: AspectRatioStyles): string
+  raw: (styles?: AspectRatioStyles) => SystemStyleObject
+  propKeys: Array<keyof AspectRatioProperties>
+}
+
+export declare function aspectRatioRaw(styles?: AspectRatioStyles): SystemStyleObject;
+
+export declare const aspectRatio: AspectRatioPatternFn;

package/styled-system/patterns/aspect-ratio.js

@@ -0,0 +1,37 @@
+import { getPatternStyles, patternFns } from './runtime';
+import { memo } from '../helpers';
+import { css } from '../css/index';
+
+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 function aspectRatioRaw(styles) {
+  const s = getPatternStyles(aspectRatioConfig, styles || {})
+  return aspectRatioConfig.transform(s, patternFns)
+}
+
+export const aspectRatio = /* @__PURE__ */ Object.assign(/* @__PURE__ */ memo(function aspectRatio(styles = {}) {
+  return css(aspectRatioRaw(styles))
+}), { raw: aspectRatioRaw, propKeys: ["ratio"] })

package/styled-system/patterns/bleed.d.ts

@@ -0,0 +1,20 @@
+import type { SystemProperties, SystemStyleObject } from '../types/system';
+
+export interface BleedProperties {
+  block?: SystemProperties["marginBlock"]
+  inline?: SystemProperties["marginInline"]
+}
+
+type BleedRestStyles = Omit<SystemStyleObject, keyof BleedProperties>
+
+interface BleedStyles extends BleedProperties, BleedRestStyles {}
+
+interface BleedPatternFn {
+  (styles?: BleedStyles): string
+  raw: (styles?: BleedStyles) => SystemStyleObject
+  propKeys: Array<keyof BleedProperties>
+}
+
+export declare function bleedRaw(styles?: BleedStyles): SystemStyleObject;
+
+export declare const bleed: BleedPatternFn;

package/styled-system/patterns/bleed.js

@@ -0,0 +1,30 @@
+import { getPatternStyles, patternFns } from './runtime';
+import { memo } from '../helpers';
+import { css } from '../css/index';
+
+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/styled-system/patterns/box.d.ts

@@ -0,0 +1,17 @@
+import type { SystemStyleObject } from '../types/system';
+
+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/styled-system/patterns/box.js

@@ -0,0 +1,16 @@
+import { getPatternStyles, patternFns } from './runtime';
+import { memo } from '../helpers';
+import { css } from '../css/index';
+
+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/styled-system/patterns/center.d.ts

@@ -0,0 +1,19 @@
+import type { ConditionalValue, SystemStyleObject } from '../types/system';
+
+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/styled-system/patterns/center.js

@@ -0,0 +1,22 @@
+import { getPatternStyles, patternFns } from './runtime';
+import { memo } from '../helpers';
+import { css } from '../css/index';
+
+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/styled-system/patterns/circle.d.ts

@@ -0,0 +1,19 @@
+import type { SystemProperties, SystemStyleObject } from '../types/system';
+
+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/styled-system/patterns/circle.js

@@ -0,0 +1,26 @@
+import { getPatternStyles, patternFns } from './runtime';
+import { memo } from '../helpers';
+import { css } from '../css/index';
+
+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/styled-system/patterns/container.d.ts

@@ -0,0 +1,17 @@
+import type { SystemStyleObject } from '../types/system';
+
+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/styled-system/patterns/container.js

@@ -0,0 +1,26 @@
+import { getPatternStyles, patternFns } from './runtime';
+import { memo } from '../helpers';
+import { css } from '../css/index';
+
+const containerConfig = { transform(props) {
+  return {
+    position: "relative",
+    maxWidth: "8xl",
+    mx: "auto",
+    px: {
+      base: "4",
+      md: "6",
+      lg: "8"
+    },
+    ...props
+  };
+} }
+
+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/styled-system/patterns/cq.d.ts

@@ -0,0 +1,21 @@
+import type { TokenValue } from '../types/tokens';
+import type { ConditionalValue, SystemProperties, SystemStyleObject } from '../types/system';
+
+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/styled-system/patterns/cq.js

@@ -0,0 +1,24 @@
+import { getPatternStyles, patternFns } from './runtime';
+import { memo } from '../helpers';
+import { css } from '../css/index';
+
+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/styled-system/patterns/divider.d.ts

@@ -0,0 +1,22 @@
+import type { TokenValue } from '../types/tokens';
+import type { ConditionalValue, SystemProperties, SystemStyleObject } from '../types/system';
+
+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/styled-system/patterns/divider.js

@@ -0,0 +1,31 @@
+import { getPatternStyles, patternFns } from './runtime';
+import { memo } from '../helpers';
+import { css } from '../css/index';
+
+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/styled-system/patterns/flex.d.ts

@@ -0,0 +1,25 @@
+import type { SystemProperties, SystemStyleObject } from '../types/system';
+
+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;