@okshaun/components 0.5.8 → 1.0.1

package/src/recipes/tooltip.ts

@@ -0,0 +1,359 @@
+import { defineSlotRecipe } from '@pandacss/dev';
+
+const tooltipBase = {
+  wrapper: {
+    position: 'relative',
+    width: 'fit-content',
+    height: 'fit-content',
+    cursor: 'default',
+  },
+  tooltipContent: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '4',
+    bg: { base: 'gray.90', _dark: 'gray.10' },
+    color: { base: 'gray.10', _dark: 'gray.90' },
+    fontFamily: 'sans',
+    fontWeight: 'normal',
+    borderRadius: '4',
+    position: 'absolute',
+    maxWidth: 'max-content',
+    width: 'max-content',
+    boxShadow: 'medium',
+    zIndex: 1,
+    pointerEvents: 'none',
+    _after: {
+      content: "''",
+      position: 'absolute',
+      width: '0',
+      height: '0',
+      borderWidth: '9',
+      borderStyle: 'solid',
+      borderColor: 'transparent',
+    },
+  },
+  title: {
+    fontWeight: 'bold',
+    color: 'text',
+  },
+  text: {
+    color: 'text.subtlest',
+  },
+};
+
+const tooltipVariants = {
+  position: {
+    top: {
+      tooltipContent: {
+        bottom: '100%',
+        left: '50%',
+        transform: 'translateX(-50%)',
+        opacity: 1,
+        _after: {
+          top: '100%',
+          left: '50%',
+          transform: 'translate(-50%, -2%)',
+          borderTopColor: { base: 'gray.90', _dark: 'gray.10' },
+        },
+      },
+    },
+    bottom: {
+      tooltipContent: {
+        top: '100%',
+        left: '50%',
+        transform: 'translateX(-50%)',
+        _after: {
+          bottom: '100%',
+          left: '50%',
+          transform: 'translate(-50%, 2%)',
+          borderBottomColor: { base: 'gray.90', _dark: 'gray.10' },
+        },
+      },
+    },
+    left: {
+      tooltipContent: {
+        top: '50%',
+        right: 'calc(100% - 0.75rem)',
+        transform: 'translate(-10%, -50%)',
+        _after: {
+          top: '50%',
+          right: '-6%',
+          transform: 'translate(48%, -50%)',
+          borderLeftColor: { base: 'gray.90', _dark: 'gray.10' },
+        },
+      },
+    },
+    right: {
+      tooltipContent: {
+        top: '50%',
+        left: `calc(100% - 0.75rem)`,
+        transform: 'translate(10%, -50%)',
+        _after: {
+          top: '50%',
+          left: '-6%',
+          transform: 'translate(-48%, -50%)',
+          borderRightColor: { base: 'gray.90', _dark: 'gray.10' },
+        },
+      },
+    },
+    'top-start': {
+      tooltipContent: {
+        bottom: '100%',
+        left: '0',
+        _after: {
+          top: '100%',
+          left: '8',
+          transform: 'translate(0, -2%)',
+          borderTopColor: { base: 'gray.90', _dark: 'gray.10' },
+        },
+      },
+    },
+    'bottom-start': {
+      tooltipContent: {
+        top: '100%',
+        left: '0',
+        transform: 'translateX(0)',
+        _after: {
+          bottom: '100%',
+          left: '8',
+          transform: 'translate(0%, 2%)',
+          borderBottomColor: { base: 'gray.90', _dark: 'gray.10' },
+        },
+      },
+    },
+    'left-start': {
+      tooltipContent: {
+        top: '0',
+        right: 'calc(100% - 0.75rem)',
+        transform: 'translate(-10%, -0%)',
+        _after: {
+          top: '8',
+          right: '-6%',
+          transform: 'translate(48%, 0)',
+          borderLeftColor: { base: 'gray.90', _dark: 'gray.10' },
+        },
+      },
+    },
+    'right-start': {
+      tooltipContent: {
+        top: '0',
+        left: `calc(100% - 0.75rem)`,
+        transform: 'translate(10%, 0%)',
+        _after: {
+          top: '8',
+          left: '-6%',
+          transform: 'translate(-48%, 0)',
+          borderRightColor: { base: 'gray.90', _dark: 'gray.10' },
+        },
+      },
+    },
+    'top-end': {
+      tooltipContent: {
+        bottom: '100%',
+        right: '0',
+        _after: {
+          top: '100%',
+          right: '8',
+          transform: 'translate(0, -2%)',
+          borderTopColor: { base: 'gray.90', _dark: 'gray.10' },
+        },
+      },
+    },
+    'bottom-end': {
+      tooltipContent: {
+        top: '100%',
+        right: '0',
+        transform: 'translateX(0)',
+        _after: {
+          bottom: '100%',
+          right: '8',
+          transform: 'translate(0%, 2%)',
+          borderBottomColor: { base: 'gray.90', _dark: 'gray.10' },
+        },
+      },
+    },
+    'left-end': {
+      tooltipContent: {
+        bottom: '0',
+        right: 'calc(100% - 0.75rem)',
+        transform: 'translate(-10%, -0%)',
+        _after: {
+          bottom: '8',
+          right: '-6%',
+          transform: 'translate(48%, 0)',
+          borderLeftColor: { base: 'gray.90', _dark: 'gray.10' },
+        },
+      },
+    },
+    'right-end': {
+      tooltipContent: {
+        bottom: '0',
+        left: `calc(100% - 0.75rem)`,
+        transform: 'translate(10%, -0%)',
+        _after: {
+          bottom: '8',
+          left: '-6%',
+          transform: 'translate(-48%, 0)',
+          borderRightColor: { base: 'gray.90', _dark: 'gray.10' },
+        },
+      },
+    },
+  },
+  caret: {
+    true: {
+      tooltipContent: {
+        _after: {
+          display: 'block',
+        },
+      },
+      _position: {
+        top: {
+          tooltipContent: {
+            mb: '12',
+          },
+        },
+      },
+    },
+    false: {
+      tooltipContent: {
+        _after: {
+          display: 'none',
+        },
+      },
+      _position: {
+        top: {
+          tooltipContent: {
+            mb: '8',
+          },
+        },
+      },
+    },
+  },
+  size: {
+    sm: {
+      tooltipContent: {
+        py: '4',
+        px: '8',
+      },
+      title: {
+        fontSize: '12',
+      },
+      text: {
+        fontSize: '12',
+      },
+    },
+    md: {
+      tooltipContent: {
+        py: '8',
+        px: '12',
+      },
+      title: {
+        fontSize: '14',
+      },
+      text: {
+        fontSize: '14',
+      },
+    },
+    lg: {
+      tooltipContent: {
+        py: '12',
+        px: '16',
+      },
+      title: {
+        fontSize: '16',
+      },
+      text: {
+        fontSize: '16',
+      },
+    },
+  },
+};
+
+export const tooltipRecipe = defineSlotRecipe({
+  className: 'tooltip',
+  jsx: ['Tooltip'],
+  slots: ['wrapper', 'tooltipContent', 'title', 'text'],
+  base: tooltipBase,
+  variants: {
+    ...tooltipVariants,
+  },
+  defaultVariants: {
+    position: 'bottom',
+    caret: true,
+    size: 'md',
+  },
+  compoundVariants: [
+    {
+      position: ['top', 'top-start', 'top-end'],
+      caret: true,
+      css: {
+        tooltipContent: {
+          mb: '12',
+        },
+      },
+    },
+    {
+      position: ['top', 'top-start', 'top-end'],
+      caret: false,
+      css: {
+        tooltipContent: {
+          mb: '8',
+        },
+      },
+    },
+    {
+      position: ['bottom', 'bottom-start', 'bottom-end'],
+      caret: true,
+      css: {
+        tooltipContent: {
+          mt: '12',
+        },
+      },
+    },
+    {
+      position: ['bottom', 'bottom-start', 'bottom-end'],
+      caret: false,
+      css: {
+        tooltipContent: {
+          mt: '8',
+        },
+      },
+    },
+    {
+      position: ['left', 'left-start', 'left-end'],
+      caret: true,
+      css: {
+        tooltipContent: {
+          mr: '12',
+        },
+      },
+    },
+    {
+      position: ['left', 'left-start', 'left-end'],
+      caret: false,
+      css: {
+        tooltipContent: {
+          mr: '8',
+        },
+      },
+    },
+    {
+      position: ['right', 'right-start', 'right-end'],
+      caret: true,
+      css: {
+        tooltipContent: {
+          ml: '12',
+        },
+      },
+    },
+    {
+      position: ['right', 'right-start', 'right-end'],
+      caret: false,
+      css: {
+        tooltipContent: {
+          ml: '8',
+        },
+      },
+    },
+  ],
+});

