@sanity-labs/ui-poc 0.0.1-alpha.0

package/dist/components.css

@@ -0,0 +1,9 @@
+.sui-Box {
+  display: block;
+}
+.sui-Flex {
+  display: flex;
+}
+.sui-Grid {
+  display: grid;
+}

package/dist/index.d.ts

@@ -0,0 +1,203 @@
+import {JSX} from 'react/jsx-runtime'
+import {default as React_2} from 'react'
+
+declare type BorderProps = {
+  /** CSS **border** property */
+  border?: Responsive<boolean>
+  /** CSS **border-top** property */
+  borderTop?: Responsive<boolean>
+  /** CSS **border-right** property */
+  borderRight?: Responsive<boolean>
+  /** CSS **border-bottom** property */
+  borderBottom?: Responsive<boolean>
+  /** CSS **border-left** property */
+  borderLeft?: Responsive<boolean>
+  /** CSS **border-radius** property */
+  radius?: Responsive<Radius>
+}
+
+/** @public */
+export declare function Box<T extends React_2.ElementType = 'div'>(
+  props: BoxProps<T> & Omit<React_2.ComponentPropsWithRef<T>, keyof BoxProps<T>>,
+): JSX.Element
+
+/** @public */
+export declare interface BoxProps<T extends React_2.ElementType> extends LayoutProps {
+  /** Element to render */
+  as?: T
+  /** CSS **display** property */
+  display?: Responsive<DisplayBlock>
+}
+
+declare const DISPLAY_BLOCK: readonly ['block', 'inline-block', 'none']
+
+declare type DisplayBlock = (typeof DISPLAY_BLOCK)[number]
+
+declare type FlexChildProps = {
+  /** CSS **flex-basis** property */
+  flexBasis?: Responsive<string>
+  /** CSS **flex-grow** property */
+  flexGrow?: Responsive<number>
+  /** CSS **flex-shrink** property */
+  flexShrink?: Responsive<number>
+}
+
+declare type GridChildProps = {
+  /** CSS **grid-column** property */
+  gridColumn?: Responsive<string>
+  /** CSS **grid-column-start** property */
+  gridColumnStart?: Responsive<string>
+  /** CSS **grid-column-end** property */
+  gridColumnEnd?: Responsive<string>
+  /** CSS **grid-row** property */
+  gridRow?: Responsive<string>
+  /** CSS **grid-row-start** property */
+  gridRowStart?: Responsive<string>
+  /** CSS **grid-row-end** property */
+  gridRowEnd?: Responsive<string>
+}
+
+declare type HeightProps = {
+  /** CSS **height** property */
+  height?: Responsive<string>
+  /** CSS **min-height** property */
+  minHeight?: Responsive<string>
+  /** CSS **max-height** property */
+  maxHeight?: Responsive<string>
+}
+
+declare interface LayoutProps
+  extends
+    ToneProps,
+    WidthProps,
+    HeightProps,
+    MarginProps,
+    BorderProps,
+    PaddingProps,
+    PositionProps,
+    OverflowProps,
+    FlexChildProps,
+    GridChildProps {}
+
+declare type MarginProps = {
+  /** CSS **margin** property */
+  margin?: Responsive<SpaceAuto>
+  /** CSS **margin-left** and **margin-right** properties */
+  marginX?: Responsive<SpaceAuto>
+  /** CSS **margin-top** and **margin-bottom** properties */
+  marginY?: Responsive<SpaceAuto>
+  /** CSS **margin-top** property */
+  marginTop?: Responsive<SpaceAuto>
+  /** CSS **margin-right** property */
+  marginRight?: Responsive<SpaceAuto>
+  /** CSS **margin-bottom** property */
+  marginBottom?: Responsive<SpaceAuto>
+  /** CSS **margin-left** property */
+  marginLeft?: Responsive<SpaceAuto>
+}
+
+declare const OVERFLOW: string[]
+
+declare type Overflow = (typeof OVERFLOW)[number]
+
+declare type OverflowProps = {
+  /** CSS **overflow** property */
+  overflow?: Responsive<Overflow>
+  /** CSS **overflow-x** property */
+  overflowX?: Responsive<Overflow>
+  /** CSS **overflow-y** property */
+  overflowY?: Responsive<Overflow>
+}
+
+declare interface PaddingProps {
+  /** CSS **padding** property */
+  padding?: Responsive<Space>
+  /** CSS **padding-left** and **padding-right** properties */
+  paddingX?: Responsive<Space>
+  /** CSS **padding-top** and **padding-bottom** properties */
+  paddingY?: Responsive<Space>
+  /** CSS **padding-top** property */
+  paddingTop?: Responsive<Space>
+  /** CSS **padding-right** property */
+  paddingRight?: Responsive<Space>
+  /** CSS **padding-bottom** property */
+  paddingBottom?: Responsive<Space>
+  /** CSS **padding-left** property */
+  paddingLeft?: Responsive<Space>
+}
+
+declare const POSITION: string[]
+
+declare type Position = (typeof POSITION)[number]
+
+declare type PositionProps = {
+  /** CSS **position** property */
+  position?: Responsive<Position>
+  /** CSS **inset** property */
+  inset?: Responsive<SpaceAuto>
+  /** CSS **top** property */
+  top?: Responsive<SpaceAuto>
+  /** CSS **right** property */
+  right?: Responsive<SpaceAuto>
+  /** CSS **bottom** property */
+  bottom?: Responsive<SpaceAuto>
+  /** CSS **left** property */
+  left?: Responsive<SpaceAuto>
+}
+
+declare const RADIUS: (string | number)[]
+
+declare type Radius = (typeof RADIUS)[number]
+
+declare type Responsive<T> =
+  | T
+  | []
+  | ([T | undefined, ...(T | undefined)[]] & {
+      length: 1
+    })
+  | ([T | undefined, ...(T | undefined)[]] & {
+      length: 2
+    })
+  | ([T | undefined, ...(T | undefined)[]] & {
+      length: 3
+    })
+  | ([T | undefined, ...(T | undefined)[]] & {
+      length: 4
+    })
+  | ([T | undefined, ...(T | undefined)[]] & {
+      length: 5
+    })
+  | ([T | undefined, ...(T | undefined)[]] & {
+      length: 6
+    })
+  | ([T | undefined, ...(T | undefined)[]] & {
+      length: 7
+    })
+
+declare const SPACE: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
+
+declare type Space = (typeof SPACE)[number]
+
+declare const SPACE_AUTO: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'auto']
+
+declare type SpaceAuto = (typeof SPACE_AUTO)[number]
+
+declare const TONE: string[]
+
+declare type Tone = (typeof TONE)[number]
+
+declare type ToneProps = {
+  /** CSS **background-color** property */
+  tone?: Responsive<Tone>
+}
+
+declare type WidthProps = {
+  /** CSS **width** property */
+  width?: Responsive<string>
+  /** CSS **min-width** property */
+  minWidth?: Responsive<string>
+  /** CSS **max-width** property */
+  maxWidth?: Responsive<string>
+}
+
+export {}

