@saas-ui/react 2.11.2 → 3.0.0-alpha.0

package/src/theme/tokens/sizes.ts

@@ -0,0 +1,71 @@
+import { defineTokens } from '@chakra-ui/react'
+
+import { spacing } from './spacing'
+
+const largeSizes = defineTokens.sizes({
+  '3xs': { value: '14rem' },
+  '2xs': { value: '16rem' },
+  xs: { value: '20rem' },
+  sm: { value: '24rem' },
+  md: { value: '28rem' },
+  lg: { value: '32rem' },
+  xl: { value: '36rem' },
+  '2xl': { value: '42rem' },
+  '3xl': { value: '48rem' },
+  '4xl': { value: '56rem' },
+  '5xl': { value: '64rem' },
+  '6xl': { value: '72rem' },
+  '7xl': { value: '80rem' },
+  '8xl': { value: '90rem' },
+})
+
+const namedSizes = defineTokens.sizes({
+  max: { value: 'max-content' },
+  min: { value: 'min-content' },
+  fit: { value: 'fit-content' },
+  prose: { value: '60ch' },
+  full: { value: '100%' },
+  dvh: { value: '100dvh' },
+  svh: { value: '100svh' },
+  lvh: { value: '100lvh' },
+  dvw: { value: '100dvw' },
+  svw: { value: '100svw' },
+  lvw: { value: '100lvw' },
+  vw: { value: '100vw' },
+  vh: { value: '100vh' },
+})
+
+const fractionalSizes = defineTokens.sizes({
+  '1/2': { value: '50%' },
+  '1/3': { value: '33.333333%' },
+  '2/3': { value: '66.666667%' },
+  '1/4': { value: '25%' },
+  '3/4': { value: '75%' },
+  '1/5': { value: '20%' },
+  '2/5': { value: '40%' },
+  '3/5': { value: '60%' },
+  '4/5': { value: '80%' },
+  '1/6': { value: '16.666667%' },
+  '2/6': { value: '33.333333%' },
+  '3/6': { value: '50%' },
+  '4/6': { value: '66.666667%' },
+  '5/6': { value: '83.333333%' },
+  '1/12': { value: '8.333333%' },
+  '2/12': { value: '16.666667%' },
+  '3/12': { value: '25%' },
+  '4/12': { value: '33.333333%' },
+  '5/12': { value: '41.666667%' },
+  '6/12': { value: '50%' },
+  '7/12': { value: '58.333333%' },
+  '8/12': { value: '66.666667%' },
+  '9/12': { value: '75%' },
+  '10/12': { value: '83.333333%' },
+  '11/12': { value: '91.666667%' },
+})
+
+export const sizes = defineTokens.sizes({
+  ...largeSizes,
+  ...spacing,
+  ...fractionalSizes,
+  ...namedSizes,
+})

package/src/theme/tokens/spacing.ts

@@ -0,0 +1,38 @@
+import { defineTokens } from '@chakra-ui/react'
+
+import { scaleToken } from '../utils'
+
+export const spacing = defineTokens.spacing({
+  0.5: { value: scaleToken('0.125rem') },
+  1: { value: scaleToken('0.25rem') },
+  1.5: { value: scaleToken('0.375rem') },
+  2: { value: scaleToken('0.5rem') },
+  2.5: { value: scaleToken('0.625rem') },
+  3: { value: scaleToken('0.75rem') },
+  3.5: { value: scaleToken('0.875rem') },
+  4: { value: scaleToken('1rem') },
+  5: { value: scaleToken('1.25rem') },
+  6: { value: scaleToken('1.5rem') },
+  7: { value: scaleToken('1.75rem') },
+  8: { value: scaleToken('2rem') },
+  9: { value: scaleToken('2.25rem') },
+  10: { value: scaleToken('2.5rem') },
+  12: { value: scaleToken('3rem') },
+  14: { value: scaleToken('3.5rem') },
+  16: { value: scaleToken('4rem') },
+  20: { value: scaleToken('5rem') },
+  24: { value: scaleToken('6rem') },
+  28: { value: scaleToken('7rem') },
+  32: { value: scaleToken('8rem') },
+  36: { value: scaleToken('9rem') },
+  40: { value: scaleToken('10rem') },
+  44: { value: scaleToken('11rem') },
+  48: { value: scaleToken('12rem') },
+  52: { value: scaleToken('13rem') },
+  56: { value: scaleToken('14rem') },
+  60: { value: scaleToken('15rem') },
+  64: { value: scaleToken('16rem') },
+  72: { value: scaleToken('18rem') },
+  80: { value: scaleToken('20rem') },
+  96: { value: scaleToken('24rem') },
+})

package/src/theme/tokens/z-indices.ts

