@svadmin/ui 0.72.0 → 0.73.0

package/dist/styled-system/patterns/spacer.js

@@ -0,0 +1,25 @@
+import { getPatternStyles, patternFns } from '../helpers.js';
+import { css } from '../css/index.js';
+
+const spacerConfig = {
+transform(props, { map, isCssUnit, isCssVar }) {
+  const { size, ...rest } = props;
+  return {
+    alignSelf: "stretch",
+    justifySelf: "stretch",
+    flex: map(size, (v) => {
+      if (v == null) return "1";
+      const val = isCssUnit(v) || isCssVar(v) ? v : `token(spacing.${v}, ${v})`;
+      return `0 0 ${val}`;
+    }),
+    ...rest
+  };
+}}
+
+export const getSpacerStyle = (styles = {}) => {
+  const _styles = getPatternStyles(spacerConfig, styles)
+  return spacerConfig.transform(_styles, patternFns)
+}
+
+export const spacer = (styles) => css(getSpacerStyle(styles))
+spacer.raw = getSpacerStyle

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

@@ -0,0 +1,20 @@
+/* eslint-disable */
+import type { SystemStyleObject, ConditionalValue } from '../types/index';
+import type { Properties } from '../types/csstype';
+import type { SystemProperties } from '../types/style-props';
+import type { DistributiveOmit } from '../types/system-types';
+import type { Tokens } from '../tokens/index';
+
+export interface SquareProperties {
+   size?: SystemProperties["width"]
+}
+
+interface SquareStyles extends SquareProperties, DistributiveOmit<SystemStyleObject, keyof SquareProperties > {}
+
+interface SquarePatternFn {
+  (styles?: SquareStyles): string
+  raw: (styles?: SquareStyles) => SystemStyleObject
+}
+
+
+export declare const square: SquarePatternFn;

package/dist/styled-system/patterns/square.js

@@ -0,0 +1,24 @@
+import { getPatternStyles, patternFns } from '../helpers.js';
+import { css } from '../css/index.js';
+
+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 = {}) => {
+  const _styles = getPatternStyles(squareConfig, styles)
+  return squareConfig.transform(_styles, patternFns)
+}
+
+export const square = (styles) => css(getSquareStyle(styles))
+square.raw = getSquareStyle

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

@@ -0,0 +1,23 @@
+/* eslint-disable */
+import type { SystemStyleObject, ConditionalValue } from '../types/index';
+import type { Properties } from '../types/csstype';
+import type { SystemProperties } from '../types/style-props';
+import type { DistributiveOmit } from '../types/system-types';
+import type { Tokens } from '../tokens/index';
+
+export interface StackProperties {
+   align?: SystemProperties["alignItems"]
+	justify?: SystemProperties["justifyContent"]
+	direction?: SystemProperties["flexDirection"]
+	gap?: SystemProperties["gap"]
+}
+
+interface StackStyles extends StackProperties, DistributiveOmit<SystemStyleObject, keyof StackProperties > {}
+
+interface StackPatternFn {
+  (styles?: StackStyles): string
+  raw: (styles?: StackStyles) => SystemStyleObject
+}
+
+
+export declare const stack: StackPatternFn;

package/dist/styled-system/patterns/stack.js

@@ -0,0 +1,24 @@
+import { getPatternStyles, patternFns } from '../helpers.js';
+import { css } from '../css/index.js';
+
+const stackConfig = {
+transform(props) {
+  const { align, justify, direction, gap, ...rest } = props;
+  return {
+    display: "flex",
+    flexDirection: direction,
+    alignItems: align,
+    justifyContent: justify,
+    gap,
+    ...rest
+  };
+},
+defaultValues:{direction:'column',gap:'8px'}}
+
+export const getStackStyle = (styles = {}) => {
+  const _styles = getPatternStyles(stackConfig, styles)
+  return stackConfig.transform(_styles, patternFns)
+}
+
+export const stack = (styles) => css(getStackStyle(styles))
+stack.raw = getStackStyle

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

@@ -0,0 +1,20 @@
+/* eslint-disable */
+import type { SystemStyleObject, ConditionalValue } from '../types/index';
+import type { Properties } from '../types/csstype';
+import type { SystemProperties } from '../types/style-props';
+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/dist/styled-system/patterns/visually-hidden.js

