@okshaun/components 0.5.8 → 1.0.1

package/src/recipes/radio.ts

@@ -0,0 +1,71 @@
+import { defineSlotRecipe } from '@pandacss/dev';
+
+export const radioRecipe = defineSlotRecipe({
+  className: 'radio',
+  jsx: ['Radio'],
+  slots: ['container', 'input', 'indicator'],
+  base: {
+    container: {
+      position: 'relative',
+      display: 'inline-grid',
+      gridTemplateColumns: 'auto 1fr',
+      gap: 4,
+      alignItems: 'start',
+      cursor: 'pointer',
+      userSelect: 'none',
+    },
+    input: {
+      position: 'absolute',
+      opacity: 0,
+      width: 'full',
+      height: 'full',
+      margin: '0',
+      padding: '0',
+      zIndex: 1,
+      cursor: 'inherit',
+      "& ~ [name='radio']": {
+        display: 'inline-grid',
+      },
+      _checked: {
+        "& ~ [name='radio-checked']": {
+          display: 'inline-grid',
+          fill: { base: 'gray.90', _dark: 'gray.10' },
+        },
+        "& ~ [name='radio']": {
+          display: 'none',
+        },
+      },
+      _disabled: {
+        '& ~ svg': {
+          opacity: 0.4,
+          pointerEvents: 'none',
+          cursor: 'none',
+        },
+        display: 'inline-grid',
+      },
+      _error: {
+        display: 'inline-grid',
+        '& ~ svg': {
+          fill: 'red.50',
+        },
+      },
+      _focusVisible: {
+        "& ~ [name='radio-focus']": {
+          display: 'inline-grid',
+          position: 'absolute',
+          fill: { base: 'gray.90', _dark: 'gray.1' },
+        },
+      },
+    },
+    indicator: {
+      placeContent: 'center',
+      display: 'none',
+      width: 24,
+      height: 24,
+      "&:is([name='radio'])": {
+        display: 'inline-grid',
+        fill: 'gray.20',
+      },
+    },
+  },
+});

package/src/recipes/radioinput.ts

@@ -0,0 +1,12 @@
+import { defineRecipe } from '@pandacss/dev';
+
+const radioInputBase = {
+  display: 'flex',
+};
+
+export const radioInputRecipe = defineRecipe({
+  className: 'radio-input',
+  jsx: ['RadioInput'],
+  base: radioInputBase,
+  variants: {},
+});

package/src/recipes/select.ts

@@ -0,0 +1,142 @@
+import { defineSlotRecipe } from '@pandacss/dev';
+
+const selectBase = {
+  // The trigger button container
+  trigger: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: '8',
+    width: 'full',
+    borderWidth: '1',
+    borderStyle: 'solid',
+    borderColor: 'border.input',
+    borderRadius: '4',
+    bg: 'bg.input',
+    color: 'text',
+    fontFamily: 'body',
+    cursor: 'pointer',
+    outline: 'none',
+    transitionDuration: 'fast',
+    transitionProperty: 'background, border-color, color, outline-color',
+    transitionTimingFunction: 'default',
+    _hover: {
+      bg: 'bg.input.hovered',
+    },
+    _focus: {
+      borderColor: 'border.focused',
+      outlineWidth: '2',
+      outlineOffset: '-1',
+      outlineStyle: 'solid',
+      outlineColor: 'border.focused',
+    },
+    _disabled: {
+      bg: 'bg.disabled',
+      borderColor: 'border.disabled',
+      color: 'text.disabled',
+      cursor: 'not-allowed',
+      opacity: 0.5,
+    },
+    _error: {
+      bg: 'bg.danger',
+      borderColor: 'border.danger',
+      _hover: {
+        bg: 'bg.danger.hovered',
+      },
+      _focus: {
+        borderColor: 'border.danger',
+        outlineColor: 'border.danger',
+      },
+    },
+  },
+
+  // The value/placeholder text display
+  value: {
+    flex: 1,
+    textAlign: 'left',
+    truncate: true,
+    color: 'text',
+    _placeholder: {
+      color: 'text.subtlest',
+    },
+  },
+
+  // Placeholder styling (when no value selected)
+  placeholder: {
+    color: 'text.subtlest',
+  },
+
+  // The chevron/arrow icon
+  icon: {
+    display: 'flex',
+    alignItems: 'center',
+    flexShrink: 0,
+    color: 'icon.decorative',
+    transitionDuration: 'normal',
+    transitionProperty: 'transform',
+    transitionTimingFunction: 'default',
+    '&[data-open="true"]': {
+      transform: 'rotate(180deg)',
+    },
+  },
+};
+
+const selectVariants = {
+  size: {
+    md: {
+      trigger: {
+        py: '3',
+        px: '12',
+        fontSize: '16',
+      },
+      icon: {
+        w: '24',
+        h: '24',
+      },
+    },
+    xl: {
+      trigger: {
+        py: '9',
+        px: '16',
+        fontSize: '20',
+      },
+      icon: {
+        w: '28',
+        h: '28',
+      },
+    },
+    lg: {
+      trigger: {
+        py: '7',
+        px: '14',
+        fontSize: '16',
+      },
+      icon: {
+        w: '24',
+        h: '24',
+      },
+    },
+    sm: {
+      trigger: {
+        py: '1',
+        px: '8',
+        fontSize: '14',
+      },
+      icon: {
+        w: '22',
+        h: '22',
+      },
+    },
+  },
+};
+
+export const selectRecipe = defineSlotRecipe({
+  className: 'select',
+  jsx: ['Select', 'SelectTrigger'],
+  slots: ['trigger', 'value', 'placeholder', 'icon'],
+  base: selectBase,
+  variants: selectVariants,
+  defaultVariants: {
+    size: 'md',
+  },
+});

