@okshaun/components 0.5.8 → 1.0.1

package/src/recipes/text.ts

@@ -0,0 +1,193 @@
+import { defineRecipe } from '@pandacss/dev';
+import {
+  fontSizes as fontSizeTokens,
+  fontWeights as fontWeightTokens,
+} from '../styles/primitives';
+
+const textBase = {
+  margin: '0',
+  lineHeight: 'default',
+  fontWeight: 'normal',
+  fontSize: '16',
+  color: 'text.subtlest',
+  maxWidth: 'prose',
+};
+
+type FontSizeKey = keyof typeof fontSizeTokens;
+const fontSizes = (Object.keys(fontSizeTokens) as FontSizeKey[]).reduce(
+  (accumulator, currentKey) => {
+    accumulator[currentKey] = { fontSize: fontSizeTokens[currentKey].value };
+    return accumulator;
+  },
+  {} as Record<FontSizeKey, Record<'fontSize', string>>,
+);
+
+type FontWeightKey = keyof typeof fontWeightTokens;
+const fontWeights = (Object.keys(fontWeightTokens) as FontWeightKey[]).reduce(
+  (accumulator, currentKey) => {
+    accumulator[currentKey] = {
+      fontWeight: fontWeightTokens[currentKey].value,
+    };
+    return accumulator;
+  },
+  {} as Record<FontWeightKey, Record<'fontWeight', number>>,
+);
+
+const textVariants = {
+  family: {
+    heading: { fontFamily: 'heading' },
+    body: { fontFamily: 'body' },
+    sans: { fontFamily: 'sans' },
+    serif: { fontFamily: 'serif' },
+    mono: { fontFamily: 'mono' },
+    inherit: { fontFamily: 'inherit' },
+  },
+  bold: {
+    true: {
+      fontWeight: 'bold',
+    },
+  },
+  italic: {
+    true: {
+      fontStyle: 'italic',
+    },
+  },
+  underline: {
+    true: {
+      textDecoration: 'underline',
+    },
+  },
+  truncate: {
+    true: {
+      width: 'full',
+      maxWidth: 'full',
+      textOverflow: 'ellipsis',
+      overflow: 'hidden',
+      whiteSpace: 'nowrap',
+    },
+  },
+  allcaps: {
+    true: {
+      textTransform: 'uppercase',
+      fontWeight: 'bold',
+      letterSpacing: 'widest',
+    },
+  },
+  size: fontSizes,
+  weight: fontWeights,
+};
+
+const headingBase = {
+  fontFamily: 'heading',
+  fontWeight: 'black',
+  color: 'text.bold',
+  lineHeight: 'default',
+};
+
+const headingVariants = {
+  level: {
+    h1: { textStyle: 'heading.lg' },
+    h2: { textStyle: 'heading.md' },
+    h3: { textStyle: 'heading.sm' },
+    h4: { textStyle: 'heading.xs' },
+  },
+  allcaps: {
+    true: {
+      textTransform: 'uppercase',
+      letterSpacing: 'widest',
+    },
+  },
+};
+
+const linkBase = {
+  display: 'inline-flex',
+  alignItems: 'center',
+  fontWeight: 'medium',
+  gap: '1',
+  color: { base: 'blue.70', _dark: 'blue.40' },
+  backgroundImage: 'linear-gradient(90deg, transparent 0% 100%)',
+  backgroundSize: '100% 1px',
+  backgroundRepeat: 'no-repeat',
+  backgroundPositionY: '100%',
+  width: 'fit-content',
+  cursor: 'pointer',
+  textDecoration: 'none',
+  _hover: {
+    color: { base: 'blue.60', _dark: 'blue.40' },
+    backgroundColor: { base: 'blue.10', _dark: 'blue.100' },
+    backgroundImage: 'linear-gradient(90deg, currentColor 0% 100%)',
+  },
+  'p &': {
+    backgroundImage: 'linear-gradient(90deg, currentColor 0% 100%)',
+  },
+};
+
+const linkVariants = {
+  ...textVariants,
+  _disabled: {
+    true: {
+      cursor: 'not-allowed',
+      color: 'text.disabled',
+      pointerEvents: 'none',
+    },
+  },
+};
+
+const labelBase = {
+  fontSize: '14',
+  fontWeight: 'normal',
+  lineHeight: 'tight',
+  cursor: 'default',
+};
+
+//Copied linkvarients, don't have styles defined for this yet
+const labelVariants = {
+  ...textVariants,
+  _disabled: {
+    true: {
+      cursor: 'not-allowed',
+      color: 'text.disabled',
+      pointerEvents: 'none',
+    },
+  },
+};
+
+export const textRecipe = defineRecipe({
+  className: 'text',
+  jsx: ['Text'],
+  base: textBase,
+  variants: textVariants,
+  defaultVariants: {
+    family: 'inherit',
+  },
+});
+
+export const headingRecipe = defineRecipe({
+  className: 'heading',
+  jsx: ['Heading'],
+  base: headingBase,
+  variants: headingVariants,
+  defaultVariants: {
+    level: 'h2',
+  },
+});
+
+export const linkRecipe = defineRecipe({
+  className: 'link',
+  jsx: ['Link'],
+  base: linkBase,
+  variants: linkVariants,
+  defaultVariants: {
+    family: 'inherit',
+  },
+});
+
+export const labelRecipe = defineRecipe({
+  className: 'label',
+  jsx: ['Label'],
+  base: labelBase,
+  variants: labelVariants,
+  defaultVariants: {
+    family: 'sans',
+  },
+});