@@ -0,0 +1,34 @@
+import { defineTokens } from '@chakra-ui/react'
+
+export const zIndices = defineTokens.zIndex({
+  // Local elements, eg a badge of an avatar.
+  'layer-1': {
+    value: 1,
+  },
+  // Overlay elements, popovers, tooltips, menus, etc.
+  'layer-2': {
+    value: 10,
+  },
+  // Elements that should render above main content, eg a sticky header.
+  'layer-3': {
+    value: 100,
+  },
+  // Elements not part of main content, eg dialogs.
+  'layer-4': {
+    value: 1000,
+  },
+
+  hide: { value: -1 },
+  base: { value: 0 },
+  docked: { value: 10 },
+  dropdown: { value: 1000 },
+  sticky: { value: 1100 },
+  banner: { value: 1200 },
+  overlay: { value: 1300 },
+  modal: { value: 1400 },
+  popover: { value: 1500 },
+  skipNav: { value: 1600 },
+  toast: { value: 1700 },
+  tooltip: { value: 1800 },
+  max: { value: 2147483647 },
+})

package/src/theme/utils.ts

@@ -0,0 +1,46 @@
+export function mapEntries<A, B, K extends string | number | symbol>(
+  obj: { [key in K]: A },
+  f: (key: K, val: A) => [K, B],
+): { [key in K]: B } {
+  const result: { [key in K]: B } = {} as any
+  for (const key in obj) {
+    const kv = f(key, obj[key])
+    result[kv[0]] = kv[1]
+  }
+  return result
+}
+
+export function scaleToken(value: string | number) {
+  return `calc(${value} * var(--scale-factor))`
+}
+
+export function radiusToken(value: string | number) {
+  return `calc(${value} * var(--scale-factor) * var(--radius-factor))`
+}
+
+const BASE_GRID_SIZE = 4
+const BASE_FONT_SIZE = 16
+
+export function fluid<
+  P extends string,
+  MinPx extends number,
+  MaxPx extends number,
+>(params: { property: P; from: MinPx; to: MaxPx; divider?: number }) {
+  const divider = params.divider ?? BASE_GRID_SIZE
+  const breakpointMin = params.from / BASE_FONT_SIZE
+  const breakpointMax = params.to / BASE_FONT_SIZE
+  const breakpointScope = breakpointMax - breakpointMin
+  return `
+    clamp(calc(var(---${params.property}-min) * 1rem), calc((var(---${params.property}-scope) * 100vw) + (var(---${params.property}-intercept) * 1rem)), calc(var(---${params.property}-max) * 1rem));
+    ---${params.property}-min: var(--${params.property}-min) / ${divider};
+    ---${params.property}-max: var(--${params.property}-max) / ${divider};
+    ---${params.property}-scope: (var(---${params.property}-max) - var(---${params.property}-min)) / ${breakpointScope};
+    ---${params.property}-intercept: calc(var(---${params.property}-min) - (var(---${params.property}-scope) * ${breakpointMin}));
+  ` as const
+}
+
+// fontSize: `clamp(calc(var(--${params.property}-min) * 1rem), calc((var(--${params.property}-scope) * 100vw) + (var(--${params.property}-intercept) * 1rem)), calc(var(--${params.property}-max) * 1rem))`,
+// [`--${params.property}-min`]: `var(--${params.property}-min) / ${divider}`,
+// [`--${params.property}-max`]: `var(--${params.property}-max) / ${divider}`,
+// [`--${params.property}-scope`]: `(var(--${params.property}-max) - var(---${params.property}-min)) / ${breakpointScope}`,
+// [`--${params.property}-intercept`]: `calc(var(--${params.property}-min) - (var(--${params.property}-scope) * ${breakpointMin}))`,

package/dist/index.d.mts

@@ -1,8 +0,0 @@
-export * from '@saas-ui/core';
-export * from '@saas-ui/hooks';
-export * from '@saas-ui/theme';
-export * from '@saas-ui/nprogress';
-export * from '@saas-ui/modals';
-export * from '@saas-ui/data-table';
-export * from '@saas-ui/hotkeys';
-export * from '@saas-ui/forms';

package/dist/index.mjs

@@ -1,11 +0,0 @@
-
-// src/index.ts
-export * from "@saas-ui/core";
-export * from "@saas-ui/hooks";
-export * from "@saas-ui/theme";
-export * from "@saas-ui/nprogress";
-export * from "@saas-ui/modals";
-export * from "@saas-ui/data-table";
-export * from "@saas-ui/hotkeys";
-export * from "@saas-ui/forms";
-//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export * from '@saas-ui/core'\nexport * from '@saas-ui/hooks'\nexport * from '@saas-ui/theme'\nexport * from '@saas-ui/nprogress'\nexport * from '@saas-ui/modals'\nexport * from '@saas-ui/data-table'\nexport * from '@saas-ui/hotkeys'\nexport * from '@saas-ui/forms'\n"],"mappings":";;;AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}