package/src/recipes/spinner.ts

@@ -0,0 +1,52 @@
+import { defineRecipe } from '@pandacss/dev';
+
+const spinnerBase = {
+  aspectRatio: 'square',
+  rounded: '100',
+  borderWidth: '3',
+  borderStyle: 'solid',
+  borderColor: 'transparent',
+  borderTopColor: 'icon',
+  borderBottomColor: 'icon',
+  animation: 'spin',
+  isolation: 'isolate',
+};
+
+const spinnerVariants = {
+  size: {
+    xs: {
+      height: '16',
+      minHeight: '16',
+      borderWidth: '2',
+    },
+    sm: {
+      height: '20',
+      minHeight: '20',
+      borderWidth: '2',
+    },
+    md: {
+      height: '24',
+      minHeight: '24',
+    },
+    lg: {
+      height: '32',
+      minHeight: '32',
+    },
+  },
+  inverse: {
+    true: {
+      borderTopColor: 'icon.inverse',
+      borderBottomColor: 'icon.inverse',
+    },
+  },
+};
+
+export const spinnerRecipe = defineRecipe({
+  className: 'spinner',
+  jsx: ['Spinner'],
+  base: spinnerBase,
+  variants: spinnerVariants,
+  defaultVariants: {
+    size: 'md',
+  },
+});

package/src/recipes/tag.ts