package/src/styles/index.css

@@ -0,0 +1 @@
+@layer reset, base, tokens, recipes, utilities;

package/src/styles/primitives/animations.ts

@@ -0,0 +1,16 @@
+import { defineTokens } from '@pandacss/dev';
+
+export const animations = defineTokens.animations({
+  spin: {
+    value: 'spin 1s linear infinite',
+  },
+  ping: {
+    value: 'ping 1s cubic-bezier(0, 0, 0.2, 1) infinite',
+  },
+  pulse: {
+    value: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+  },
+  bounce: {
+    value: 'bounce 1s infinite',
+  },
+});

package/src/styles/primitives/aspectRatios.ts

@@ -0,0 +1,22 @@
+import { defineTokens } from '@pandacss/dev';
+
+export const aspectRatios = defineTokens.aspectRatios({
+  square: {
+    value: '1 / 1',
+  },
+  landscape: {
+    value: '4 / 3',
+  },
+  portrait: {
+    value: '3 / 4',
+  },
+  wide: {
+    value: '16 / 9',
+  },
+  ultrawide: {
+    value: '18 / 5',
+  },
+  golden: {
+    value: '1.618 / 1',
+  },
+});

package/src/styles/primitives/blurs.ts

@@ -0,0 +1,25 @@
+import { defineTokens } from '@pandacss/dev';
+
+export const blurs = defineTokens.blurs({
+  sm: {
+    value: '{sizes.4}',
+  },
+  base: {
+    value: '{sizes.8}',
+  },
+  md: {
+    value: '{sizes.12}',
+  },
+  lg: {
+    value: '{sizes.16}',
+  },
+  xl: {
+    value: '{sizes.24}',
+  },
+  '2xl': {
+    value: '{sizes.40}',
+  },
+  '3xl': {
+    value: '{sizes.64}',
+  },
+});