package/src/recipes/textarea.ts

@@ -0,0 +1,153 @@
+import { defineRecipe } from '@pandacss/dev';
+
+const textareaVariants = {
+  size: {
+    md: {
+      py: '3',
+      px: '10',
+      fontSize: '16',
+      minHeight: '64',
+    },
+    sm: {
+      py: '0',
+      px: '8',
+      minHeight: '48',
+      fontSize: '14',
+    },
+    lg: {
+      py: '7',
+      px: '12',
+      fontSize: '16',
+      minHeight: '80',
+    },
+    xl: {
+      py: '9',
+      px: '16',
+      fontSize: '20',
+      minHeight: '96',
+    },
+  },
+  autoSize: {
+    false: {
+      width: 'full',
+    },
+    true: {
+      width: 'fit-content',
+      fieldSizing: 'content',
+    },
+  },
+  // stacked: {
+  //   true: {
+  //     gridTemplateRows: 'auto 1fr',
+  //     alignItems: 'stretch',
+  //     '&::after, & textarea': {
+  //       gridArea: '2 / 1',
+  //     },
+  //     '& textarea': {
+  //       background: { base: 'gray.10', _dark: 'gray.90' },
+  //       borderColor: { base: 'gray.40', _dark: 'gray.100' },
+  //       // _hover: {
+  //       //   borderColor: { base: 'gray.20', _dark: 'gray.30' },
+  //       // },
+  //       // _focus: {
+  //       //   borderColor: { base: 'gray.90', _dark: 'gray.10' },
+  //       // },
+  //     },
+  //   },
+  //   false: {
+  //     gridTemplateColumns: 'auto 1fr',
+  //     alignItems: 'center',
+  //     '& textarea': {
+  //       background: { base: 'gray.10', _dark: 'gray.90' },
+  //       borderColor: { base: 'green.40', _dark: 'green.50' },
+  //       // _hover: {
+  //       //   borderColor: { base: 'gray.20', _dark: 'gray.30' },
+  //       // },
+  //       // _focus: {
+  //       //   borderColor: { base: 'gray.90', _dark: 'gray.10' },
+  //       // },
+  //     },
+  //   },
+  // },
+  // internalLabel: {
+  //   false: {},
+  //   true: {
+  //     // _focusWithin: {
+  //     //   outlineWidth: 1,
+  //     //   outlineStyle: 'solid',
+  //     //   outlineColor: { base: 'gray.90', _dark: 'gray.10' },
+  //     //   // outlineOffset: 2,
+  //     //   ml: '-4',
+  //     // },
+  //   },
+  // },
+};
+
+const textareaBase = {
+  display: 'inline-grid',
+  position: 'relative',
+  width: 'full',
+  verticalAlign: 'top',
+  borderWidth: '1',
+  borderStyle: 'solid',
+  borderColor: 'border.input',
+  borderRadius: '4',
+  outlineWidth: '2',
+  outlineOffset: '-1',
+  outlineStyle: 'solid',
+  outlineColor: 'transparent',
+  lineHeight: 'default',
+  fontFamily: 'body',
+  bg: 'bg.input',
+  color: 'text',
+  transitionDuration: 'fast',
+  transitionProperty: 'background, border-color, color, outline-color',
+  transitionTimingFunction: 'default',
+  _placeholder: {
+    color: 'text.placeholder',
+  },
+  // _hover: {
+  //   bg: 'bg.input.hovered',
+  // },
+  _focus: {
+    bg: 'bg.input.pressed',
+    borderColor: 'border.focused',
+    outlineColor: 'border.focused',
+  },
+  _disabled: {
+    bg: 'bg.disabled',
+    borderColor: 'border.disabled',
+    color: 'text.disabled',
+  },
+  _error: {
+    display: 'inline-grid',
+    bg: 'bg.danger',
+    borderColor: 'border.danger',
+    color: 'text.danger',
+    _placeholder: {
+      color: 'text.danger/60',
+    },
+    _hover: {
+      bg: 'bg.danger.hovered',
+      borderColor: 'border.danger',
+    },
+    _focus: {
+      bg: 'bg.danger',
+      borderColor: 'border.danger',
+      outlineColor: 'border.danger',
+    },
+  },
+};
+
+export const textareaRecipe = defineRecipe({
+  className: 'textarea',
+  jsx: ['Textarea'],
+  base: textareaBase,
+  variants: textareaVariants,
+  defaultVariants: {
+    size: 'md',
+    // stacked: true,
+    // internalLabel: false,
+    // autoGrow: false,
+  },
+});

