@pandacss/studio 0.0.0-dev-20230810095033 → 0.0.0-dev-20230810190237

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/studio",
-  "version": "0.0.0-dev-20230810095033",
+  "version": "0.0.0-dev-20230810190237",
   "description": "The automated token documentation for Panda CSS",
   "main": "dist/studio.js",
   "module": "dist/studio.mjs",
@@ -33,19 +33,19 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "vite": "4.4.8",
-    "@pandacss/types": "0.0.0-dev-20230810095033",
-    "@pandacss/config": "0.0.0-dev-20230810095033",
-    "@pandacss/shared": "0.0.0-dev-20230810095033",
-    "@pandacss/token-dictionary": "0.0.0-dev-20230810095033",
-    "@pandacss/logger": "0.0.0-dev-20230810095033",
-    "@pandacss/node": "0.0.0-dev-20230810095033"
+    "@pandacss/types": "0.0.0-dev-20230810190237",
+    "@pandacss/config": "0.0.0-dev-20230810190237",
+    "@pandacss/shared": "0.0.0-dev-20230810190237",
+    "@pandacss/token-dictionary": "0.0.0-dev-20230810190237",
+    "@pandacss/logger": "0.0.0-dev-20230810190237",
+    "@pandacss/node": "0.0.0-dev-20230810190237"
   },
   "devDependencies": {
     "@types/react": "18.2.18",
     "@types/react-dom": "18.2.7",
     "@vitejs/plugin-react": "4.0.4",
     "execa": "7.2.0",
-    "@pandacss/dev": "0.0.0-dev-20230810095033"
+    "@pandacss/dev": "0.0.0-dev-20230810190237"
   },
   "scripts": {
     "codegen": "panda",

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

@@ -0,0 +1,9 @@
+/* eslint-disable */
+import type { FunctionComponent } from 'react'
+import type { BleedProperties } from '../patterns/bleed'
+import type { HTMLPandaProps } from '../types/jsx'
+
+export type BleedProps = BleedProperties & Omit<HTMLPandaProps<'div'>, keyof BleedProperties >
+
+
+export declare const Bleed: FunctionComponent<BleedProps>

package/styled-system/jsx/bleed.mjs

@@ -0,0 +1,9 @@
+import { createElement, forwardRef } from 'react'
+import { panda } from './factory.mjs'
+import { getBleedStyle } from '../patterns/bleed.mjs'
+
+export const Bleed = /* @__PURE__ */ forwardRef(function Bleed(props, ref) {
+  const { inline, block, ...restProps } = props
+  const styleProps = getBleedStyle({ inline, block })
+  return createElement(panda.div, { ref, ...styleProps, ...restProps })
+})

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

@@ -19,5 +19,7 @@ export * from './wrap'
 export * from './container'
 export * from './divider'
 export * from './float'
+export * from './bleed'
+export * from './visually-hidden'
 export * from './styled-link'
 export type { HTMLPandaProps } from '../types/jsx'

package/styled-system/jsx/index.mjs

@@ -18,4 +18,6 @@ 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'
 export * from './styled-link.mjs'

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

@@ -0,0 +1,9 @@
+/* eslint-disable */
+import type { FunctionComponent } from 'react'
+import type { VisuallyHiddenProperties } from '../patterns/visually-hidden'
+import type { HTMLPandaProps } from '../types/jsx'
+
+export type VisuallyHiddenProps = VisuallyHiddenProperties & Omit<HTMLPandaProps<'div'>, keyof VisuallyHiddenProperties >
+
+
+export declare const VisuallyHidden: FunctionComponent<VisuallyHiddenProps>

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

@@ -0,0 +1,8 @@
+import { createElement, forwardRef } from 'react'
+import { panda } from './factory.mjs'
+import { getVisuallyHiddenStyle } from '../patterns/visually-hidden.mjs'
+
+export const VisuallyHidden = /* @__PURE__ */ forwardRef(function VisuallyHidden(props, ref) {
+  const styleProps = getVisuallyHiddenStyle()
+  return createElement(panda.div, { ref, ...styleProps, ...props })
+})

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

@@ -0,0 +1,21 @@
+/* eslint-disable */
+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 BleedProperties = {
+   inline?: PropertyValue<'marginInline'>
+	block?: PropertyValue<'marginBlock'>
+}
+
+
+type BleedOptions = BleedProperties & Omit<SystemStyleObject, keyof BleedProperties >
+
+interface BleedPatternFn {
+  (options?: BleedOptions): string
+  raw: (options: BleedOptions) => BleedOptions
+}
+
+
+export declare const bleed: BleedPatternFn;

package/styled-system/patterns/bleed.mjs

@@ -0,0 +1,20 @@
+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 = (styles) => styles

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

@@ -17,4 +17,6 @@ export * from './wrap'
 export * from './container'
 export * from './divider'
 export * from './float'
+export * from './bleed'
+export * from './visually-hidden'
 export * from './styled-link'

package/styled-system/patterns/index.mjs

@@ -16,4 +16,6 @@ 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'
 export * from './styled-link.mjs'

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

@@ -0,0 +1,20 @@
+/* eslint-disable */
+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 VisuallyHiddenProperties = {
+   
+}
+
+
+type VisuallyHiddenOptions = VisuallyHiddenProperties & Omit<SystemStyleObject, keyof VisuallyHiddenProperties >
+
+interface VisuallyHiddenPatternFn {
+  (options?: VisuallyHiddenOptions): string
+  raw: (options: VisuallyHiddenOptions) => VisuallyHiddenOptions
+}
+
+
+export declare const visuallyHidden: VisuallyHiddenPatternFn;

package/styled-system/patterns/visually-hidden.mjs

@@ -0,0 +1,16 @@
+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 = (styles) => styles