@@ -0,0 +1,18 @@
+import { getPatternStyles, patternFns } from '../helpers.js';
+import { css } from '../css/index.js';
+
+const visuallyHiddenConfig = {
+transform(props) {
+  return {
+    srOnly: true,
+    ...props
+  };
+}}
+
+export const getVisuallyHiddenStyle = (styles = {}) => {
+  const _styles = getPatternStyles(visuallyHiddenConfig, styles)
+  return visuallyHiddenConfig.transform(_styles, patternFns)
+}
+
+export const visuallyHidden = (styles) => css(getVisuallyHiddenStyle(styles))
+visuallyHidden.raw = getVisuallyHiddenStyle

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

@@ -0,0 +1,21 @@
+/* eslint-disable */
+import type { SystemStyleObject, ConditionalValue } from '../types/index';
+import type { Properties } from '../types/csstype';
+import type { SystemProperties } from '../types/style-props';
+import type { DistributiveOmit } from '../types/system-types';
+import type { Tokens } from '../tokens/index';
+
+export interface VstackProperties {
+   justify?: SystemProperties["justifyContent"]
+	gap?: SystemProperties["gap"]
+}
+
+interface VstackStyles extends VstackProperties, DistributiveOmit<SystemStyleObject, keyof VstackProperties > {}
+
+interface VstackPatternFn {
+  (styles?: VstackStyles): string
+  raw: (styles?: VstackStyles) => SystemStyleObject
+}
+
+
+export declare const vstack: VstackPatternFn;

package/dist/styled-system/patterns/vstack.js

@@ -0,0 +1,24 @@
+import { getPatternStyles, patternFns } from '../helpers.js';
+import { css } from '../css/index.js';
+
+const vstackConfig = {
+transform(props) {
+  const { justify, gap, ...rest } = props;
+  return {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: justify,
+    gap,
+    flexDirection: "column",
+    ...rest
+  };
+},
+defaultValues:{gap:'8px'}}
+
+export const getVstackStyle = (styles = {}) => {
+  const _styles = getPatternStyles(vstackConfig, styles)
+  return vstackConfig.transform(_styles, patternFns)
+}
+
+export const vstack = (styles) => css(getVstackStyle(styles))
+vstack.raw = getVstackStyle

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

@@ -0,0 +1,24 @@
+/* eslint-disable */
+import type { SystemStyleObject, ConditionalValue } from '../types/index';
+import type { Properties } from '../types/csstype';
+import type { SystemProperties } from '../types/style-props';
+import type { DistributiveOmit } from '../types/system-types';
+import type { Tokens } from '../tokens/index';
+
+export interface WrapProperties {
+   gap?: SystemProperties["gap"]
+	rowGap?: SystemProperties["gap"]
+	columnGap?: SystemProperties["gap"]
+	align?: SystemProperties["alignItems"]
+	justify?: SystemProperties["justifyContent"]
+}
+
+interface WrapStyles extends WrapProperties, DistributiveOmit<SystemStyleObject, keyof WrapProperties > {}
+
+interface WrapPatternFn {
+  (styles?: WrapStyles): string
+  raw: (styles?: WrapStyles) => SystemStyleObject
+}
+
+
+export declare const wrap: WrapPatternFn;

package/dist/styled-system/patterns/wrap.js

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

package/dist/styled-system/recipes/content-header.d.ts

@@ -0,0 +1,31 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface ContentHeaderVariant {
+  
+}
+
+type ContentHeaderVariantMap = {
+  [key in keyof ContentHeaderVariant]: Array<ContentHeaderVariant[key]>
+}
+
+type ContentHeaderSlot = "root" | "breadcrumbs" | "currentCrumb" | "row" | "heading" | "eyebrow" | "title" | "description" | "actions"
+
+export type ContentHeaderVariantProps = {
+  [key in keyof ContentHeaderVariant]?: ConditionalValue<ContentHeaderVariant[key]> | undefined
+}
+
+export interface ContentHeaderRecipe {
+  __slot: ContentHeaderSlot
+  __type: ContentHeaderVariantProps
+  (props?: ContentHeaderVariantProps): Pretty<Record<ContentHeaderSlot, string>>
+  raw: (props?: ContentHeaderVariantProps) => ContentHeaderVariantProps
+  variantMap: ContentHeaderVariantMap
+  variantKeys: Array<keyof ContentHeaderVariant>
+  splitVariantProps<Props extends ContentHeaderVariantProps>(props: Props): [ContentHeaderVariantProps, Pretty<DistributiveOmit<Props, keyof ContentHeaderVariantProps>>]
+  getVariantProps: (props?: ContentHeaderVariantProps) => ContentHeaderVariantProps
+}
+
+
+export declare const contentHeader: ContentHeaderRecipe