package/src/recipes/textinput.ts

@@ -0,0 +1,100 @@
+import { defineRecipe } from '@pandacss/dev';
+
+const textInputVariants = {
+  size: {
+    md: {
+      py: 3,
+      px: 10,
+      fontSize: '16',
+    },
+    sm: {
+      py: 0,
+      px: 8,
+      fontSize: '14',
+    },
+    lg: {
+      py: 7,
+      px: 12,
+      fontSize: '16',
+    },
+    xl: {
+      fontSize: '20',
+      py: '9',
+      px: '16',
+    },
+  },
+  autoSize: {
+    false: {
+      width: 'full',
+    },
+    true: {
+      width: 'fit-content',
+      fieldSizing: 'content',
+    },
+  },
+};
+
+const textInputBase = {
+  display: 'inline-grid',
+  position: 'relative',
+  width: 'full',
+  borderWidth: '1',
+  borderStyle: 'solid',
+  borderColor: 'border.input',
+  borderRadius: '4',
+  outlineWidth: '2',
+  outlineOffset: '-1',
+  outlineStyle: 'solid',
+  outlineColor: 'transparent',
+  lineHeight: 'default',
+  fontFamily: 'body',
+  bg: 'bg.input',
+  color: 'text',
+  transitionDuration: 'fast',
+  transitionProperty: 'background, border-color, color, outline-color',
+  transitionTimingFunction: 'default',
+  _placeholder: {
+    color: 'text.placeholder',
+  },
+  // _hover: {
+  // bg: 'bg.input.hovered',
+  // },
+  _focus: {
+    bg: 'bg.input.pressed',
+    borderColor: 'border.focused',
+    outlineColor: 'border.focused',
+  },
+  _disabled: {
+    bg: 'bg.disabled',
+    borderColor: 'border.disabled',
+    color: 'text.disabled',
+  },
+  _error: {
+    display: 'inline-grid',
+    bg: 'bg.danger',
+    borderColor: 'border.danger',
+    color: 'text.danger',
+    _placeholder: {
+      color: 'text.danger/60',
+    },
+    _hover: {
+      bg: 'bg.danger.hovered',
+      borderColor: 'border.danger',
+    },
+    _focus: {
+      bg: 'bg.danger',
+      borderColor: 'border.danger',
+      outlineColor: 'border.danger',
+    },
+  },
+};
+
+export const textinputRecipe = defineRecipe({
+  className: 'textinput',
+  jsx: ['TextInput'],
+  base: textInputBase,
+  variants: textInputVariants,
+  defaultVariants: {
+    size: 'md',
+  },
+});

package/src/recipes/themeSwitcher.ts

@@ -0,0 +1,48 @@
+import { defineRecipe } from '@pandacss/dev';
+
+export const themeSwitcherRecipe = defineRecipe({
+  className: 'themeSwitcher',
+  jsx: ['ThemeSwitcher'],
+  base: {
+    position: 'relative',
+    borderWidth: '2',
+    borderStyle: 'solid',
+    borderColor: 'border',
+    bg: 'transparent',
+    color: 'transparent',
+    margin: '8',
+    borderRadius: '100',
+    cursor: 'pointer',
+    display: 'grid',
+    lineHeight: 'none',
+    width: '14',
+    height: '14',
+    minWidth: '14',
+    minHeight: '14',
+    flexShrink: 0,
+    aspectRatio: 'square',
+    transition: 'all',
+    '&:before': {
+      content: '""',
+      position: 'absolute',
+      inset: '0',
+      opacity: 0,
+      display: 'block',
+      borderRadius: '100',
+      bg: 'bg.neutral.inverse.bold',
+      transition: 'all',
+      transitionTimingFunction: 'default',
+      transitionDuration: 'normal',
+    },
+    _hover: {
+      cursor: 'pointer',
+      bg: 'bg.neutral.inverse.bold',
+      borderColor: 'bg.neutral.bold',
+      '&:before': {
+        inset: '-8',
+        bg: 'bg.neutral.inverse.bold',
+        opacity: 0.25,
+      },
+    },
+  },
+});

