@bettercms-ai/kit 0.1.0

package/src/core/primitives/types.ts

@@ -0,0 +1,179 @@
+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

@@ -0,0 +1,56 @@
+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

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

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

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

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

@@ -0,0 +1,69 @@
+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

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

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

@@ -0,0 +1,11 @@
+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

@@ -0,0 +1,108 @@
+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

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

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

@@ -0,0 +1,27 @@
+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

@@ -0,0 +1,70 @@
+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

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

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

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,13 @@
+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)
+}