@@ -0,0 +1,262 @@
+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: {},
+  },
+  iconPosition: {
+    left: {
+      flexDirection: 'row',
+      gap: '1',
+      pl: '1',
+    },
+    right: {
+      flexDirection: 'row-reverse',
+      gap: '1',
+      pr: '1',
+    },
+  },
+  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',
+      css: {
+        color: 'text.subtle',
+        bg: 'bg.neutral',
+      },
+    },
+    {
+      hue: 'gray',
+      appearance: 'bold',
+      css: {
+        color: 'text.inverse',
+        bg: 'bg.neutral.boldest',
+      },
+    },
+    {
+      hue: 'red',
+      appearance: 'default',
+      css: {
+        color: { base: 'red.70', _dark: 'red.20' },
+        bg: { base: 'red.20', _dark: 'red.100' },
+      },
+    },
+    {
+      hue: 'red',
+      appearance: 'bold',
+      css: {
+        color: { base: 'red.10', _dark: 'red.100' },
+        bg: { base: 'red.60', _dark: 'red.40' },
+      },
+    },
+    {
+      hue: 'orange',
+      appearance: 'default',
+      css: {
+        color: { base: 'orange.70', _dark: 'orange.20' },
+        bg: { base: 'orange.20', _dark: 'orange.100' },
+      },
+    },
+    {
+      hue: 'orange',
+      appearance: 'bold',
+      css: {
+        color: { base: 'orange.10', _dark: 'orange.100' },
+        bg: { base: 'orange.60', _dark: 'orange.50' },
+      },
+    },
+    {
+      hue: 'yellow',
+      appearance: 'default',
+      css: {
+        color: { base: 'yellow.80', _dark: 'yellow.50' },
+        bg: { base: 'yellow.20', _dark: 'yellow.90' },
+      },
+    },
+    {
+      hue: 'yellow',
+      appearance: 'bold',
+      css: {
+        color: { base: 'yellow.100', _dark: 'yellow.100' },
+        bg: { base: 'yellow.40', _dark: 'yellow.60' },
+      },
+    },
+    {
+      hue: 'lime',
+      appearance: 'default',
+      css: {
+        color: { base: 'lime.70', _dark: 'lime.20' },
+        bg: { base: 'lime.20', _dark: 'lime.90' },
+      },
+    },
+    {
+      hue: 'lime',
+      appearance: 'bold',
+      css: {
+        color: { base: 'lime.10', _dark: 'lime.100' },
+        bg: { base: 'lime.60', _dark: 'lime.40' },
+      },
+    },
+    {
+      hue: 'green',
+      appearance: 'default',
+      css: {
+        color: { base: 'green.70', _dark: 'green.20' },
+        bg: { base: 'green.20', _dark: 'green.90' },
+      },
+    },
+    {
+      hue: 'green',
+      appearance: 'bold',
+      css: {
+        color: { base: 'gray.10', _dark: 'green.100' },
+        bg: { base: 'green.70', _dark: 'green.40' },
+      },
+    },
+    {
+      hue: 'teal',
+      appearance: 'default',
+      css: {
+        color: { base: 'teal.80', _dark: 'teal.20' },
+        bg: { base: 'teal.20', _dark: 'teal.90' },
+      },
+    },
+    {
+      hue: 'teal',
+      appearance: 'bold',
+      css: {
+        color: { base: 'teal.10', _dark: 'teal.100' },
+        bg: { base: 'teal.60', _dark: 'teal.50' },
+      },
+    },
+    {
+      hue: 'blue',
+      appearance: 'default',
+      css: {
+        color: { base: 'blue.70', _dark: 'blue.20' },
+        bg: { base: 'blue.20', _dark: 'blue.90' },
+      },
+    },
+    {
+      hue: 'blue',
+      appearance: 'bold',
+      css: {
+        color: { base: 'blue.10', _dark: 'blue.10' },
+        bg: { base: 'blue.50', _dark: 'blue.70' },
+      },
+    },
+    {
+      hue: 'indigo',
+      appearance: 'default',
+      css: {
+        color: { base: 'indigo.70', _dark: 'indigo.20' },
+        bg: { base: 'indigo.20', _dark: 'indigo.90' },
+      },
+    },
+    {
+      hue: 'indigo',
+      appearance: 'bold',
+      css: {
+        color: { base: 'indigo.10', _dark: 'indigo.10' },
+        bg: { base: 'indigo.60', _dark: 'indigo.70' },
+      },
+    },
+    {
+      hue: 'purple',
+      appearance: 'default',
+      css: {
+        color: { base: 'purple.70', _dark: 'purple.20' },
+        bg: { base: 'purple.20', _dark: 'purple.90' },
+      },
+    },
+    {
+      hue: 'purple',
+      appearance: 'bold',
+      css: {
+        color: { base: 'purple.10', _dark: 'purple.10' },
+        bg: { base: 'purple.60', _dark: 'purple.80' },
+      },
+    },
+    {
+      hue: 'magenta',
+      appearance: 'default',
+      css: {
+        color: { base: 'magenta.80', _dark: 'magenta.20' },
+        bg: { base: 'magenta.20', _dark: 'magenta.90' },
+      },
+    },
+    {
+      hue: 'magenta',
+      appearance: 'bold',
+      css: {
+        color: { base: 'magenta.10', _dark: 'magenta.10' },
+        bg: { base: 'magenta.70', _dark: 'magenta.70' },
+      },
+    },
+    {
+      hue: 'tan',
+      appearance: 'default',
+      css: {
+        color: { base: 'tan.70', _dark: 'tan.20' },
+        bg: { base: 'tan.20', _dark: 'tan.80' },
+      },
+    },
+    {
+      hue: 'tan',
+      appearance: 'bold',
+      css: {
+        color: { base: 'gray.10', _dark: 'tan.90' },
+        bg: { base: 'tan.60', _dark: 'tan.40' },
+      },
+    },
+  ],
+});