@okshaun/components 1.0.1 → 2.0.0

package/src/recipes/tag.ts

@@ -1,74 +1,66 @@
 import { defineRecipe } from '@pandacss/dev';
 
-const tagBase = {
-  display: 'flex',
-  py: '0',
-  borderRadius: '2',
-  gap: '1',
-  h: '20',
-  px: '4',
-  fontFamily: 'sans',
-  fontSize: '14',
-  fontWeight: '500',
-  whiteSpace: 'nowrap',
-  width: 'fit-content',
-  //   lineHeight: 'none',
-};
-
-const tagVariant = {
-  appearance: {
-    default: {},
-    bold: {},
-  },
-  hue: {
-    gray: {},
-    red: {},
-    orange: {},
-    yellow: {},
-    lime: {},
-    green: {},
-    teal: {},
-    blue: {},
-    indigo: {},
-    purple: {},
-    magenta: {},
-    tan: {},
+export const tagRecipe = defineRecipe({
+  className: 'tag',
+  jsx: ['Tag'],
+  base: {
+    display: 'flex',
+    alignItems: 'center',
+    py: '0',
+    borderRadius: '2',
+    gap: '1',
+    px: '4',
+    w: 'fit',
+    h: '20',
+    fontSize: '14',
+    fontWeight: 'medium',
+    lineHeight: 'tight',
+    whiteSpace: 'nowrap',
   },
-  iconPosition: {
-    left: {
-      flexDirection: 'row',
-      gap: '1',
-      pl: '1',
+  variants: {
+    variant: {
+      default: {},
+      bold: {},
     },
-    right: {
-      flexDirection: 'row-reverse',
-      gap: '1',
-      pr: '1',
+    hue: {
+      gray: {},
+      red: {},
+      orange: {},
+      yellow: {},
+      lime: {},
+      green: {},
+      teal: {},
+      blue: {},
+      indigo: {},
+      purple: {},
+      magenta: {},
+      tan: {},
     },
-  },
-  hasIcon: {
-    true: {},
-    false: {
-      px: 4,
+    iconBefore: {
+      true: {
+        gap: '1',
+        pl: '1',
+      },
+      false: {},
+    },
+    iconAfter: {
+      true: {
+        gap: '1',
+        pr: '1',
+      },
+      false: {},
+    },
+    hasIcon: {
+      true: {},
+      false: {
+        px: '4',
+      },
     },
-  },
-};
-
-export const tagRecipe = defineRecipe({
-  className: 'tag',
-  jsx: ['Tag'],
-  base: tagBase,
-  variants: tagVariant,
-  defaultVariants: {
-    appearance: 'default',
-    hue: 'gray',
-    iconPosition: 'left',
-    hasIcon: false,
   },
   compoundVariants: [
     {
       hue: 'gray',
-      appearance: 'default',
+      variant: 'default',
       css: {
         color: 'text.subtle',
         bg: 'bg.neutral',
@@ -76,7 +68,7 @@ export const tagRecipe = defineRecipe({
     },
     {
       hue: 'gray',
-      appearance: 'bold',
+      variant: 'bold',
       css: {
         color: 'text.inverse',
         bg: 'bg.neutral.boldest',
@@ -84,7 +76,7 @@ export const tagRecipe = defineRecipe({
     },
     {
       hue: 'red',
-      appearance: 'default',
+      variant: 'default',
       css: {
         color: { base: 'red.70', _dark: 'red.20' },
         bg: { base: 'red.20', _dark: 'red.100' },
@@ -92,7 +84,7 @@ export const tagRecipe = defineRecipe({
     },
     {
       hue: 'red',
-      appearance: 'bold',
+      variant: 'bold',
       css: {
         color: { base: 'red.10', _dark: 'red.100' },
         bg: { base: 'red.60', _dark: 'red.40' },
@@ -100,7 +92,7 @@ export const tagRecipe = defineRecipe({
     },
     {
       hue: 'orange',
-      appearance: 'default',
+      variant: 'default',
       css: {
         color: { base: 'orange.70', _dark: 'orange.20' },
         bg: { base: 'orange.20', _dark: 'orange.100' },
@@ -108,7 +100,7 @@ export const tagRecipe = defineRecipe({
     },
     {
       hue: 'orange',
-      appearance: 'bold',
+      variant: 'bold',
       css: {
         color: { base: 'orange.10', _dark: 'orange.100' },
         bg: { base: 'orange.60', _dark: 'orange.50' },
@@ -116,7 +108,7 @@ export const tagRecipe = defineRecipe({
     },
     {
       hue: 'yellow',
-      appearance: 'default',
+      variant: 'default',
       css: {
         color: { base: 'yellow.80', _dark: 'yellow.50' },
         bg: { base: 'yellow.20', _dark: 'yellow.90' },
@@ -124,7 +116,7 @@ export const tagRecipe = defineRecipe({
     },
     {
       hue: 'yellow',
-      appearance: 'bold',
+      variant: 'bold',
       css: {
         color: { base: 'yellow.100', _dark: 'yellow.100' },
         bg: { base: 'yellow.40', _dark: 'yellow.60' },
@@ -132,7 +124,7 @@ export const tagRecipe = defineRecipe({
     },
     {
       hue: 'lime',
-      appearance: 'default',
+      variant: 'default',
       css: {
         color: { base: 'lime.70', _dark: 'lime.20' },
         bg: { base: 'lime.20', _dark: 'lime.90' },
@@ -140,7 +132,7 @@ export const tagRecipe = defineRecipe({
     },
     {
       hue: 'lime',
-      appearance: 'bold',
+      variant: 'bold',
       css: {
         color: { base: 'lime.10', _dark: 'lime.100' },
         bg: { base: 'lime.60', _dark: 'lime.40' },
@@ -148,7 +140,7 @@ export const tagRecipe = defineRecipe({
     },
     {
       hue: 'green',
-      appearance: 'default',
+      variant: 'default',
       css: {
         color: { base: 'green.70', _dark: 'green.20' },
         bg: { base: 'green.20', _dark: 'green.90' },
@@ -156,7 +148,7 @@ export const tagRecipe = defineRecipe({
     },
     {
       hue: 'green',
-      appearance: 'bold',
+      variant: 'bold',
       css: {
         color: { base: 'gray.10', _dark: 'green.100' },
         bg: { base: 'green.70', _dark: 'green.40' },
@@ -164,7 +156,7 @@ export const tagRecipe = defineRecipe({
     },
     {
       hue: 'teal',
-      appearance: 'default',
+      variant: 'default',
       css: {
         color: { base: 'teal.80', _dark: 'teal.20' },
         bg: { base: 'teal.20', _dark: 'teal.90' },
@@ -172,7 +164,7 @@ export const tagRecipe = defineRecipe({
     },
     {
       hue: 'teal',
-      appearance: 'bold',
+      variant: 'bold',
       css: {
         color: { base: 'teal.10', _dark: 'teal.100' },
         bg: { base: 'teal.60', _dark: 'teal.50' },
@@ -180,7 +172,7 @@ export const tagRecipe = defineRecipe({
     },
     {
       hue: 'blue',
-      appearance: 'default',
+      variant: 'default',
       css: {
         color: { base: 'blue.70', _dark: 'blue.20' },
         bg: { base: 'blue.20', _dark: 'blue.90' },
@@ -188,7 +180,7 @@ export const tagRecipe = defineRecipe({
     },
     {
       hue: 'blue',
-      appearance: 'bold',
+      variant: 'bold',
       css: {
         color: { base: 'blue.10', _dark: 'blue.10' },
         bg: { base: 'blue.50', _dark: 'blue.70' },
@@ -196,7 +188,7 @@ export const tagRecipe = defineRecipe({
     },
     {
       hue: 'indigo',
-      appearance: 'default',
+      variant: 'default',
       css: {
         color: { base: 'indigo.70', _dark: 'indigo.20' },
         bg: { base: 'indigo.20', _dark: 'indigo.90' },
@@ -204,7 +196,7 @@ export const tagRecipe = defineRecipe({
     },
     {
       hue: 'indigo',
-      appearance: 'bold',
+      variant: 'bold',
       css: {
         color: { base: 'indigo.10', _dark: 'indigo.10' },
         bg: { base: 'indigo.60', _dark: 'indigo.70' },
@@ -212,7 +204,7 @@ export const tagRecipe = defineRecipe({
     },
     {
       hue: 'purple',
-      appearance: 'default',
+      variant: 'default',
       css: {
         color: { base: 'purple.70', _dark: 'purple.20' },
         bg: { base: 'purple.20', _dark: 'purple.90' },
@@ -220,7 +212,7 @@ export const tagRecipe = defineRecipe({
     },
     {
       hue: 'purple',
-      appearance: 'bold',
+      variant: 'bold',
       css: {
         color: { base: 'purple.10', _dark: 'purple.10' },
         bg: { base: 'purple.60', _dark: 'purple.80' },
@@ -228,7 +220,7 @@ export const tagRecipe = defineRecipe({
     },
     {
       hue: 'magenta',
-      appearance: 'default',
+      variant: 'default',
       css: {
         color: { base: 'magenta.80', _dark: 'magenta.20' },
         bg: { base: 'magenta.20', _dark: 'magenta.90' },
@@ -236,7 +228,7 @@ export const tagRecipe = defineRecipe({
     },
     {
       hue: 'magenta',
-      appearance: 'bold',
+      variant: 'bold',
       css: {
         color: { base: 'magenta.10', _dark: 'magenta.10' },
         bg: { base: 'magenta.70', _dark: 'magenta.70' },
@@ -244,7 +236,7 @@ export const tagRecipe = defineRecipe({
     },
     {
       hue: 'tan',
-      appearance: 'default',
+      variant: 'default',
       css: {
         color: { base: 'tan.70', _dark: 'tan.20' },
         bg: { base: 'tan.20', _dark: 'tan.80' },
@@ -252,11 +244,15 @@ export const tagRecipe = defineRecipe({
     },
     {
       hue: 'tan',
-      appearance: 'bold',
+      variant: 'bold',
       css: {
         color: { base: 'gray.10', _dark: 'tan.90' },
         bg: { base: 'tan.60', _dark: 'tan.40' },
       },
     },
   ],
+  defaultVariants: {
+    variant: 'default',
+    hue: 'gray',
+  },
 });

package/src/recipes/text.ts

@@ -8,7 +8,7 @@ const textBase = {
   margin: '0',
   lineHeight: 'default',
   fontWeight: 'normal',
-  fontSize: '16',
+  fontSize: '{sizes.16}',
   color: 'text.subtlest',
   maxWidth: 'prose',
 };
@@ -66,7 +66,7 @@ const textVariants = {
       whiteSpace: 'nowrap',
     },
   },
-  allcaps: {
+  allCaps: {
     true: {
       textTransform: 'uppercase',
       fontWeight: 'bold',
@@ -91,7 +91,7 @@ const headingVariants = {
     h3: { textStyle: 'heading.sm' },
     h4: { textStyle: 'heading.xs' },
   },
-  allcaps: {
+  allCaps: {
     true: {
       textTransform: 'uppercase',
       letterSpacing: 'widest',
@@ -104,21 +104,25 @@ const linkBase = {
   alignItems: 'center',
   fontWeight: 'medium',
   gap: '1',
-  color: { base: 'blue.70', _dark: 'blue.40' },
+  color: 'link',
+  textDecoration: 'none',
   backgroundImage: 'linear-gradient(90deg, transparent 0% 100%)',
-  backgroundSize: '100% 1px',
+  backgroundSize: '100% {sizes.1}',
   backgroundRepeat: 'no-repeat',
   backgroundPositionY: '100%',
+  outlineWidth: '2',
+  outlineStyle: 'solid',
+  outlineColor: 'transparent',
+  outlineOffset: '1',
   width: 'fit-content',
   cursor: 'pointer',
-  textDecoration: 'none',
   _hover: {
-    color: { base: 'blue.60', _dark: 'blue.40' },
-    backgroundColor: { base: 'blue.10', _dark: 'blue.100' },
+    color: 'link',
     backgroundImage: 'linear-gradient(90deg, currentColor 0% 100%)',
   },
-  'p &': {
-    backgroundImage: 'linear-gradient(90deg, currentColor 0% 100%)',
+  _focusVisible: {
+    borderRadius: '{sizes.4}',
+    outlineColor: 'border.focused',
   },
 };
 
@@ -127,17 +131,18 @@ const linkVariants = {
   _disabled: {
     true: {
       cursor: 'not-allowed',
-      color: 'text.disabled',
+      opacity: '40%',
       pointerEvents: 'none',
     },
   },
 };
 
 const labelBase = {
-  fontSize: '14',
+  fontSize: '{sizes.16}',
   fontWeight: 'normal',
   lineHeight: 'tight',
   cursor: 'default',
+  color: 'text',
 };
 
 //Copied linkvarients, don't have styles defined for this yet
@@ -146,7 +151,7 @@ const labelVariants = {
   _disabled: {
     true: {
       cursor: 'not-allowed',
-      color: 'text.disabled',
+      opacity: '70%',
       pointerEvents: 'none',
     },
   },
@@ -157,9 +162,6 @@ export const textRecipe = defineRecipe({
   jsx: ['Text'],
   base: textBase,
   variants: textVariants,
-  defaultVariants: {
-    family: 'inherit',
-  },
 });
 
 export const headingRecipe = defineRecipe({
@@ -177,9 +179,6 @@ export const linkRecipe = defineRecipe({
   jsx: ['Link'],
   base: linkBase,
   variants: linkVariants,
-  defaultVariants: {
-    family: 'inherit',
-  },
 });
 
 export const labelRecipe = defineRecipe({

package/src/recipes/textInput.ts

@@ -0,0 +1,205 @@
+import { defineSlotRecipe } from '@pandacss/dev';
+
+const textInputBase = {
+  container: {
+    position: 'relative',
+    width: 'full',
+    bg: 'surface',
+    borderWidth: '{sizes.1}',
+    borderStyle: 'solid',
+    borderColor: 'border.input',
+    borderRadius: '{sizes.4}',
+    outlineWidth: '{sizes.1}',
+    outlineStyle: 'solid',
+    outlineColor: 'transparent',
+    overflow: 'hidden',
+    lineHeight: 'none',
+    _focusWithin: {
+      outlineColor: 'border.focused',
+      borderColor: 'border.focused',
+    },
+    _error: {
+      borderColor: 'border.danger',
+      _focusWithin: {
+        borderColor: 'border.danger',
+        outlineColor: 'border.danger',
+      },
+    },
+    _disabled: {
+      opacity: '40%',
+      cursor: 'not-allowed',
+      _focusWithin: {
+        outlineColor: 'transparent',
+        borderColor: 'border.input',
+      },
+    },
+    _groupDisabled: {
+      opacity: 1, // let FormField handle disabled state opacity
+    },
+  },
+  input: {
+    width: 'full',
+    bg: 'surface',
+    color: 'text',
+    lineHeight: 'default',
+    fontFamily: 'sans',
+    border: 'none',
+    outline: 'none',
+    _placeholder: {
+      color: 'text.placeholder',
+    },
+  },
+  icon: {
+    position: 'absolute',
+    top: '50%',
+    transform: 'translateY(-50%)',
+    fill: 'icon.decorative.subtle',
+    mixBlendMode: { base: 'multiply', _dark: 'screen' },
+    pointerEvents: 'none',
+    zIndex: 1,
+  },
+};
+
+const textInputVariants = {
+  size: {
+    sm: {
+      input: {
+        py: '0',
+        px: '{sizes.8}',
+        fontSize: '{sizes.14}',
+      },
+      icon: {
+        mx: '2',
+        w: '{sizes.22}',
+      },
+    },
+    md: {
+      input: {
+        py: '3',
+        px: '{sizes.10}',
+        fontSize: '{sizes.16}',
+      },
+      icon: {
+        mx: '3',
+        w: '{sizes.24}',
+      },
+    },
+    lg: {
+      input: {
+        py: '7',
+        px: '{sizes.12}',
+        fontSize: '{sizes.16}',
+      },
+      icon: {
+        mx: '5',
+        w: '{sizes.24}',
+      },
+    },
+    xl: {
+      input: {
+        py: '9',
+        px: '{sizes.16}',
+        fontSize: '{sizes.20}',
+      },
+      icon: {
+        mx: '7',
+        w: '{sizes.28}',
+      },
+    },
+  },
+  iconBefore: {
+    true: {
+      icon: {
+        left: '0',
+      },
+    },
+  },
+  iconAfter: {
+    true: {
+      icon: {
+        right: '0',
+      },
+    },
+  },
+  autoSize: {
+    true: {
+      input: {
+        fieldSizing: 'content',
+        maxW: 'full',
+      },
+    },
+  },
+};
+
+const textInputCompoundVariants: NonNullable<
+  Parameters<typeof defineSlotRecipe>[0]['compoundVariants']
+> = [
+  {
+    size: 'sm',
+    iconBefore: true,
+    css: {
+      input: { ps: '[calc({sizes.24} + {sizes.2})]' },
+    },
+  },
+  {
+    size: 'sm',
+    iconAfter: true,
+    css: {
+      input: { pe: '[calc({sizes.24} + {sizes.2})]' },
+    },
+  },
+  {
+    size: 'md',
+    iconBefore: true,
+    css: {
+      input: { ps: '[calc({sizes.24} + {sizes.7})]' },
+    },
+  },
+  {
+    size: 'md',
+    iconAfter: true,
+    css: {
+      input: { pe: '[calc({sizes.24} + {sizes.7})]' },
+    },
+  },
+  {
+    size: 'lg',
+    iconBefore: true,
+    css: {
+      input: { ps: '[calc({sizes.24} + {sizes.10})]' },
+    },
+  },
+  {
+    size: 'lg',
+    iconAfter: true,
+    css: {
+      input: { pe: '[calc({sizes.24} + {sizes.10})]' },
+    },
+  },
+  {
+    size: 'xl',
+    iconBefore: true,
+    css: {
+      input: { ps: '[calc({sizes.32} + {sizes.10})]' },
+    },
+  },
+  {
+    size: 'xl',
+    iconAfter: true,
+    css: {
+      input: { pe: '[calc({sizes.32} + {sizes.10})]' },
+    },
+  },
+];
+
+export const textInputRecipe = defineSlotRecipe({
+  className: 'textInput',
+  jsx: ['TextInput', 'Textinput'],
+  slots: ['container', 'input', 'icon'],
+  base: textInputBase,
+  variants: textInputVariants,
+  compoundVariants: textInputCompoundVariants,
+  defaultVariants: {
+    size: 'md',
+  },
+});