package/dist/styled-system/recipes/content-header.js

@@ -0,0 +1,65 @@
+import { compact, getSlotCompoundVariant, memo, splitProps } from '../helpers.js';
+import { createRecipe } from './create-recipe.js';
+
+const contentHeaderDefaultVariants = {}
+const contentHeaderCompoundVariants = []
+
+const contentHeaderSlotNames = [
+  [
+    "root",
+    "content-header__root"
+  ],
+  [
+    "breadcrumbs",
+    "content-header__breadcrumbs"
+  ],
+  [
+    "currentCrumb",
+    "content-header__currentCrumb"
+  ],
+  [
+    "row",
+    "content-header__row"
+  ],
+  [
+    "heading",
+    "content-header__heading"
+  ],
+  [
+    "eyebrow",
+    "content-header__eyebrow"
+  ],
+  [
+    "title",
+    "content-header__title"
+  ],
+  [
+    "description",
+    "content-header__description"
+  ],
+  [
+    "actions",
+    "content-header__actions"
+  ]
+]
+const contentHeaderSlotFns = /* @__PURE__ */ contentHeaderSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, contentHeaderDefaultVariants, getSlotCompoundVariant(contentHeaderCompoundVariants, slotName))])
+
+const contentHeaderFn = memo((props = {}) => {
+  return Object.fromEntries(contentHeaderSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]))
+})
+
+const contentHeaderVariantKeys = []
+const getVariantProps = (variants) => ({ ...contentHeaderDefaultVariants, ...compact(variants) })
+
+export const contentHeader = /* @__PURE__ */ Object.assign(contentHeaderFn, {
+  __recipe__: false,
+  __name__: 'contentHeader',
+  raw: (props) => props,
+  classNameMap: {},
+  variantKeys: contentHeaderVariantKeys,
+  variantMap: {},
+  splitVariantProps(props) {
+    return splitProps(props, contentHeaderVariantKeys)
+  },
+  getVariantProps
+})

package/dist/styled-system/recipes/content-page.d.ts

@@ -0,0 +1,34 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface ContentPageVariant {
+  /**
+ * @default "default"
+ */
+width: "narrow" | "default" | "wide"
+}
+
+type ContentPageVariantMap = {
+  [key in keyof ContentPageVariant]: Array<ContentPageVariant[key]>
+}
+
+type ContentPageSlot = "root"
+
+export type ContentPageVariantProps = {
+  [key in keyof ContentPageVariant]?: ConditionalValue<ContentPageVariant[key]> | undefined
+}
+
+export interface ContentPageRecipe {
+  __slot: ContentPageSlot
+  __type: ContentPageVariantProps
+  (props?: ContentPageVariantProps): Pretty<Record<ContentPageSlot, string>>
+  raw: (props?: ContentPageVariantProps) => ContentPageVariantProps
+  variantMap: ContentPageVariantMap
+  variantKeys: Array<keyof ContentPageVariant>
+  splitVariantProps<Props extends ContentPageVariantProps>(props: Props): [ContentPageVariantProps, Pretty<DistributiveOmit<Props, keyof ContentPageVariantProps>>]
+  getVariantProps: (props?: ContentPageVariantProps) => ContentPageVariantProps
+}
+
+
+export declare const contentPage: ContentPageRecipe

package/dist/styled-system/recipes/content-page.js

