@pandacss/studio 0.0.0-dev-20230613163214

package/styled-system/patterns/index.mjs

@@ -0,0 +1,18 @@
+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 './absolute-center.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 './styled-link.mjs'

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

@@ -0,0 +1,14 @@
+import type { SystemStyleObject, ConditionalValue } from '../types'
+import type { PropertyValue } from '../types/prop-type'
+import type { Properties } from '../types/csstype'
+import type { Tokens } from '../tokens'
+
+export type SpacerProperties = {
+   size?: ConditionalValue<Tokens["spacing"]>
+}
+
+
+type SpacerOptions = SpacerProperties & Omit<SystemStyleObject, keyof SpacerProperties >
+
+
+export declare function spacer(options?: SpacerOptions): string

package/styled-system/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))

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

@@ -0,0 +1,14 @@
+import type { SystemStyleObject, ConditionalValue } from '../types'
+import type { PropertyValue } from '../types/prop-type'
+import type { Properties } from '../types/csstype'
+import type { Tokens } from '../tokens'
+
+export type SquareProperties = {
+   size?: PropertyValue<'width'>
+}
+
+
+type SquareOptions = SquareProperties & Omit<SystemStyleObject, keyof SquareProperties >
+
+
+export declare function square(options?: SquareOptions): string

package/styled-system/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))

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

@@ -0,0 +1,17 @@
+import type { SystemStyleObject, ConditionalValue } from '../types'
+import type { PropertyValue } from '../types/prop-type'
+import type { Properties } from '../types/csstype'
+import type { Tokens } from '../tokens'
+
+export type StackProperties = {
+   align?: PropertyValue<'alignItems'>
+	justify?: PropertyValue<'justifyContent'>
+	direction?: PropertyValue<'flexDirection'>
+	gap?: PropertyValue<'gap'>
+}
+
+
+type StackOptions = StackProperties & Omit<SystemStyleObject, keyof StackProperties >
+
+
+export declare function stack(options?: StackOptions): string

package/styled-system/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))

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

@@ -0,0 +1,14 @@
+import type { SystemStyleObject, ConditionalValue } from '../types'
+import type { PropertyValue } from '../types/prop-type'
+import type { Properties } from '../types/csstype'
+import type { Tokens } from '../tokens'
+
+export type StyledLinkProperties = {
+   
+}
+
+
+type StyledLinkOptions = StyledLinkProperties & Omit<SystemStyleObject, keyof StyledLinkProperties >
+
+
+export declare function styledLink(options?: StyledLinkOptions): string

package/styled-system/patterns/styled-link.mjs

@@ -0,0 +1,18 @@
+import { mapObject } from '../helpers.mjs'
+import { css } from '../css/index.mjs'
+
+const styledLinkConfig = {
+  transform: (props) => ({
+    display: 'inline-flex',
+    alignItems: 'center',
+    opacity: '0.5',
+    borderBottom: '1px solid transparent',
+    cursor: 'pointer',
+    _hover: { opacity: 1, borderBottomColor: 'black' },
+    ...props,
+  }),
+}
+
+export const getStyledLinkStyle = (styles = {}) => styledLinkConfig.transform(styles, { map: mapObject })
+
+export const styledLink = (styles) => css(getStyledLinkStyle(styles))

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

@@ -0,0 +1,15 @@
+import type { SystemStyleObject, ConditionalValue } from '../types'
+import type { PropertyValue } from '../types/prop-type'
+import type { Properties } from '../types/csstype'
+import type { Tokens } from '../tokens'
+
+export type VstackProperties = {
+   justify?: PropertyValue<'justifyContent'>
+	gap?: PropertyValue<'gap'>
+}
+
+
+type VstackOptions = VstackProperties & Omit<SystemStyleObject, keyof VstackProperties >
+
+
+export declare function vstack(options?: VstackOptions): string

package/styled-system/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))

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