package/src/recipes/toggle.ts

@@ -0,0 +1,116 @@
+import { defineSlotRecipe } from '@pandacss/dev';
+
+const toggleBase = {
+  container: {
+    position: 'relative',
+    w: '40',
+    h: '24',
+    cursor: 'pointer',
+    _disabled: {
+      opacity: 0.4,
+      pointerEvents: 'none',
+      cursor: 'none',
+      display: 'inline-grid',
+    },
+  },
+
+  background: {
+    position: 'absolute',
+    w: '40',
+    h: '24',
+    rounded: '24',
+    bg: 'surface',
+    transitionProperty: 'border-color, background-color',
+    transitionDuration: '200ms',
+    transitionTimingFunction: 'ease-in-out',
+    borderWidth: '2',
+    borderStyle: 'solid',
+    borderColor: 'border',
+  },
+
+  input: {
+    position: 'absolute',
+    opacity: 0,
+    w: '40',
+    h: '24',
+    rounded: '24',
+    m: 0,
+    p: 0,
+    border: 'none',
+    zIndex: 0,
+    cursor: 'inherit',
+
+    "& ~ [name='circle']": {
+      display: 'inline-grid',
+      position: 'absolute',
+      opacity: 1,
+      transform: 'translateX(0)',
+      transitionProperty: 'transform, opacity',
+      transitionDuration: '200ms',
+      transitionTimingFunction: 'ease-in-out',
+      fill: 'icon.decorative/80',
+    },
+
+    "& ~ [name='circle-check']": {
+      display: 'inline-grid',
+      position: 'absolute',
+      opacity: 0,
+      transform: 'translateX(0)',
+      transitionProperty: 'transform, opacity',
+      transitionDuration: '200ms',
+      transitionTimingFunction: 'ease-in-out',
+    },
+
+    _checked: {
+      "& ~ [name='circle']": {
+        opacity: 0,
+        transform: 'translateX(10px)',
+      },
+      "& ~ [name='circle-check']": {
+        opacity: 1,
+        transform: 'translateX(16px)',
+        fill: 'icon.inverse',
+      },
+      "& ~ [name='toggle-bg']": {
+        bg: 'bg.neutral.inverse',
+        borderColor: 'bg.neutral.inverse',
+      },
+    },
+    _error: {
+      "& ~ [name='toggle-bg']": {
+        borderColor: 'error.default',
+      },
+    },
+
+    _focusVisible: {
+      appearance: 'none',
+      opacity: 1,
+      outlineColor: { base: 'gray.80', _dark: 'gray.10' },
+      outlineOffset: 1,
+      outlineWidth: 2,
+      outlineStyle: 'solid',
+      rounded: '24',
+      w: '40',
+      h: '24',
+    },
+  },
+
+  indicator: {
+    display: 'none',
+    w: '24',
+    h: '24',
+    transitionProperty: 'border-color, background-color',
+    transitionDuration: '200ms',
+    transitionTimingFunction: 'ease-in-out',
+    "&:is([name='circle'])": {
+      fill: { base: 'gray.20', _dark: 'gray.40' },
+    },
+  },
+};
+
+export const toggleRecipe = defineSlotRecipe({
+  className: 'toggle',
+  jsx: ['toggle'],
+  slots: ['container', 'input', 'indicator', 'background'],
+  base: toggleBase,
+});

package/src/recipes/toggleinput.ts

@@ -0,0 +1,16 @@
+import { defineRecipe } from '@pandacss/dev';
+
+const toggleInputBase = {
+  display: 'grid',
+  gap: '8',
+  gridTemplateColumns: '40px auto',
+  userSelect: 'none',
+  fontSize: '16',
+};
+
+export const toggleInputRecipe = defineRecipe({
+  className: 'toggle-input',
+  jsx: ['ToggleInput'],
+  base: toggleInputBase,
+  variants: {},
+});