@@ -0,0 +1,43 @@
+import { compact, getSlotCompoundVariant, memo, splitProps } from '../helpers.js';
+import { createRecipe } from './create-recipe.js';
+
+const contentPageDefaultVariants = {
+  "width": "default"
+}
+const contentPageCompoundVariants = []
+
+const contentPageSlotNames = [
+  [
+    "root",
+    "content-page__root"
+  ]
+]
+const contentPageSlotFns = /* @__PURE__ */ contentPageSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, contentPageDefaultVariants, getSlotCompoundVariant(contentPageCompoundVariants, slotName))])
+
+const contentPageFn = memo((props = {}) => {
+  return Object.fromEntries(contentPageSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]))
+})
+
+const contentPageVariantKeys = [
+  "width"
+]
+const getVariantProps = (variants) => ({ ...contentPageDefaultVariants, ...compact(variants) })
+
+export const contentPage = /* @__PURE__ */ Object.assign(contentPageFn, {
+  __recipe__: false,
+  __name__: 'contentPage',
+  raw: (props) => props,
+  classNameMap: {},
+  variantKeys: contentPageVariantKeys,
+  variantMap: {
+  "width": [
+    "narrow",
+    "default",
+    "wide"
+  ]
+},
+  splitVariantProps(props) {
+    return splitProps(props, contentPageVariantKeys)
+  },
+  getVariantProps
+})

package/dist/styled-system/recipes/create-recipe.js

@@ -0,0 +1,82 @@
+import { finalizeConditions, sortConditions } from '../css/conditions.js';
+import { css } from '../css/css.js';
+import { assertCompoundVariant, getCompoundVariantCss } from '../css/cva.js';
+import { cx } from '../css/cx.js';
+import { compact, createCss, splitProps, uniq, withoutSpace } from '../helpers.js';
+
+export const createRecipe = (name, defaultVariants, compoundVariants) => {
+ const getVariantProps = (variants) => {
+   return {
+     [name]: '__ignore__',
+     ...defaultVariants,
+     ...compact(variants),
+   };
+ };
+
+  const recipeFn = (variants, withCompoundVariants = true) => {
+   const transform = (prop, value) => {
+     assertCompoundVariant(name, compoundVariants, variants, prop)
+
+      if (value === '__ignore__') {
+        return { className: name }
+      }
+
+      value = withoutSpace(value)
+      return { className: `${name}--${prop}_${value}` }
+   }
+
+   const recipeCss = createCss({
+     
+     conditions: {
+       shift: sortConditions,
+       finalize: finalizeConditions,
+       breakpoints: { keys: ["base"] }
+     },
+     utility: {
+       prefix: "svadmin",
+       toHash: (path, hashFn) => hashFn(path.join(":")),
+       transform,
+     }
+   })
+
+   const recipeStyles = getVariantProps(variants)
+
+   if (withCompoundVariants) {
+     const compoundVariantStyles = getCompoundVariantCss(compoundVariants, recipeStyles)
+     return cx(recipeCss(recipeStyles), css(compoundVariantStyles))
+   }
+
+   return recipeCss(recipeStyles)
+  }
+
+   return {
+     recipeFn,
+     getVariantProps,
+     __getCompoundVariantCss__: (variants) => {
+       return getCompoundVariantCss(compoundVariants, getVariantProps(variants));
+     },
+   }
+}
+
+export const mergeRecipes = (recipeA, recipeB) => {
+ if (recipeA && !recipeB) return recipeA
+ if (!recipeA && recipeB) return recipeB
+
+ const recipeFn = (...args) => cx(recipeA(...args), recipeB(...args))
+ const variantKeys = uniq(recipeA.variantKeys, recipeB.variantKeys)
+ const variantMap = variantKeys.reduce((acc, key) => {
+   acc[key] = uniq(recipeA.variantMap[key], recipeB.variantMap[key])
+   return acc
+ }, {})
+
+ return Object.assign(recipeFn, {
+   __recipe__: true,
+   __name__: `${recipeA.__name__} ${recipeB.__name__}`,
+   raw: (props) => props,
+   variantKeys,
+   variantMap,
+   splitVariantProps(props) {
+     return splitProps(props, variantKeys)
+   },
+ })
+ }

package/dist/styled-system/recipes/index.d.ts

@@ -0,0 +1,17 @@
+/* eslint-disable */
+export * from './ui-button';
+export * from './ui-badge';
+export * from './ui-textarea';
+export * from './surface-metric';
+export * from './surface-table';
+export * from './ui-input';
+export * from './product-section';
+export * from './product-toolbar';
+export * from './product-workspace';
+export * from './product-settings';
+export * from './product-settings-row';
+export * from './product-list';
+export * from './product-status';
+export * from './content-page';
+export * from './content-header';
+export * from './metric-block';

