@bettercms-ai/kit 0.1.1 → 2.0.0

package/src/core/primitives/types.ts

@@ -1,179 +0,0 @@
-import {
-  BoxDisplay,
-  BoxHeight,
-  BoxOverflow,
-  BoxSizing,
-  FlexAlign,
-  FlexDirection,
-  FlexJustify,
-  FlexValue,
-  FlexWrap,
-  GridAutoCols,
-  GridAutoFlow,
-  GridAutoRows,
-  GridItemColumn,
-  GridItemColumnEnd,
-  GridItemColumnStart,
-  GridItemRow,
-  GridItemRowEnd,
-  GridItemRowStart,
-  Radius,
-} from '../types'
-
-/**
- * @public
- */
-export interface ResponsiveBorderProps {
-  border?: boolean | boolean[]
-  borderTop?: boolean | boolean[]
-  borderRight?: boolean | boolean[]
-  borderBottom?: boolean | boolean[]
-  borderLeft?: boolean | boolean[]
-}
-
-/**
- * @public
- */
-export interface ResponsiveBoxProps {
-  display?: BoxDisplay | BoxDisplay[]
-  height?: BoxHeight | BoxHeight[]
-  overflow?: BoxOverflow | BoxOverflow[]
-  sizing?: BoxSizing | BoxSizing[]
-}
-
-/**
- * @public
- */
-export interface ResponsiveFlexProps {
-  align?: FlexAlign | FlexAlign[]
-  direction?: FlexDirection | FlexDirection[]
-  justify?: FlexJustify | FlexJustify[]
-  wrap?: FlexWrap | FlexWrap[]
-}
-
-/**
- * @public
- */
-export interface ResponsiveFlexItemProps {
-  /** Sets the flex CSS attribute. The property is responsive. */
-  flex?: FlexValue | FlexValue[]
-}
-
-/**
- * @public
- */
-export interface ResponsiveGridProps {
-  autoRows?: GridAutoRows | GridAutoRows[]
-  autoCols?: GridAutoCols | GridAutoCols[]
-  autoFlow?: GridAutoFlow | GridAutoFlow[]
-
-  /**
-   * @deprecated Use `gridTemplateColumns` instead. `columns` will be removed in v4.
-   */
-  columns?: number | number[]
-  gridTemplateColumns?: number | number[]
-  gap?: number | number[]
-  gapX?: number | number[]
-  gapY?: number | number[]
-  /**
-   * @deprecated Use `gridTemplateRows` instead. `rows` will be removed in v4.
-   */
-  rows?: number | number[]
-  gridTemplateRows?: number | number[]
-}
-
-/**
- * @public
- */
-export interface ResponsiveGridItemProps {
-  gridColumn?: GridItemColumn | GridItemColumn[]
-  /**
-   * @deprecated Use `gridColumn` instead. `column` will be removed in v4.
-   */
-  column?: GridItemColumn | GridItemColumn[]
-  gridColumnStart?: GridItemColumnStart | GridItemColumnStart[]
-  /**
-   * @deprecated Use `gridColumnStart` instead. `columnStart` will be removed in v4.
-   */
-  columnStart?: GridItemColumnStart | GridItemColumnStart[]
-  gridColumnEnd?: GridItemColumnEnd | GridItemColumnEnd[]
-  /**
-   * @deprecated Use `gridColumnEnd` instead. `columnEnd` will be removed in v4.
-   */
-  columnEnd?: GridItemColumnEnd | GridItemColumnEnd[]
-  gridRow?: GridItemRow | GridItemRow[]
-  /**
-   * @deprecated Use `gridRow` instead. `row` will be removed in v4.
-   */
-  row?: GridItemRow | GridItemRow[]
-  gridRowStart?: GridItemRowStart | GridItemRowStart[]
-  /**
-   * @deprecated Use `gridRowStart` instead. `rowStart` will be removed in v4.
-   */
-  rowStart?: GridItemRowStart | GridItemRowStart[]
-  gridRowEnd?: GridItemRowEnd | GridItemRowEnd[]
-  /**
-   * @deprecated Use `gridRowEnd` instead. `rowEnd` will be removed in v4.
-   */
-  rowEnd?: GridItemRowEnd | GridItemRowEnd[]
-}
-
-/**
- * @public
- */
-export interface ResponsiveMarginProps {
-  /** Applies margins to all sides. The property is responsive. */
-  margin?: number | number[]
-  /** Applies margins to the left and right sides. The property is responsive. */
-  marginX?: number | number[]
-  /** Applies margins to the top and bottom sides. The property is responsive. */
-  marginY?: number | number[]
-  marginTop?: number | number[]
-  marginRight?: number | number[]
-  marginBottom?: number | number[]
-  marginLeft?: number | number[]
-}
-
-/**
- * @public
- */
-export interface ResponsivePaddingProps {
-  padding?: number | number[]
-  paddingX?: number | number[]
-  paddingY?: number | number[]
-  paddingTop?: number | number[]
-  paddingRight?: number | number[]
-  paddingBottom?: number | number[]
-  paddingLeft?: number | number[]
-}
-
-/**
- * @public
- */
-export interface ResponsiveRadiusProps {
-  radius?: Radius | Radius[]
-}
-
-/**
- * @public
- */
-export interface ResponsiveShadowProps {
-  shadow?: number | number[]
-}
-
-/**
- * @public
- */
-export interface ResponsiveWidthProps {
-  width?: number | 'auto' | (number | 'auto')[]
-}
-
-/**
- * @public
- */
-export type Delay =
-  | number
-  | Partial<{
-      open: number
-      close: number
-    }>