@@ -0,0 +1,18 @@
+import type { SystemStyleObject, ConditionalValue } from '../types'
+import type { PropertyValue } from '../types/prop-type'
+import type { Properties } from '../types/csstype'
+import type { Tokens } from '../tokens'
+
+export type WrapProperties = {
+   gap?: PropertyValue<'gap'>
+	rowGap?: PropertyValue<'gap'>
+	columnGap?: PropertyValue<'gap'>
+	align?: PropertyValue<'alignItems'>
+	justify?: PropertyValue<'justifyContent'>
+}
+
+
+type WrapOptions = WrapProperties & Omit<SystemStyleObject, keyof WrapProperties >
+
+
+export declare function wrap(options?: WrapOptions): string

package/styled-system/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))

package/styled-system/reset.css

@@ -0,0 +1,190 @@
+@layer reset {
+  * {
+    margin: 0;
+    padding: 0;
+    font: inherit;
+  }
+
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+    border-width: 0;
+    border-style: solid;
+    border-color: var(--global-color-border, currentColor);
+  }
+
+  html {
+    line-height: 1.5;
+    --font-fallback: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
+      Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+    -webkit-text-size-adjust: 100%;
+    -webkit-text-size-adjust: 100%;
+    -webkit-font-smoothing: antialiased;
+    -moz-tab-size: 4;
+    tab-size: 4;
+    font-family: var(--global-font-body, var(--font-fallback));
+  }
+
+  hr {
+    height: 0;
+    color: inherit;
+    border-top-width: 1px;
+  }
+
+  body {
+    height: 100%;
+    line-height: inherit;
+  }
+
+  img {
+    border-style: none;
+  }
+
+  img,
+  svg,
+  video,
+  canvas,
+  audio,
+  iframe,
+  embed,
+  object {
+    display: block;
+    vertical-align: middle;
+  }
+
+  img,
+  video {
+    max-width: 100%;
+    height: auto;
+  }
+
+  p,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    overflow-wrap: break-word;
+  }
+
+  ol,
+  ul {
+    list-style: none;
+  }
+
+  code,
+  kbd,
+  pre,
+  samp {
+    font-size: 1em;
+  }
+
+  button,
+  [type='button'],
+  [type='reset'],
+  [type='submit'] {
+    -webkit-appearance: button;
+    background-color: transparent;
+    background-image: none;
+  }
+
+  button,
+  select {
+    text-transform: none;
+  }
+
+  table {
+    text-indent: 0;
+    border-color: inherit;
+    border-collapse: collapse;
+  }
+
+  input::placeholder,
+  textarea::placeholder {
+    opacity: 1;
+    color: var(--global-color-placeholder, #9ca3af);
+  }
+
+  textarea {
+    resize: vertical;
+  }
+
+  summary {
+    display: list-item;
+  }
+
+  small {
+    font-size: 80%;
+  }
+
+  sub,
+  sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+
+  sub {
+    bottom: -0.25em;
+  }
+
+  sup {
+    top: -0.5em;
+  }
+
+  dialog {
+    padding: 0;
+  }
+
+  a {
+    color: inherit;
+    text-decoration: inherit;
+  }
+
+  abbr:where([title]) {
+    text-decoration: underline dotted;
+  }
+
+  b,
+  strong {
+    font-weight: bolder;
+  }
+
+  code,
+  kbd,
+  samp,
+  pre {
+    font-size: 1em;
+    --font-mono-fallback: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New';
+    font-family: var(--global-font-mono, var(--font-fallback));
+  }
+
+  [type='search'] {
+    -webkit-appearance: textfield;
+    outline-offset: -2px;
+  }
+
+  ::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+
+  ::-webkit-file-upload-button {
+    -webkit-appearance: button;
+  }
+
+  ::-webkit-inner-spin-button,
+  ::-webkit-outer-spin-button {
+    height: auto;
+  }
+
+  :-moz-ui-invalid {
+    box-shadow: none;
+  }
+
+  :-moz-focusring {
+    outline: auto;
+  }
+}

package/styled-system/static.css

@@ -0,0 +1,5 @@
+@layer utilities {
+  .text_red\.400 {
+    color: var(--colors-red-400);
+  }
+}