package/dist/index.js

@@ -0,0 +1,290 @@
+import { jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+const RADIUS = [0, 1, 2, 3, 4, 5, 6, "full"], borderProps = {
+  border: {
+    type: "boolean",
+    className: "border",
+    inverse: "border-none"
+  },
+  borderTop: {
+    type: "boolean",
+    className: "border-top",
+    inverse: "border-top-none"
+  },
+  borderRight: {
+    type: "boolean",
+    className: "border-right",
+    inverse: "border-right-none"
+  },
+  borderBottom: {
+    type: "boolean",
+    className: "border-bottom",
+    inverse: "border-bottom-none"
+  },
+  borderLeft: {
+    type: "boolean",
+    className: "border-left",
+    inverse: "border-left-none"
+  },
+  radius: {
+    type: "union",
+    className: "radius",
+    values: RADIUS
+  }
+}, flexChildProps = {
+  flexBasis: {
+    type: "string",
+    className: "flex-basis",
+    variable: "--flex-basis"
+  },
+  flexGrow: {
+    type: "number",
+    className: "flex-grow",
+    variable: "--flex-grow"
+  },
+  flexShrink: {
+    type: "number",
+    className: "flex-shrink",
+    variable: "--flex-shrink"
+  }
+}, gridChildProps = {
+  gridColumn: {
+    type: "string",
+    className: "grid-column",
+    variable: "--grid-column"
+  },
+  gridColumnStart: {
+    type: "string",
+    className: "grid-column-start",
+    variable: "--grid-column-start"
+  },
+  gridColumnEnd: {
+    type: "string",
+    className: "grid-column-end",
+    variable: "--grid-column-end"
+  },
+  gridRow: {
+    type: "string",
+    className: "grid-row",
+    variable: "--grid-row"
+  },
+  gridRowStart: {
+    type: "string",
+    className: "grid-row-start",
+    variable: "--grid-row-start"
+  },
+  gridRowEnd: {
+    type: "string",
+    className: "grid-row-end",
+    variable: "--grid-row-end"
+  }
+}, heightProps = {
+  height: {
+    type: "string",
+    className: "height",
+    variable: "--height"
+  },
+  minHeight: {
+    type: "string",
+    className: "min-height",
+    variable: "--min-height"
+  },
+  maxHeight: {
+    type: "string",
+    className: "max-height",
+    variable: "--max-height"
+  }
+}, SPACE = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], SPACE_AUTO = [...SPACE, "auto"], marginProps = {
+  margin: {
+    type: "union",
+    className: "m",
+    values: SPACE_AUTO
+  },
+  marginX: {
+    type: "union",
+    className: "mx",
+    values: SPACE_AUTO
+  },
+  marginY: {
+    type: "union",
+    className: "my",
+    values: SPACE_AUTO
+  },
+  marginTop: {
+    type: "union",
+    className: "mt",
+    values: SPACE_AUTO
+  },
+  marginRight: {
+    type: "union",
+    className: "mr",
+    values: SPACE_AUTO
+  },
+  marginBottom: {
+    type: "union",
+    className: "mb",
+    values: SPACE_AUTO
+  },
+  marginLeft: {
+    type: "union",
+    className: "ml",
+    values: SPACE_AUTO
+  }
+}, OVERFLOW = ["visible", "hidden", "auto", "scroll", "clip"], overflowProps = {
+  overflow: {
+    type: "union",
+    className: "overflow",
+    values: OVERFLOW
+  },
+  overflowX: {
+    type: "union",
+    className: "overflow-x",
+    values: OVERFLOW
+  },
+  overflowY: {
+    type: "union",
+    className: "overflow-y",
+    values: OVERFLOW
+  }
+}, paddingProps = {
+  padding: {
+    type: "union",
+    className: "p",
+    values: SPACE
+  },
+  paddingX: {
+    type: "union",
+    className: "px",
+    values: SPACE
+  },
+  paddingY: {
+    type: "union",
+    className: "py",
+    values: SPACE
+  },
+  paddingTop: {
+    type: "union",
+    className: "pt",
+    values: SPACE
+  },
+  paddingRight: {
+    type: "union",
+    className: "pr",
+    values: SPACE
+  },
+  paddingBottom: {
+    type: "union",
+    className: "pb",
+    values: SPACE
+  },
+  paddingLeft: {
+    type: "union",
+    className: "pl",
+    values: SPACE
+  }
+}, POSITION = ["absolute", "fixed", "relative", "static", "sticky"], positionProps = {
+  position: {
+    type: "union",
+    className: "position",
+    values: POSITION
+  },
+  inset: {
+    type: "union",
+    className: "inset",
+    values: SPACE_AUTO
+  },
+  top: {
+    type: "union",
+    className: "top",
+    values: SPACE_AUTO
+  },
+  right: {
+    type: "union",
+    className: "right",
+    values: SPACE_AUTO
+  },
+  bottom: {
+    type: "union",
+    className: "bottom",
+    values: SPACE_AUTO
+  },
+  left: {
+    type: "union",
+    className: "left",
+    values: SPACE_AUTO
+  }
+}, TONE = ["default", "neutral", "primary", "suggest", "positive", "caution", "critical"], toneProps = {
+  tone: {
+    type: "union",
+    className: "tone",
+    values: TONE
+  }
+}, widthProps = {
+  width: {
+    type: "string",
+    className: "width",
+    variable: "--width"
+  },
+  minWidth: {
+    type: "string",
+    className: "min-width",
+    variable: "--min-width"
+  },
+  maxWidth: {
+    type: "string",
+    className: "max-width",
+    variable: "--max-width"
+  }
+}, layoutProps = {
+  ...toneProps,
+  ...widthProps,
+  ...heightProps,
+  ...marginProps,
+  ...borderProps,
+  ...paddingProps,
+  ...positionProps,
+  ...overflowProps,
+  ...flexChildProps,
+  ...gridChildProps
+}, DISPLAY_BLOCK = ["block", "inline-block", "none"], PREFIX = "sui", BREAKPOINTS_LENGTH = 7;
+function getProps(allProps, styleProps) {
+  let className = allProps?.className || "", style = allProps?.style || {};
+  for (const key in allProps)
+    if (!(!styleProps?.[key] || !styleProps?.[key].className))
+      if (Array.isArray(allProps[key]))
+        for (let i = 0, len = Math.min(allProps[key].length, BREAKPOINTS_LENGTH); i < len; i++)
+          className = classNames(className, getClassName(allProps[key][i], styleProps[key], i)), style = { ...style, ...getStyle(allProps[key][i], styleProps[key], i) };
+      else
+        className = classNames(className, getClassName(allProps[key], styleProps[key])), style = { ...style, ...getStyle(allProps[key], styleProps[key]) };
+  const propsWithoutStyleProps = {};
+  for (const key in allProps)
+    (!styleProps?.[key] || !styleProps[key].className) && (propsWithoutStyleProps[key] = allProps[key]);
+  return { ...propsWithoutStyleProps, className, style };
+}
+function getClassName(prop, styleProp, bp) {
+  return styleProp.type === "union" && styleProp.values?.includes(prop) ? `${PREFIX}-${styleProp.className}${typeof prop == "string" ? `-${prop}` : prop}${bp ? `-bp-${bp}` : ""}` : styleProp.type === "string" || styleProp.type === "number" ? `${PREFIX}-${styleProp.className}${bp ? `-bp-${bp}` : ""}` : styleProp.type === "boolean" ? `${PREFIX}-${prop ? styleProp.className : styleProp.inverse}${bp ? `-bp-${bp}` : ""}` : "";
+}
+function getStyle(prop, styleProp, bp) {
+  return styleProp.type === "string" || styleProp.type === "number" ? {
+    [`${styleProp.variable}${bp ? `-bp-${bp}` : ""}`]: prop
+  } : {};
+}
+const boxProps = {
+  as: {
+    type: "string"
+  },
+  display: {
+    type: "union",
+    className: "display",
+    values: DISPLAY_BLOCK
+  },
+  ...layoutProps
+};
+function Box(props) {
+  const { as, children, className, style, ...rest } = getProps(props, boxProps);
+  return /* @__PURE__ */ jsx(as || "div", { className: classNames("sui-Box", className), style, "data-ui": "Box", ...rest, children });
+}
+export {
+  Box
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/types/Radius.ts","../src/props/border.ts","../src/props/flexChild.ts","../src/props/gridChild.ts","../src/props/height.ts","../src/types/Space.ts","../src/props/margin.ts","../src/types/Overflow.ts","../src/props/overflow.ts","../src/props/padding.ts","../src/types/Position.ts","../src/props/position.ts","../src/types/Tone.ts","../src/props/tone.ts","../src/props/width.ts","../src/props/layout.ts","../src/types/Display.ts","../src/utils/getProps.ts","../src/components/box.props.ts","../src/components/Box.tsx"],"sourcesContent":["export const RADIUS = [0, 1, 2, 3, 4, 5, 6, 'full']\nexport type Radius = (typeof RADIUS)[number]\n","import {type StyleProp} from '../types/StyleProp'\nimport {RADIUS, type Radius} from '../types/Radius'\nimport {type Responsive} from '../types/Responsive'\n\nexport type BorderProps = {\n  /** CSS **border** property */\n  border?: Responsive<boolean>\n  /** CSS **border-top** property */\n  borderTop?: Responsive<boolean>\n  /** CSS **border-right** property */\n  borderRight?: Responsive<boolean>\n  /** CSS **border-bottom** property */\n  borderBottom?: Responsive<boolean>\n  /** CSS **border-left** property */\n  borderLeft?: Responsive<boolean>\n  /** CSS **border-radius** property */\n  radius?: Responsive<Radius>\n}\n\nexport const borderProps: Record<string, StyleProp> = {\n  border: {\n    type: 'boolean',\n    className: 'border',\n    inverse: 'border-none',\n  },\n  borderTop: {\n    type: 'boolean',\n    className: 'border-top',\n    inverse: 'border-top-none',\n  },\n  borderRight: {\n    type: 'boolean',\n    className: 'border-right',\n    inverse: 'border-right-none',\n  },\n  borderBottom: {\n    type: 'boolean',\n    className: 'border-bottom',\n    inverse: 'border-bottom-none',\n  },\n  borderLeft: {\n    type: 'boolean',\n    className: 'border-left',\n    inverse: 'border-left-none',\n  },\n  radius: {\n    type: 'union',\n    className: 'radius',\n    values: RADIUS,\n  },\n}\n","import {type StyleProp} from '../types/StyleProp'\nimport {type Responsive} from '../types/Responsive'\n\nexport type FlexChildProps = {\n  /** CSS **flex-basis** property */\n  flexBasis?: Responsive<string>\n  /** CSS **flex-grow** property */\n  flexGrow?: Responsive<number>\n  /** CSS **flex-shrink** property */\n  flexShrink?: Responsive<number>\n}\n\nexport const flexChildProps: Record<string, StyleProp> = {\n  flexBasis: {\n    type: 'string',\n    className: 'flex-basis',\n    variable: '--flex-basis',\n  },\n  flexGrow: {\n    type: 'number',\n    className: 'flex-grow',\n    variable: '--flex-grow',\n  },\n  flexShrink: {\n    type: 'number',\n    className: 'flex-shrink',\n    variable: '--flex-shrink',\n  },\n}\n","import {type StyleProp} from '../types/StyleProp'\nimport {type Responsive} from '../types/Responsive'\n\nexport type GridChildProps = {\n  /** CSS **grid-column** property */\n  gridColumn?: Responsive<string>\n  /** CSS **grid-column-start** property */\n  gridColumnStart?: Responsive<string>\n  /** CSS **grid-column-end** property */\n  gridColumnEnd?: Responsive<string>\n  /** CSS **grid-row** property */\n  gridRow?: Responsive<string>\n  /** CSS **grid-row-start** property */\n  gridRowStart?: Responsive<string>\n  /** CSS **grid-row-end** property */\n  gridRowEnd?: Responsive<string>\n}\n\nexport const gridChildProps: Record<string, StyleProp> = {\n  gridColumn: {\n    type: 'string',\n    className: 'grid-column',\n    variable: '--grid-column',\n  },\n  gridColumnStart: {\n    type: 'string',\n    className: 'grid-column-start',\n    variable: '--grid-column-start',\n  },\n  gridColumnEnd: {\n    type: 'string',\n    className: 'grid-column-end',\n    variable: '--grid-column-end',\n  },\n  gridRow: {\n    type: 'string',\n    className: 'grid-row',\n    variable: '--grid-row',\n  },\n  gridRowStart: {\n    type: 'string',\n    className: 'grid-row-start',\n    variable: '--grid-row-start',\n  },\n  gridRowEnd: {\n    type: 'string',\n    className: 'grid-row-end',\n    variable: '--grid-row-end',\n  },\n}\n","import {type StyleProp} from '../types/StyleProp'\nimport {type Responsive} from '../types/Responsive'\n\nexport type HeightProps = {\n  /** CSS **height** property */\n  height?: Responsive<string>\n  /** CSS **min-height** property */\n  minHeight?: Responsive<string>\n  /** CSS **max-height** property */\n  maxHeight?: Responsive<string>\n}\n\nexport const heightProps: Record<string, StyleProp> = {\n  height: {\n    type: 'string',\n    className: 'height',\n    variable: '--height',\n  },\n  minHeight: {\n    type: 'string',\n    className: 'min-height',\n    variable: '--min-height',\n  },\n  maxHeight: {\n    type: 'string',\n    className: 'max-height',\n    variable: '--max-height',\n  },\n}\n","export const SPACE = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] as const\nexport type Space = (typeof SPACE)[number]\n\nexport const SPACE_AUTO = [...SPACE, 'auto'] as const\nexport type SpaceAuto = (typeof SPACE_AUTO)[number]\n","import {type StyleProp} from '../types/StyleProp'\nimport {type Responsive} from '../types/Responsive'\nimport {SPACE_AUTO, type SpaceAuto} from '../types/Space'\n\nexport type MarginProps = {\n  /** CSS **margin** property */\n  margin?: Responsive<SpaceAuto>\n  /** CSS **margin-left** and **margin-right** properties */\n  marginX?: Responsive<SpaceAuto>\n  /** CSS **margin-top** and **margin-bottom** properties */\n  marginY?: Responsive<SpaceAuto>\n  /** CSS **margin-top** property */\n  marginTop?: Responsive<SpaceAuto>\n  /** CSS **margin-right** property */\n  marginRight?: Responsive<SpaceAuto>\n  /** CSS **margin-bottom** property */\n  marginBottom?: Responsive<SpaceAuto>\n  /** CSS **margin-left** property */\n  marginLeft?: Responsive<SpaceAuto>\n}\n\nexport const marginProps: Record<string, StyleProp> = {\n  margin: {\n    type: 'union',\n    className: 'm',\n    values: SPACE_AUTO,\n  },\n  marginX: {\n    type: 'union',\n    className: 'mx',\n    values: SPACE_AUTO,\n  },\n  marginY: {\n    type: 'union',\n    className: 'my',\n    values: SPACE_AUTO,\n  },\n  marginTop: {\n    type: 'union',\n    className: 'mt',\n    values: SPACE_AUTO,\n  },\n  marginRight: {\n    type: 'union',\n    className: 'mr',\n    values: SPACE_AUTO,\n  },\n  marginBottom: {\n    type: 'union',\n    className: 'mb',\n    values: SPACE_AUTO,\n  },\n  marginLeft: {\n    type: 'union',\n    className: 'ml',\n    values: SPACE_AUTO,\n  },\n}\n","export const OVERFLOW = ['visible', 'hidden', 'auto', 'scroll', 'clip']\nexport type Overflow = (typeof OVERFLOW)[number]\n","import {OVERFLOW, type Overflow} from '../types/Overflow'\nimport {type StyleProp} from '../types/StyleProp'\nimport {type Responsive} from '../types/Responsive'\n\nexport type OverflowProps = {\n  /** CSS **overflow** property */\n  overflow?: Responsive<Overflow>\n  /** CSS **overflow-x** property */\n  overflowX?: Responsive<Overflow>\n  /** CSS **overflow-y** property */\n  overflowY?: Responsive<Overflow>\n}\n\nexport const overflowProps: Record<string, StyleProp> = {\n  overflow: {\n    type: 'union',\n    className: 'overflow',\n    values: OVERFLOW,\n  },\n  overflowX: {\n    type: 'union',\n    className: 'overflow-x',\n    values: OVERFLOW,\n  },\n  overflowY: {\n    type: 'union',\n    className: 'overflow-y',\n    values: OVERFLOW,\n  },\n}\n","import {type StyleProp} from '../types/StyleProp'\nimport {type Responsive} from '../types/Responsive'\nimport {SPACE, type Space} from '../types/Space'\n\nexport interface PaddingProps {\n  /** CSS **padding** property */\n  padding?: Responsive<Space>\n  /** CSS **padding-left** and **padding-right** properties */\n  paddingX?: Responsive<Space>\n  /** CSS **padding-top** and **padding-bottom** properties */\n  paddingY?: Responsive<Space>\n  /** CSS **padding-top** property */\n  paddingTop?: Responsive<Space>\n  /** CSS **padding-right** property */\n  paddingRight?: Responsive<Space>\n  /** CSS **padding-bottom** property */\n  paddingBottom?: Responsive<Space>\n  /** CSS **padding-left** property */\n  paddingLeft?: Responsive<Space>\n}\n\nexport const paddingProps: Record<string, StyleProp> = {\n  padding: {\n    type: 'union',\n    className: 'p',\n    values: SPACE,\n  },\n  paddingX: {\n    type: 'union',\n    className: 'px',\n    values: SPACE,\n  },\n  paddingY: {\n    type: 'union',\n    className: 'py',\n    values: SPACE,\n  },\n  paddingTop: {\n    type: 'union',\n    className: 'pt',\n    values: SPACE,\n  },\n  paddingRight: {\n    type: 'union',\n    className: 'pr',\n    values: SPACE,\n  },\n  paddingBottom: {\n    type: 'union',\n    className: 'pb',\n    values: SPACE,\n  },\n  paddingLeft: {\n    type: 'union',\n    className: 'pl',\n    values: SPACE,\n  },\n}\n","export const POSITION = ['absolute', 'fixed', 'relative', 'static', 'sticky']\nexport type Position = (typeof POSITION)[number]\n","import {POSITION, type Position} from '../types/Position'\nimport {type StyleProp} from '../types/StyleProp'\nimport {type Responsive} from '../types/Responsive'\nimport {SPACE_AUTO, type SpaceAuto} from '../types/Space'\n\nexport type PositionProps = {\n  /** CSS **position** property */\n  position?: Responsive<Position>\n  /** CSS **inset** property */\n  inset?: Responsive<SpaceAuto>\n  /** CSS **top** property */\n  top?: Responsive<SpaceAuto>\n  /** CSS **right** property */\n  right?: Responsive<SpaceAuto>\n  /** CSS **bottom** property */\n  bottom?: Responsive<SpaceAuto>\n  /** CSS **left** property */\n  left?: Responsive<SpaceAuto>\n}\n\nexport const positionProps: Record<string, StyleProp> = {\n  position: {\n    type: 'union',\n    className: 'position',\n    values: POSITION,\n  },\n  inset: {\n    type: 'union',\n    className: 'inset',\n    values: SPACE_AUTO,\n  },\n  top: {\n    type: 'union',\n    className: 'top',\n    values: SPACE_AUTO,\n  },\n  right: {\n    type: 'union',\n    className: 'right',\n    values: SPACE_AUTO,\n  },\n  bottom: {\n    type: 'union',\n    className: 'bottom',\n    values: SPACE_AUTO,\n  },\n  left: {\n    type: 'union',\n    className: 'left',\n    values: SPACE_AUTO,\n  },\n}\n","export const TONE = ['default', 'neutral', 'primary', 'suggest', 'positive', 'caution', 'critical']\nexport type Tone = (typeof TONE)[number]\n","import {type StyleProp} from '../types/StyleProp'\nimport {type Responsive} from '../types/Responsive'\nimport {TONE, type Tone} from '../types/Tone'\n\nexport type ToneProps = {\n  /** CSS **background-color** property */\n  tone?: Responsive<Tone>\n}\n\nexport const toneProps: Record<string, StyleProp> = {\n  tone: {\n    type: 'union',\n    className: 'tone',\n    values: TONE,\n  },\n}\n","import {type StyleProp} from '../types/StyleProp'\nimport {type Responsive} from '../types/Responsive'\n\nexport type WidthProps = {\n  /** CSS **width** property */\n  width?: Responsive<string>\n  /** CSS **min-width** property */\n  minWidth?: Responsive<string>\n  /** CSS **max-width** property */\n  maxWidth?: Responsive<string>\n}\n\nexport const widthProps: Record<string, StyleProp> = {\n  width: {\n    type: 'string',\n    className: 'width',\n    variable: '--width',\n  },\n  minWidth: {\n    type: 'string',\n    className: 'min-width',\n    variable: '--min-width',\n  },\n  maxWidth: {\n    type: 'string',\n    className: 'max-width',\n    variable: '--max-width',\n  },\n}\n","import {type StyleProp} from '../types/StyleProp'\nimport {type BorderProps, borderProps} from './border'\nimport {type FlexChildProps, flexChildProps} from './flexChild'\nimport {type GridChildProps, gridChildProps} from './gridChild'\nimport {type HeightProps, heightProps} from './height'\nimport {type MarginProps, marginProps} from './margin'\nimport {type OverflowProps, overflowProps} from './overflow'\nimport {type PaddingProps, paddingProps} from './padding'\nimport {type PositionProps, positionProps} from './position'\nimport {type ToneProps, toneProps} from './tone'\nimport {type WidthProps, widthProps} from './width'\n\nexport interface LayoutProps\n  extends\n    ToneProps,\n    WidthProps,\n    HeightProps,\n    MarginProps,\n    BorderProps,\n    PaddingProps,\n    PositionProps,\n    OverflowProps,\n    FlexChildProps,\n    GridChildProps {}\n\nexport const layoutProps: Record<string, StyleProp> = {\n  ...toneProps,\n  ...widthProps,\n  ...heightProps,\n  ...marginProps,\n  ...borderProps,\n  ...paddingProps,\n  ...positionProps,\n  ...overflowProps,\n  ...flexChildProps,\n  ...gridChildProps,\n}\n","export const DISPLAY_BLOCK = ['block', 'inline-block', 'none'] as const\nexport type DisplayBlock = (typeof DISPLAY_BLOCK)[number]\n\nexport const DISPLAY_FLEX = ['flex', 'inline-flex', 'none'] as const\nexport type DisplayFlex = (typeof DISPLAY_FLEX)[number]\n\nexport const DISPLAY_GRID = ['grid', 'inline-grid', 'none'] as const\nexport type DisplayGrid = (typeof DISPLAY_GRID)[number]\n","import classNames from 'classnames'\n\nimport {type StyleProp} from '../types/StyleProp'\n\nconst PREFIX = 'sui'\nconst BREAKPOINTS_LENGTH = 7\n\ninterface AllProps {\n  className?: string\n  style?: React.CSSProperties\n  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */\n  [key: string]: any\n}\n\nexport function getProps<P extends AllProps, T extends Record<string, StyleProp>>(\n  allProps?: P,\n  styleProps?: T,\n): AllProps {\n  let className = allProps?.className || ''\n  let style = allProps?.style || {}\n\n  // Iterate through the keys of all props on the component\n  for (const key in allProps) {\n    // Bypass props that aren't style props\n    if (!styleProps?.[key] || !styleProps?.[key].className) {\n      continue\n    }\n\n    // Process style props\n    if (Array.isArray(allProps[key])) {\n      // Responsive array: generate a class name and style per breakpoint\n      for (let i = 0, len = Math.min(allProps[key].length, BREAKPOINTS_LENGTH); i < len; i++) {\n        className = classNames(className, getClassName(allProps[key][i], styleProps[key], i))\n        style = {...style, ...getStyle(allProps[key][i], styleProps[key], i)}\n      }\n    } else {\n      // Single value: generate one class name and style\n      className = classNames(className, getClassName(allProps[key], styleProps[key]))\n      style = {...style, ...getStyle(allProps[key], styleProps[key])}\n    }\n  }\n\n  // Return only the props not consumed by style props\n  const propsWithoutStyleProps: AllProps = {}\n  for (const key in allProps) {\n    if (!styleProps?.[key] || !styleProps[key].className) {\n      propsWithoutStyleProps[key] = allProps[key]\n    }\n  }\n\n  return {...propsWithoutStyleProps, className, style}\n}\n\n/* eslint-disable-next-line @typescript-eslint/no-explicit-any */\nfunction getClassName(prop: any, styleProp: StyleProp, bp?: number) {\n  if (styleProp.type === 'union' && styleProp.values?.includes(prop)) {\n    /* Note: This may need updating depending on the final CSS classname formatting */\n    return `${PREFIX}-${styleProp.className}${typeof prop === 'string' ? `-${prop}` : prop}${bp ? `-bp-${bp}` : ''}`\n  }\n\n  if (styleProp.type === 'string' || styleProp.type === 'number') {\n    return `${PREFIX}-${styleProp.className}${bp ? `-bp-${bp}` : ''}`\n  }\n\n  if (styleProp.type === 'boolean') {\n    return `${PREFIX}-${prop ? styleProp.className : styleProp.inverse}${bp ? `-bp-${bp}` : ''}`\n  }\n\n  return ''\n}\n\n/* eslint-disable-next-line @typescript-eslint/no-explicit-any */\nfunction getStyle(prop: any, styleProp: StyleProp, bp?: number) {\n  if (styleProp.type === 'string' || styleProp.type === 'number') {\n    return {\n      [`${styleProp.variable}${bp ? `-bp-${bp}` : ''}`]: prop,\n    }\n  }\n\n  return {}\n}\n","import {layoutProps} from '../props/layout'\nimport {DISPLAY_BLOCK} from '../types/Display'\nimport {type StyleProp} from '../types/StyleProp'\n\nexport const boxProps: Record<string, StyleProp> = {\n  as: {\n    type: 'string',\n  },\n  display: {\n    type: 'union',\n    className: 'display',\n    values: DISPLAY_BLOCK,\n  },\n  ...layoutProps,\n}\n","import classNames from 'classnames'\nimport React from 'react'\n\nimport {type LayoutProps} from '../props/layout'\nimport {type DisplayBlock} from '../types/Display'\nimport {type Responsive} from '../types/Responsive'\nimport {getProps} from '../utils/getProps'\nimport {boxProps} from './box.props'\n\n/** @public */\nexport interface BoxProps<T extends React.ElementType> extends LayoutProps {\n  /** Element to render */\n  as?: T\n  /** CSS **display** property */\n  display?: Responsive<DisplayBlock>\n}\n\n/** @public */\nexport function Box<T extends React.ElementType = 'div'>(\n  props: BoxProps<T> & Omit<React.ComponentPropsWithRef<T>, keyof BoxProps<T>>,\n) {\n  const {as, children, className, style, ...rest} = getProps(props, boxProps)\n  const Component = as || 'div'\n\n  return (\n    <Component className={classNames('sui-Box', className)} style={style} data-ui=\"Box\" {...rest}>\n      {children}\n    </Component>\n  )\n}\n"],"names":[],"mappings":"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"}