package/src/core/styles/border/borderStyle.ts

@@ -1,56 +0,0 @@
-import {CSSObject, getTheme_v2} from '@bettercms-ai/kit/theme'
-
-import {_responsive} from '../helpers'
-import {ThemeProps} from '../types'
-import {ResponsiveBorderStyleProps} from './types'
-
-export function responsiveBorderStyle(): Array<
-  (props: ResponsiveBorderStyleProps & ThemeProps) => CSSObject[]
-> {
-  return [border, borderTop, borderRight, borderBottom, borderLeft]
-}
-
-function border(props: ResponsiveBorderStyleProps & ThemeProps) {
-  const {card, media} = getTheme_v2(props.theme)
-  const borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`
-
-  return _responsive(media, props.$border, (value) =>
-    value ? {'&&': {border: borderStyle}} : {'&&': {border: 0}},
-  )
-}
-
-function borderTop(props: ResponsiveBorderStyleProps & ThemeProps) {
-  const {card, media} = getTheme_v2(props.theme)
-  const borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`
-
-  return _responsive(media, props.$borderTop, (value) =>
-    value ? {'&&': {borderTop: borderStyle}} : {'&&': {borderTop: 0}},
-  )
-}
-
-function borderRight(props: ResponsiveBorderStyleProps & ThemeProps) {
-  const {card, media} = getTheme_v2(props.theme)
-  const borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`
-
-  return _responsive(media, props.$borderRight, (value) =>
-    value ? {'&&': {borderRight: borderStyle}} : {'&&': {borderRight: 0}},
-  )
-}
-
-function borderBottom(props: ResponsiveBorderStyleProps & ThemeProps) {
-  const {card, media} = getTheme_v2(props.theme)
-  const borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`
-
-  return _responsive(media, props.$borderBottom, (value) =>
-    value ? {'&&': {borderBottom: borderStyle}} : {'&&': {borderBottom: 0}},
-  )
-}
-
-function borderLeft(props: ResponsiveBorderStyleProps & ThemeProps) {
-  const {card, media} = getTheme_v2(props.theme)
-  const borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`
-
-  return _responsive(media, props.$borderLeft, (value) =>
-    value ? {'&&': {borderLeft: borderStyle}} : {'&&': {borderLeft: 0}},
-  )
-}

package/src/core/styles/border/index.ts

@@ -1,2 +0,0 @@
-export * from './borderStyle'
-export * from './types'

package/src/core/styles/border/types.ts

@@ -1,10 +0,0 @@
-/**
- * @internal
- */
-export interface ResponsiveBorderStyleProps {
-  $border: boolean[]
-  $borderTop: boolean[]
-  $borderRight: boolean[]
-  $borderBottom: boolean[]
-  $borderLeft: boolean[]
-}

package/src/core/styles/box/boxStyle.ts

@@ -1,69 +0,0 @@
-import {CSSObject, getTheme_v2} from '@bettercms-ai/kit/theme'
-import {Property} from 'csstype'
-
-import {_responsive} from '../helpers'
-import {ThemeProps} from '../types'
-import {ResponsiveBoxStyleProps} from './types'
-
-const BASE_STYLE: CSSObject = {
-  '&[data-as="ul"],&[data-as="ol"]': {
-    listStyle: 'none',
-  },
-}
-
-const BOX_SIZING: {[key: string]: Property.BoxSizing} = {
-  content: 'content-box',
-  border: 'border-box',
-}
-
-const BOX_HEIGHT = {
-  stretch: 'stretch',
-  fill: '100%',
-}
-
-export function boxStyle(): CSSObject {
-  return BASE_STYLE
-}
-
-export function responsiveBoxStyle(): Array<
-  (props: ResponsiveBoxStyleProps & ThemeProps) => CSSObject[]
-> {
-  return [
-    responsiveBoxSizingStyle,
-    responsiveBoxHeightStyle,
-    responsiveBoxOverflowStyle,
-    responsiveBoxDisplayStyle,
-  ]
-}
-
-function responsiveBoxDisplayStyle(props: ResponsiveBoxStyleProps & ThemeProps) {
-  const {media} = getTheme_v2(props.theme)
-
-  return _responsive(media, props.$display, (display) => ({
-    '&:not([hidden])': {display},
-  }))
-}
-
-function responsiveBoxSizingStyle(props: ResponsiveBoxStyleProps & ThemeProps) {
-  const {media} = getTheme_v2(props.theme)
-
-  return _responsive(media, props.$sizing, (sizing) => ({
-    boxSizing: BOX_SIZING[sizing],
-  }))
-}
-
-function responsiveBoxHeightStyle(props: ResponsiveBoxStyleProps & ThemeProps) {
-  const {media} = getTheme_v2(props.theme)
-
-  return _responsive(media, props.$height, (height) => ({
-    height: BOX_HEIGHT[height],
-  }))
-}
-
-function responsiveBoxOverflowStyle(props: ResponsiveBoxStyleProps & ThemeProps) {
-  const {media} = getTheme_v2(props.theme)
-
-  return _responsive(media, props.$overflow, (overflow) => ({
-    overflow,
-  }))
-}

package/src/core/styles/box/index.ts

@@ -1,2 +0,0 @@
-export * from './boxStyle'
-export * from './types'

package/src/core/styles/box/types.ts

@@ -1,11 +0,0 @@
-import {BoxDisplay, BoxHeight, BoxOverflow, BoxSizing} from '../../types'
-
-/**
- * @internal
- */
-export interface ResponsiveBoxStyleProps {
-  $display: BoxDisplay[]
-  $height: BoxHeight[]
-  $overflow: BoxOverflow[]
-  $sizing: BoxSizing[]
-}

package/src/core/styles/card/_cardColorStyle.ts

@@ -1,108 +0,0 @@
-import {CSSObject, ThemeColorCard_v2, ThemeColorState_v2} from '@bettercms-ai/kit/theme'
-
-/**
- * @internal
- */
-export function _cardColorStyle(
-  base: ThemeColorCard_v2,
-  color: ThemeColorState_v2,
-  checkered = false,
-): CSSObject {
-  return {
-    // from base
-
-    '--card-backdrop-color': base.backdrop,
-
-    '--card-focus-ring-color': base.focusRing,
-
-    '--card-shadow-outline-color': base.shadow.outline,
-    '--card-shadow-umbra-color': base.shadow.umbra,
-    '--card-shadow-penumbra-color': base.shadow.penumbra,
-    '--card-shadow-ambient-color': base.shadow.ambient,
-
-    // from state
-
-    '--card-accent-fg-color': color.accent.fg,
-
-    '--card-avatar-gray-bg-color': color.avatar.gray.bg,
-    '--card-avatar-gray-fg-color': color.avatar.gray.fg,
-    '--card-avatar-blue-bg-color': color.avatar.blue.bg,
-    '--card-avatar-blue-fg-color': color.avatar.blue.fg,
-    '--card-avatar-purple-bg-color': color.avatar.purple.bg,
-    '--card-avatar-purple-fg-color': color.avatar.purple.fg,
-    '--card-avatar-magenta-bg-color': color.avatar.magenta.bg,
-    '--card-avatar-magenta-fg-color': color.avatar.magenta.fg,
-    '--card-avatar-red-bg-color': color.avatar.red.bg,
-    '--card-avatar-red-fg-color': color.avatar.red.fg,
-    '--card-avatar-orange-bg-color': color.avatar.orange.bg,
-    '--card-avatar-orange-fg-color': color.avatar.orange.fg,
-    '--card-avatar-yellow-bg-color': color.avatar.yellow.bg,
-    '--card-avatar-yellow-fg-color': color.avatar.yellow.fg,
-    '--card-avatar-green-bg-color': color.avatar.green.bg,
-    '--card-avatar-green-fg-color': color.avatar.green.fg,
-    '--card-avatar-cyan-bg-color': color.avatar.cyan.bg,
-    '--card-avatar-cyan-fg-color': color.avatar.cyan.fg,
-
-    '--card-bg-color': color.bg,
-    '--card-bg-image': checkered
-      ? `repeating-conic-gradient(${color.bg} 0% 25%, ${color.muted.bg} 0% 50%)`
-      : undefined,
-
-    '--card-border-color': color.border,
-
-    '--card-badge-default-bg-color': color.badge.default.bg,
-    '--card-badge-default-dot-color': color.badge.default.dot,
-    '--card-badge-default-fg-color': color.badge.default.fg,
-    '--card-badge-default-icon-color': color.badge.default.icon,
-    '--card-badge-neutral-bg-color': color.badge.neutral?.bg,
-    '--card-badge-neutral-dot-color': color.badge.neutral?.dot,
-    '--card-badge-neutral-fg-color': color.badge.neutral?.fg,
-    '--card-badge-neutral-icon-color': color.badge.neutral?.icon,
-    '--card-badge-primary-bg-color': color.badge.primary.bg,
-    '--card-badge-primary-dot-color': color.badge.primary.dot,
-    '--card-badge-primary-fg-color': color.badge.primary.fg,
-    '--card-badge-primary-icon-color': color.badge.primary.icon,
-    '--card-badge-suggest-bg-color': color.badge.suggest?.bg,
-    '--card-badge-suggest-dot-color': color.badge.suggest?.dot,
-    '--card-badge-suggest-fg-color': color.badge.suggest?.fg,
-    '--card-badge-suggest-icon-color': color.badge.suggest?.icon,
-    '--card-badge-positive-bg-color': color.badge.positive.bg,
-    '--card-badge-positive-dot-color': color.badge.positive.dot,
-    '--card-badge-positive-fg-color': color.badge.positive.fg,
-    '--card-badge-positive-icon-color': color.badge.positive.icon,
-    '--card-badge-caution-bg-color': color.badge.caution.bg,
-    '--card-badge-caution-dot-color': color.badge.caution.dot,
-    '--card-badge-caution-fg-color': color.badge.caution.fg,
-    '--card-badge-caution-icon-color': color.badge.caution.icon,
-    '--card-badge-critical-bg-color': color.badge.critical.bg,
-    '--card-badge-critical-dot-color': color.badge.critical.dot,
-    '--card-badge-critical-fg-color': color.badge.critical.fg,
-    '--card-badge-critical-icon-color': color.badge.critical.icon,
-
-    '--card-code-bg-color': color.code.bg,
-    '--card-code-fg-color': color.code.fg,
-
-    '--card-fg-color': color.fg,
-
-    '--card-icon-color': color.icon,
-
-    '--card-kbd-bg-color': color.kbd.bg,
-    '--card-kbd-border-color': color.kbd.border,
-    '--card-kbd-fg-color': color.kbd.fg,
-
-    '--card-link-fg-color': color.link.fg,
-
-    '--card-muted-bg-color': color.muted.bg,
-    '--card-muted-fg-color': color.muted.fg,
-
-    '--card-skeleton-color-from': color.skeleton.from,
-    '--card-skeleton-color-to': color.skeleton.to,
-
-    // deprecated variables (kept for legacy)
-
-    '--card-bg2-color': color.muted.bg,
-    '--card-link-color': color.link.fg,
-    '--card-hairline-soft-color': color.border,
-    '--card-hairline-hard-color': color.border,
-  }
-}

package/src/core/styles/card/index.ts

@@ -1 +0,0 @@
-export * from './_cardColorStyle'

package/src/core/styles/flex/flexItemStyle.ts

@@ -1,27 +0,0 @@
-import {CSSObject, getTheme_v2} from '@bettercms-ai/kit/theme'
-
-import {EMPTY_ARRAY} from '../../constants'
-import {_responsive} from '../helpers'
-import {ThemeProps} from '../types'
-import {ResponsiveFlexItemStyleProps} from './types'
-
-const BASE_STYLE: CSSObject = {
-  minWidth: 0,
-  minHeight: 0,
-}
-
-export function flexItemStyle(): Array<
-  CSSObject | ((props: ResponsiveFlexItemStyleProps & ThemeProps) => CSSObject[])
-> {
-  return [BASE_STYLE, responsiveFlexItemStyle]
-}
-
-export function responsiveFlexItemStyle(
-  props: ResponsiveFlexItemStyleProps & ThemeProps,
-): CSSObject[] {
-  const {media} = getTheme_v2(props.theme)
-
-  if (!props.$flex) return EMPTY_ARRAY
-
-  return _responsive(media, props.$flex, (flex) => ({flex: `${flex}`}))
-}

package/src/core/styles/flex/flexStyle.ts

@@ -1,70 +0,0 @@
-import {CSSObject, getTheme_v2} from '@bettercms-ai/kit/theme'
-
-import {_responsive, rem} from '../helpers'
-import {ThemeProps} from '../types'
-import {ResponsiveFlexStyleProps} from './types'
-
-const BASE_STYLE: CSSObject = {
-  '&&:not([hidden])': {
-    display: 'flex',
-  },
-}
-
-export function responsiveFlexStyle(): Array<
-  CSSObject | ((props: ResponsiveFlexStyleProps & ThemeProps) => CSSObject[])
-> {
-  return [
-    BASE_STYLE,
-    responsiveFlexAlignStyle,
-    responsiveFlexGapStyle,
-    responsiveFlexWrapStyle,
-    responsiveFlexJustifyStyle,
-    responsiveFlexDirectionStyle,
-  ]
-}
-
-export function responsiveFlexAlignStyle(
-  props: ResponsiveFlexStyleProps & ThemeProps,
-): CSSObject[] {
-  const {media} = getTheme_v2(props.theme)
-
-  return _responsive(media, props.$align, (align) => {
-    return {alignItems: align}
-  })
-}
-
-function responsiveFlexGapStyle(props: ResponsiveFlexStyleProps & ThemeProps) {
-  const {media, space} = getTheme_v2(props.theme)
-
-  return _responsive(media, props.$gap, (gap) => ({
-    gap: gap ? rem(space[gap]) : undefined,
-  }))
-}
-
-export function responsiveFlexWrapStyle(props: ResponsiveFlexStyleProps & ThemeProps): CSSObject[] {
-  const {media} = getTheme_v2(props.theme)
-
-  return _responsive(media, props.$wrap, (wrap) => {
-    return {flexWrap: wrap}
-  })
-}
-
-export function responsiveFlexJustifyStyle(
-  props: ResponsiveFlexStyleProps & ThemeProps,
-): CSSObject[] {
-  const {media} = getTheme_v2(props.theme)
-
-  return _responsive(media, props.$justify, (justify) => {
-    return {justifyContent: justify}
-  })
-}
-
-export function responsiveFlexDirectionStyle(
-  props: ResponsiveFlexStyleProps & ThemeProps,
-): CSSObject[] {
-  const {media} = getTheme_v2(props.theme)
-
-  return _responsive(media, props.$direction, (direction) => {
-    return {flexDirection: direction}
-  })
-}

package/src/core/styles/flex/index.ts

@@ -1,3 +0,0 @@
-export * from './flexItemStyle'
-export * from './flexStyle'
-export * from './types'

package/src/core/styles/flex/types.ts

@@ -1,25 +0,0 @@
-import {FlexAlign, FlexDirection, FlexJustify, FlexValue, FlexWrap} from '../../types'
-
-/**
- * @internal
- */
-export interface ResponsiveFlexStyleProps {
-  $align: FlexAlign[]
-  $direction: FlexDirection[]
-  $gap: number[]
-  $justify: FlexJustify[]
-  $wrap: FlexWrap[]
-}
-
-/**
- * @internal
- */
-export interface ResponsiveFlexItemStyleProps {
-  $flex: FlexValue[]
-}
-
-/**
- * @internal
- */
-// eslint-disable-next-line @typescript-eslint/no-empty-object-type
-export interface FlexItemStyleProps extends ResponsiveFlexItemStyleProps {}

package/src/core/styles/focusRing/index.ts

@@ -1,25 +0,0 @@
-import {ThemeFocusRing} from '@bettercms-ai/kit/theme'
-
-export function focusRingBorderStyle(border: {color: string; width: number}): string {
-  return `inset 0 0 0 ${border.width}px ${border.color}`
-}
-
-export function focusRingStyle(opts: {
-  base?: {bg: string}
-  border?: {color: string; width: number}
-  focusRing: ThemeFocusRing
-}): string {
-  const {base, border, focusRing} = opts
-  const focusRingOutsetWidth = focusRing.offset + focusRing.width
-  const focusRingInsetWidth = 0 - focusRing.offset
-  const bgColor = base ? base.bg : 'var(--card-bg-color)'
-
-  return [
-    focusRingInsetWidth > 0 && `inset 0 0 0 ${focusRingInsetWidth}px var(--card-focus-ring-color)`,
-    border && focusRingBorderStyle(border),
-    focusRingInsetWidth < 0 && `0 0 0 ${0 - focusRingInsetWidth}px ${bgColor}`,
-    focusRingOutsetWidth > 0 && `0 0 0 ${focusRingOutsetWidth}px var(--card-focus-ring-color)`,
-  ]
-    .filter(Boolean)
-    .join(',')
-}

package/src/core/styles/font/codeFontStyle.ts

@@ -1,13 +0,0 @@
-import {CSSObject} from '@bettercms-ai/kit/theme'
-
-import {ThemeProps} from '../types'
-import {responsiveFont} from './responsiveFont'
-import {ResponsiveFontStyleProps} from './types'
-
-/**
- * Get responsive CSS for the `code` font style.
- * @internal
- */
-export function responsiveCodeFontStyle(props: ResponsiveFontStyleProps & ThemeProps): CSSObject[] {
-  return responsiveFont('code', props)
-}

package/src/core/styles/font/headingFontStyle.ts

@@ -1,13 +0,0 @@
-import {CSSObject} from '@bettercms-ai/kit/theme'
-
-import {ThemeProps} from '../types'
-import {responsiveFont} from './responsiveFont'
-import {ResponsiveFontStyleProps} from './types'
-
-/**
- * Get responsive CSS for the `heading` font style.
- * @internal
- */
-export function responsiveHeadingFont(props: ResponsiveFontStyleProps & ThemeProps): CSSObject[] {
-  return responsiveFont('heading', props)
-}

package/src/core/styles/font/index.ts

@@ -1,6 +0,0 @@
-export * from './codeFontStyle'
-export * from './headingFontStyle'
-export * from './labelFontStyle'
-export * from './textAlignStyle'
-export * from './textFontStyle'
-export * from './types'

package/src/core/styles/font/labelFontStyle.ts

@@ -1,13 +0,0 @@
-import {CSSObject} from '@bettercms-ai/kit/theme'
-
-import {ThemeProps} from '../types'
-import {responsiveFont} from './responsiveFont'
-import {ResponsiveFontStyleProps} from './types'
-
-/**
- * Get responsive CSS for the `label` font style.
- * @internal
- */
-export function responsiveLabelFont(props: ResponsiveFontStyleProps & ThemeProps): CSSObject[] {
-  return responsiveFont('label', props)
-}