package/src/styles/primitives/borderWidths.ts

@@ -0,0 +1,10 @@
+import { defineTokens } from '@pandacss/dev';
+
+export const borderWidths = defineTokens.borderWidths({
+  '0': { value: '{sizes.0}' },
+  '1': { value: '{sizes.1}' },
+  '2': { value: '{sizes.2}' },
+  '4': { value: '{sizes.4}' },
+  '8': { value: '{sizes.8}' },
+  '16': { value: '{sizes.16}' },
+});

package/src/styles/primitives/borders.ts

@@ -0,0 +1,36 @@
+import { defineTokens } from '@pandacss/dev';
+
+/**
+ * Border shorthand tokens for common border combinations.
+ * Uses semantic color tokens for theming support.
+ * Usage: border: 'subtle' or border: 'default'
+ */
+export const borders = defineTokens.borders({
+  default: {
+    value: '{borderWidths.1} solid {colors.border}',
+  },
+  strong: {
+    value: '{borderWidths.2} solid {colors.border.bold}',
+  },
+  input: {
+    value: '{borderWidths.1} solid {colors.border.input}',
+  },
+  focused: {
+    value: '{borderWidths.2} solid {colors.border.focused}',
+  },
+  success: {
+    value: '{borderWidths.1} solid {colors.border.success}',
+  },
+  warning: {
+    value: '{borderWidths.1} solid {colors.border.warning}',
+  },
+  danger: {
+    value: '{borderWidths.1} solid {colors.border.danger}',
+  },
+  info: {
+    value: '{borderWidths.1} solid {colors.border.info}',
+  },
+  none: {
+    value: 'none',
+  },
+});

package/src/styles/primitives/colors.ts