package/dist/styled-system/recipes/index.js

@@ -0,0 +1,16 @@
+export * from './ui-button.js';
+export * from './ui-badge.js';
+export * from './ui-textarea.js';
+export * from './surface-metric.js';
+export * from './surface-table.js';
+export * from './ui-input.js';
+export * from './product-section.js';
+export * from './product-toolbar.js';
+export * from './product-workspace.js';
+export * from './product-settings.js';
+export * from './product-settings-row.js';
+export * from './product-list.js';
+export * from './product-status.js';
+export * from './content-page.js';
+export * from './content-header.js';
+export * from './metric-block.js';

package/dist/styled-system/recipes/metric-block.d.ts

@@ -0,0 +1,34 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface MetricBlockVariant {
+  /**
+ * @default "neutral"
+ */
+trendTone: "positive" | "negative" | "warning" | "neutral"
+}
+
+type MetricBlockVariantMap = {
+  [key in keyof MetricBlockVariant]: Array<MetricBlockVariant[key]>
+}
+
+type MetricBlockSlot = "root" | "header" | "label" | "icon" | "skeleton" | "value" | "meta" | "trend" | "detail"
+
+export type MetricBlockVariantProps = {
+  [key in keyof MetricBlockVariant]?: ConditionalValue<MetricBlockVariant[key]> | undefined
+}
+
+export interface MetricBlockRecipe {
+  __slot: MetricBlockSlot
+  __type: MetricBlockVariantProps
+  (props?: MetricBlockVariantProps): Pretty<Record<MetricBlockSlot, string>>
+  raw: (props?: MetricBlockVariantProps) => MetricBlockVariantProps
+  variantMap: MetricBlockVariantMap
+  variantKeys: Array<keyof MetricBlockVariant>
+  splitVariantProps<Props extends MetricBlockVariantProps>(props: Props): [MetricBlockVariantProps, Pretty<DistributiveOmit<Props, keyof MetricBlockVariantProps>>]
+  getVariantProps: (props?: MetricBlockVariantProps) => MetricBlockVariantProps
+}
+
+
+export declare const metricBlock: MetricBlockRecipe

package/dist/styled-system/recipes/metric-block.js

@@ -0,0 +1,76 @@
+import { compact, getSlotCompoundVariant, memo, splitProps } from '../helpers.js';
+import { createRecipe } from './create-recipe.js';
+
+const metricBlockDefaultVariants = {
+  "trendTone": "neutral"
+}
+const metricBlockCompoundVariants = []
+
+const metricBlockSlotNames = [
+  [
+    "root",
+    "metric-block__root"
+  ],
+  [
+    "header",
+    "metric-block__header"
+  ],
+  [
+    "label",
+    "metric-block__label"
+  ],
+  [
+    "icon",
+    "metric-block__icon"
+  ],
+  [
+    "skeleton",
+    "metric-block__skeleton"
+  ],
+  [
+    "value",
+    "metric-block__value"
+  ],
+  [
+    "meta",
+    "metric-block__meta"
+  ],
+  [
+    "trend",
+    "metric-block__trend"
+  ],
+  [
+    "detail",
+    "metric-block__detail"
+  ]
+]
+const metricBlockSlotFns = /* @__PURE__ */ metricBlockSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, metricBlockDefaultVariants, getSlotCompoundVariant(metricBlockCompoundVariants, slotName))])
+
+const metricBlockFn = memo((props = {}) => {
+  return Object.fromEntries(metricBlockSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]))
+})
+
+const metricBlockVariantKeys = [
+  "trendTone"
+]
+const getVariantProps = (variants) => ({ ...metricBlockDefaultVariants, ...compact(variants) })
+
+export const metricBlock = /* @__PURE__ */ Object.assign(metricBlockFn, {
+  __recipe__: false,
+  __name__: 'metricBlock',
+  raw: (props) => props,
+  classNameMap: {},
+  variantKeys: metricBlockVariantKeys,
+  variantMap: {
+  "trendTone": [
+    "positive",
+    "negative",
+    "warning",
+    "neutral"
+  ]
+},
+  splitVariantProps(props) {
+    return splitProps(props, metricBlockVariantKeys)
+  },
+  getVariantProps
+})