@@ -0,0 +1,228 @@
+import { defineTokens } from '@pandacss/dev';
+
+export const colors = defineTokens.colors({
+  transparent: { value: 'transparent' },
+  current: { value: 'currentColor' },
+  inherit: { value: 'inherit' },
+  neutral: {
+    '0': { value: '#FFFFFF' },
+    '10': { value: '#F8F8F8' },
+    '20': { value: '#F0F1F2' },
+    '30': { value: '#DDDEE1' },
+    '40': { value: '#B7B9BE' },
+    '50': { value: '#8C8F97' },
+    '60': { value: '#7D818A' },
+    '70': { value: '#6B6E76' },
+    '80': { value: '#505258' },
+    '90': { value: '#3B3D42' },
+    '100': { value: '#292A2E' },
+    '110': { value: '#1E1F21' },
+  },
+  neutralA: {
+    '10': { value: '#17171708' },
+    '20': { value: '#1717170F' },
+    '30': { value: '#17171724' },
+    '40': { value: '#1717174A' },
+    '50': { value: '#17171775' },
+  },
+  darkNeutral: {
+    '0': { value: '#18191A' },
+    '10': { value: '#1F1F21' },
+    '20': { value: '#242528' },
+    '25': { value: '#2B2C2F' },
+    '30': { value: '#303134' },
+    '35': { value: '#3D3F43' },
+    '40': { value: '#4B4D51' },
+    '50': { value: '#63666B' },
+    '60': { value: '#7E8188' },
+    '70': { value: '#96999E' },
+    '80': { value: '#A9ABAF' },
+    '90': { value: '#BFC1C4' },
+    '100': { value: '#CECFD2' },
+    '110': { value: '#E2E3E4' },
+  },
+  darkNeutralA: {
+    '-10': { value: '#01040475' },
+    '10': { value: '#BDBDBD0A' },
+    '20': { value: '#CECED912' },
+    '25': { value: '#D9DAE71A' },
+    '30': { value: '#E3E4F21F' },
+    '35': { value: '#E8EDFD2E' },
+    '40': { value: '#E5E9F640' },
+    '50': { value: '#E9F0FB5C' },
+  },
+  gray: {
+    '10': { value: '#fbfcfd' },
+    '20': { value: '#e0e1e2' },
+    '30': { value: '#c5c5c6' },
+    '40': { value: '#a9aaab' },
+    '50': { value: '#8e8f8f' },
+    '60': { value: '#737374' },
+    '70': { value: '#585858' },
+    '80': { value: '#3c3d3d' },
+    '90': { value: '#212121' },
+    '100': { value: '#060606' },
+  },
+  red: {
+    // DEFAULT: { value: '#e2483d' },
+    '10': { value: '#ffeceb' },
+    '20': { value: '#ffd5d2' },
+    '30': { value: '#fd9891' },
+    '40': { value: '#f87168' },
+    '50': { value: '#f15b50' },
+    '60': { value: '#e2483d' },
+    '70': { value: '#c9372c' },
+    '80': { value: '#ae2e24' },
+    '90': { value: '#5d1f1a' },
+    '100': { value: '#42221f' },
+  },
+  orange: {
+    // DEFAULT: { value: '#e06c00' },
+    '10': { value: '#fff5db' },
+    '20': { value: '#fce4a6' },
+    '30': { value: '#fbc828' },
+    '40': { value: '#fca700' },
+    '50': { value: '#f68909' },
+    '60': { value: '#e06c00' },
+    '70': { value: '#bd5b00' },
+    '80': { value: '#9e4c00' },
+    '90': { value: '#693200' },
+    '100': { value: '#3a2c1f' },
+  },
+  yellow: {
+    // DEFAULT: { value: '#e5b00a' },
+    '10': { value: '#fefbf3' },
+    '20': { value: '#f9ecc4' },
+    '30': { value: '#f4dd96' },
+    '40': { value: '#efce67' },
+    '50': { value: '#eabf39' },
+    '60': { value: '#e5b00a' },
+    '70': { value: '#b68e0f' },
+    '80': { value: '#886c14' },
+    '90': { value: '#594918' },
+    '100': { value: '#2a271d' },
+  },
+  lime: {
+    // DEFAULT: { value: '#6a9a23' },
+    '10': { value: '#efffd6' },
+    '20': { value: '#d3f1a7' },
+    '30': { value: '#b3df72' },
+    '40': { value: '#94c748' },
+    '50': { value: '#82b536' },
+    '60': { value: '#6a9a23' },
+    '70': { value: '#5b7f24' },
+    '80': { value: '#4c6b1f' },
+    '90': { value: '#37471f' },
+    '100': { value: '#28311b' },
+  },
+  green: {
+    // DEFAULT: { value: '#22a06b' },
+    '10': { value: '#dcfff1' },
+    '20': { value: '#baf3db' },
+    '30': { value: '#7ee2b8' },
+    '40': { value: '#4bce97' },
+    '50': { value: '#2abb7f' },
+    '60': { value: '#22a06b' },
+    '70': { value: '#1f845a' },
+    '80': { value: '#216e4e' },
+    '90': { value: '#164b35' },
+    '100': { value: '#1c3329' },
+  },
+  teal: {
+    // DEFAULT: { value: '#2898bd' },
+    '10': { value: '#e7f9ff' },
+    '20': { value: '#c6edfb' },
+    '30': { value: '#9dd9ee' },
+    '40': { value: '#6cc3e0' },
+    '50': { value: '#42b2d7' },
+    '60': { value: '#2898bd' },
+    '70': { value: '#227d9b' },
+    '80': { value: '#206a83' },
+    '90': { value: '#164555' },
+    '100': { value: '#1e3137' },
+  },
+  blue: {
+    // DEFAULT: { value: '#357de8' },
+    '10': { value: '#e9f2fe' },
+    '20': { value: '#cfe1fd' },
+    '30': { value: '#8fb8f6' },
+    '40': { value: '#669df1' },
+    '50': { value: '#4688ec' },
+    '60': { value: '#357de8' },
+    '70': { value: '#1868db' },
+    '80': { value: '#1558bc' },
+    '90': { value: '#123263' },
+    '100': { value: '#1c2b42' },
+  },
+  indigo: {
+    // DEFAULT: { value: '#7665d1' },
+    '10': { value: '#f1eff7' },
+    '20': { value: '#e7e3fa' },
+    '30': { value: '#cbc4f2' },
+    '40': { value: '#afa5e8' },
+    '50': { value: '#9287d8' },
+    '60': { value: '#7665d1' },
+    '70': { value: '#5e519e' },
+    '80': { value: '#453c7b' },
+    '90': { value: '#2e2c40' },
+    '100': { value: '#18161d' },
+  },
+  purple: {
+    // DEFAULT: { value: '#af59e1' },
+    '10': { value: '#f8eefe' },
+    '20': { value: '#eed7fc' },
+    '30': { value: '#d8a0f7' },
+    '40': { value: '#c97cf4' },
+    '50': { value: '#bf63f3' },
+    '60': { value: '#af59e1' },
+    '70': { value: '#964ac0' },
+    '80': { value: '#803fa5' },
+    '90': { value: '#48245d' },
+    '100': { value: '#35243f' },
+  },
+  magenta: {
+    // DEFAULT: { value: '#cd519d' },
+    '10': { value: '#ffecf8' },
+    '20': { value: '#fdd0ec' },
+    '30': { value: '#f797d2' },
+    '40': { value: '#e774bb' },
+    '50': { value: '#da62ac' },
+    '60': { value: '#cd519d' },
+    '70': { value: '#ae4787' },
+    '80': { value: '#943d73' },
+    '90': { value: '#50253f' },
+    '100': { value: '#3d2232' },
+  },
+  tan: {
+    // DEFAULT: { value: '#8e704f' },
+    '10': { value: '#f5f0e6' },
+    '20': { value: '#f1e5cd' },
+    '30': { value: '#dec69a' },
+    '40': { value: '#c7a97b' },
+    '50': { value: '#ad8b65' },
+    '60': { value: '#8e704f' },
+    '70': { value: '#6b5947' },
+    '80': { value: '#4d4438' },
+    '90': { value: '#322d26' },
+    '100': { value: '#191714' },
+  },
+  slate: {
+    // DEFAULT: { value: '#1E1E1E' },
+    '0': { value: '#FFFFFF' },
+    '1': { value: '#FAFAFA' },
+    '2': { value: '#F9F8F6' },
+    '3': { value: '#F7F5F3' },
+    '4': { value: '#F6F3EF' },
+    '5': { value: '#F4F0EB' },
+    '10': { value: '#E3E1DE' },
+    '20': { value: '#CBCAC8' },
+    '30': { value: '#AFADAB' },
+    '40': { value: '#939190' },
+    '50': { value: '#767675' },
+    '60': { value: '#5F5F5E' },
+    '70': { value: '#474747' },
+    '80': { value: '#2E2E2E' },
+    '90': { value: '#1E1E1E' },
+    '100': { value: '#000000' },
+  },
+});