@okshaun/components 0.5.8 → 1.0.1

package/src/styles/semantics/index.ts

@@ -0,0 +1,2 @@
+export * from './colors';
+export * from './shadows';

package/src/styles/semantics/shadows.ts

@@ -0,0 +1,32 @@
+import { defineSemanticTokens } from '@pandacss/dev';
+
+export const shadows = defineSemanticTokens.shadows({
+  zero: {
+    value: { base: '{shadows.zeroShadow}', _dark: '{shadows.zeroShadow}' },
+  },
+  raised: {
+    value: { base: '{shadows.raisedLight}', _dark: '{shadows.raisedDark}' },
+  },
+  elevated: {
+    value: { base: '{shadows.elevatedLight}', _dark: '{shadows.elevatedDark}' },
+  },
+  overlay: {
+    value: { base: '{shadows.overlayLight}', _dark: '{shadows.overlayDark}' },
+  },
+  overflow: {
+    value: { base: '{shadows.overflowLight}', _dark: '{shadows.overflowDark}' },
+  },
+  // TODO: delete below once migration is complete
+  low: {
+    value: { base: '{shadows.lowLight}', _dark: '{shadows.lowDark}' },
+  },
+  medium: {
+    value: { base: '{shadows.mediumLight}', _dark: '{shadows.mediumDark}' },
+  },
+  high: {
+    value: { base: '{shadows.highLight}', _dark: '{shadows.highDark}' },
+  },
+  inset: {
+    value: { base: '{shadows.insetLight}', _dark: '{shadows.insetDark}' },
+  },
+});

package/src/styles/utilities/breakpoints.ts

@@ -0,0 +1,8 @@
+export const breakpoints = {
+  xs: '480px',
+  sm: '640px',
+  md: '768px',
+  lg: '1024px',
+  xl: '1280px',
+  '2xl': '1536px',
+};

package/src/styles/utilities/conditions.ts

@@ -0,0 +1,140 @@
+export const conditions = {
+  hover: '&:is(:hover, [data-hover=true])',
+  focus: '&:is(:focus, [data-focus=true])',
+  focusWithin: '&:focus-within',
+  focusVisible: '&:is(:focus-visible, [data-focus-visible=true])',
+  disabled:
+    '&:is(:disabled, [disabled], [data-disabled], [aria-disabled=true])',
+  deleted: '&:is(:deleted, [deleted], [data-deleted=true])',
+  active: '&:is(:active, [data-active=true])',
+  visited: '&:visited',
+  target: '&:target',
+  readOnly: '&:is(:read-only, [data-read-only], [aria-readonly=true])',
+  readWrite: '&:read-write',
+  empty: '&:is(:empty, [data-empty])',
+  checked:
+    '&:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"])',
+  enabled: '&:enabled',
+  expanded:
+    '&:is([aria-expanded=true], [data-expanded], [data-state="expanded"])',
+  collapsed:
+    '&:is([aria-collapsed=true], [data-collapsed], [data-state="collapsed"])',
+  highlighted: '&[data-highlighted]',
+  complete: '&[data-complete]',
+  incomplete: '&[data-incomplete]',
+  dragging: '&[data-dragging]',
+  utility: '&[data-utility=true]',
+
+  before: '&::before',
+  after: '&::after',
+  firstLetter: '&::first-letter',
+  firstLine: '&::first-line',
+  marker: '&::marker, &::-webkit-details-marker',
+  selection: '&::selection',
+  file: '&::file-selector-button',
+  backdrop: '&::backdrop',
+
+  first: '&:first-child',
+  last: '&:last-child',
+  only: '&:only-child',
+  even: '&:nth-child(even)',
+  odd: '&:nth-child(odd)',
+
+  firstOfType: '&:first-of-type',
+  lastOfType: '&:last-of-type',
+  onlyOfType: '&:only-of-type',
+
+  peerFocus: '.peer:is(:focus, [data-focus]) ~ &',
+  peerHover: '.peer:is(:hover, [data-hover]) ~ &',
+  peerActive: '.peer:is(:active, [data-active]) ~ &',
+  peerFocusWithin: '.peer:focus-within ~ &',
+  peerFocusVisible: '.peer:is(:focus-visible, [data-focus-visible]) ~ &',
+  peerDisabled:
+    '.peer:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) ~ &',
+  peerChecked:
+    '.peer:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) ~ &',
+  peerInvalid: '.peer:is(:invalid, [data-invalid], [aria-invalid=true]) ~ &',
+  peerExpanded:
+    '.peer:is([aria-expanded=true], [data-expanded], [data-state="expanded"]) ~ &',
+  peerPlaceholderShown: '.peer:placeholder-shown ~ &',
+
+  groupFocus: '.group:is(:focus, [data-focus]) &',
+  groupHover: '.group:is(:hover, [data-hover]) &',
+  groupActive: '.group:is(:active, [data-active]) &',
+  groupFocusWithin: '.group:focus-within &',
+  groupFocusVisible: '.group:is(:focus-visible, [data-focus-visible]) &',
+  groupDisabled:
+    '.group:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) &',
+  groupChecked:
+    '.group:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) &',
+  groupExpanded:
+    '.group:is([aria-expanded=true], [data-expanded], [data-state="expanded"]) &',
+  groupInvalid: '.group:is(:invalid, [data-invalid], [aria-invalid=true]) &',
+
+  indeterminate:
+    '&:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state="indeterminate"])',
+  required: '&:is(:required, [data-required], [aria-required=true])',
+  valid: '&:is(:valid, [data-valid])',
+  invalid: '&:is(:invalid, [data-invalid], [aria-invalid=true])',
+  error: '&:is([data-error], [data-error=true])',
+  autofill: '&:autofill',
+  inRange: '&:is(:in-range, [data-in-range])',
+  outOfRange: '&:is(:out-of-range, [data-outside-range])',
+  placeholder: '&::placeholder, &[data-placeholder]',
+  placeholderShown: '&:is(:placeholder-shown, [data-placeholder-shown])',
+  pressed: '&:is([aria-pressed=true], [data-pressed])',
+  selected: '&:is([aria-selected=true], [data-selected=true])',
+  grabbed: '&:is([aria-grabbed=true], [data-grabbed])',
+  underValue: '&[data-state=under-value]',
+  overValue: '&[data-state=over-value]',
+  atValue: '&[data-state=at-value]',
+
+  default: '&:default',
+  optional: '&:optional',
+  open: '&:is([open], [data-open], [data-state="open"], :popover-open)',
+  closed: '&:is([closed], [data-closed], [data-state="closed"])',
+  fullscreen: '&:is(:fullscreen, [data-fullscreen])',
+  loading: '&:is([data-loading], [aria-busy=true])',
+  hidden: '&:is([hidden], [data-hidden])',
+
+  current: '&:is([aria-current=true], [data-current])',
+  currentPage: '&[aria-current=page]',
+  currentStep: '&[aria-current=step]',
+  today: '&:is([data-today])',
+  unavailable: '&[data-unavailable]',
+  rangeStart: '&[data-range-start]',
+  rangeEnd: '&[data-range-end]',
+  now: '&[data-now]',
+  topmost: '&[data-topmost]',
+
+  motionReduce: '@media (prefers-reduced-motion: reduce)',
+  motionSafe: '@media (prefers-reduced-motion: no-preference)',
+  paused: '&:is([data-paused=true])',
+  print: '@media print',
+  landscape: '@media (orientation: landscape)',
+  portrait: '@media (orientation: portrait)',
+
+  dark: '.dark &, &:is([data-color-mode=dark] *), [data-color-mode=dark] &',
+  light: '.light &, &:is([data-color-mode=light] *), [data-color-mode=light] &',
+  osDark: '@media (prefers-color-scheme: dark)',
+  osLight: '@media (prefers-color-scheme: light)',
+
+  highContrast: '@media (forced-colors: active)',
+  lessContrast: '@media (prefers-contrast: less)',
+  moreContrast: '@media (prefers-contrast: more)',
+
+  ltr: ':where([dir=ltr], :dir(ltr)) &',
+  rtl: ':where([dir=rtl], :dir(rtl)) &',
+
+  scrollbar: '&::-webkit-scrollbar',
+  scrollbarThumb: '&::-webkit-scrollbar-thumb',
+  scrollbarTrack: '&::-webkit-scrollbar-track',
+
+  horizontal: '&[data-orientation=horizontal]',
+  vertical: '&[data-orientation=vertical]',
+
+  icon: '& :where(svg)',
+  starting: '@starting-style',
+  noscript: '@media (scripting: none)',
+  invertedColors: '@media (inverted-colors: inverted)',
+};

package/src/styles/utilities/containerSizes.ts

@@ -0,0 +1,17 @@
+// Raw values for Panda containerSizes config (no value wrappers)
+// Panda's setupContainers() expects raw strings it can call .match() on
+export const containerSizes = {
+  '2xs': '16rem', // 256px
+  xs: '20rem', // 320px
+  sm: '24rem', // 384px
+  md: '28rem', // 448px
+  lg: '32rem', // 512px
+  xl: '36rem', // 576px
+  '2xl': '42rem', // 672px
+  '3xl': '48rem', // 768px
+  '4xl': '56rem', // 896px
+  '5xl': '64rem', // 1024px
+  '6xl': '72rem', // 1152px
+  '7xl': '80rem', // 1280px
+  '8xl': '90rem', // 1440px
+};

package/src/styles/utilities/filters.ts

@@ -0,0 +1,12 @@
+import { defineUtility } from '@pandacss/dev';
+
+export const filters = {
+  invert: { value: 'invert(1)' },
+  blur: { value: 'blur(8px)' },
+  none: { value: 'none' },
+};
+
+export const filtersProperty = defineUtility({
+  className: 'filters',
+  values: 'filters',
+});

package/src/styles/utilities/globalStyle.ts

@@ -0,0 +1,93 @@
+import { defineGlobalStyles } from '@pandacss/dev';
+
+// includes some normalize styles from:
+// https://github.com/sindresorhus/modern-normalize/blob/main/modern-normalize.css
+
+export const globalCss = defineGlobalStyles({
+  '*, *::before, *::after': {
+    boxSizing: 'border-box',
+    margin: 0,
+    padding: 0,
+    _focusVisible: {
+      borderColor: 'border.focused',
+    },
+    _disabled: {
+      opacity: 0.4,
+      cursor: 'not-allowed',
+      pointerEvents: 'none',
+    },
+  },
+  html: {
+    '--global-font-heading': 'fonts.heading',
+    '--global-font-body': 'fonts.body',
+    '--global-font-sans': 'fonts.sans',
+    '--global-font-serif': 'fonts.serif',
+    '--global-font-mono': 'fonts.mono',
+    fontSize: '16',
+    lineHeight: 'calc(1em + 0.5rem)',
+    '-webkit-text-size-adjust': '100%',
+    tabSize: '4',
+  },
+  body: {
+    fontFamily: 'body',
+    bg: 'surface',
+    color: 'text.subtlest',
+    fontWeight: 'normal',
+  },
+  'h1, h2, h3, h4, h5, h6': {
+    color: 'text',
+    fontWeight: 'bold',
+    lineHeight: 'calc(1em + 0.5rem)',
+  },
+  p: {
+    marginBottom: '0.5rem',
+  },
+  'b, strong': {
+    fontWeight: 'bolder',
+  },
+  'i, em': {
+    fontStyle: 'italic',
+  },
+  u: {
+    textDecoration: 'underline',
+  },
+  'code, kbd, samp, pre': {
+    fontFamily: 'mono',
+    fontSize: '1em',
+  },
+  table: {
+    borderColor: 'border.subtle',
+  },
+  'button, input, optgroup, select, textarea': {
+    fontFamily: 'body',
+    fontSize: '100%',
+    lineHeight: 'calc(1em + 0.5rem)',
+    margin: '0',
+  },
+  'button, [type="button"], [type="reset"], [type="submit"]': {
+    '-webkit-appearance': 'button',
+  },
+  legend: {
+    padding: '0',
+  },
+  progress: {
+    verticalAlign: 'baseline',
+  },
+  '::-webkit-inner-spin-button, ::-webkit-outer-spin-button': {
+    height: 'auto',
+  },
+  '[type="search"]': {
+    '-webkit-appearance': 'textfield',
+    outlineOffset: '-2px',
+  },
+  '::-webkit-search-decoration': {
+    '-webkit-appearance': 'none',
+  },
+  '::-webkit-file-upload-button': {
+    '-webkit-appearance': 'button',
+    font: 'inherit',
+  },
+  summary: {
+    display: 'list-item',
+  },
+});

package/src/styles/utilities/index.ts

@@ -0,0 +1,9 @@
+export * from './breakpoints';
+export * from './conditions';
+export * from './containerSizes';
+export * from './filters';
+export * from './globalStyle';
+export * from './keyframes';
+export * from './layerStyles';
+export * from './textStyles';
+export * from './transitions';

package/src/styles/utilities/keyframes.ts

@@ -0,0 +1,89 @@
+import { defineKeyframes } from '@pandacss/dev';
+
+export const keyframes = defineKeyframes({
+  spin: {
+    to: {
+      transform: 'rotate(360deg)',
+    },
+  },
+  ping: {
+    '75%, 100%': {
+      transform: 'scale(2)',
+      opacity: '0',
+    },
+  },
+  pulse: {
+    '50%': {
+      opacity: '.5',
+    },
+  },
+  bounce: {
+    '0%, 100%': {
+      transform: 'translateY(-25%)',
+      animationTimingFunction: 'cubic-bezier(0.8,0,1,1)',
+    },
+    '50%': {
+      transform: 'none',
+      animationTimingFunction: 'cubic-bezier(0,0,0.2,1)',
+    },
+  },
+  badgePop: {
+    '0%': {
+      transform: 'translate(50%, -50%) scale(1)',
+    },
+    '50%': {
+      transform: 'translate(50%, -50%) scale(1.2)',
+    },
+    '100%': {
+      transform: 'translate(50%, -50%) scale(1)',
+    },
+  },
+  badgePopStandalone: {
+    '0%': {
+      transform: 'scale(1)',
+    },
+    '50%': {
+      transform: 'scale(1.2)',
+    },
+    '100%': {
+      transform: 'scale(1)',
+    },
+  },
+  slideLeft: {
+    '0%': { transform: 'translateX(100%)', opacity: '0' },
+    '100%': { transform: 'translateX(0)', opacity: '1' },
+  },
+  slideRight: {
+    '0%': { transform: 'translateX(-100%)', opacity: '0' },
+    '100%': { transform: 'translateX(0)', opacity: '1' },
+  },
+  // Modal animations
+  modalFadeIn: {
+    '0%': { opacity: '0' },
+    '100%': { opacity: '1' },
+  },
+  modalFadeOut: {
+    '0%': { opacity: '1' },
+    '100%': { opacity: '0' },
+  },
+  modalScaleIn: {
+    '0%': {
+      opacity: '0',
+      transform: 'translate(-50%, -50%) scale(0.95) translateY(-10px)',
+    },
+    '100%': {
+      opacity: '1',
+      transform: 'translate(-50%, -50%) scale(1) translateY(0)',
+    },
+  },
+  modalScaleOut: {
+    '0%': {
+      opacity: '1',
+      transform: 'translate(-50%, -50%) scale(1) translateY(0)',
+    },
+    '100%': {
+      opacity: '0',
+      transform: 'translate(-50%, -50%) scale(0.95) translateY(-10px)',
+    },
+  },
+});

package/src/styles/utilities/layerStyles.ts

@@ -0,0 +1,18 @@
+import { defineLayerStyles } from '@pandacss/dev';
+
+export const layerStyles = defineLayerStyles({
+  surface: {
+    raised: {
+      value: {
+        background: 'surface.raised',
+        boxShadow: 'shadow.raised',
+      },
+    },
+    overlay: {
+      value: {
+        background: 'surface.overlay',
+        boxShadow: 'shadow.overlay',
+      },
+    },
+  },
+});

package/src/styles/utilities/textStyles.ts

@@ -0,0 +1,135 @@
+import { defineTextStyles, defineStyles } from '@pandacss/dev';
+
+const baseHeadingStyles = defineStyles({
+  value: {
+    fontFamily: 'sans',
+    fontWeight: 'bold',
+    color: 'text',
+    lineHeight: 'default',
+  },
+});
+
+const baseBodyTextStyles = defineStyles({
+  value: {
+    fontFamily: 'serif',
+    fontWeight: 'normal',
+    color: 'text.subtlest',
+    lineHeight: 'default',
+  },
+});
+
+const baseMonoStyles = defineStyles({
+  value: {
+    fontFamily: 'mono',
+    fontWeight: 'normal',
+    color: 'text.subtlest',
+    lineHeight: 'default',
+  },
+});
+
+export const textStyles = defineTextStyles({
+  display: {
+    lg: {
+      value: {
+        ...baseHeadingStyles,
+        fontSize: '72',
+      },
+    },
+    md: {
+      value: {
+        ...baseHeadingStyles,
+        fontSize: '64',
+      },
+    },
+    sm: {
+      value: {
+        ...baseHeadingStyles,
+        fontSize: '56',
+      },
+    },
+    xs: {
+      value: {
+        ...baseHeadingStyles,
+        fontSize: '48',
+      },
+    },
+  },
+  heading: {
+    lg: {
+      value: {
+        ...baseHeadingStyles,
+        fontSize: '40',
+      },
+    },
+    md: {
+      value: {
+        ...baseHeadingStyles,
+        fontSize: '32',
+      },
+    },
+    sm: {
+      value: {
+        ...baseHeadingStyles,
+        fontSize: '24',
+      },
+    },
+    xs: {
+      value: {
+        ...baseHeadingStyles,
+        fontSize: '20',
+      },
+    },
+  },
+  body: {
+    lg: {
+      value: {
+        ...baseBodyTextStyles,
+        fontSize: '20',
+      },
+    },
+    md: {
+      value: {
+        ...baseBodyTextStyles,
+        fontSize: '16',
+      },
+    },
+    sm: {
+      value: {
+        ...baseBodyTextStyles,
+        fontSize: '14',
+      },
+    },
+    xs: {
+      value: {
+        ...baseBodyTextStyles,
+        fontSize: '12',
+      },
+    },
+  },
+  mono: {
+    lg: {
+      value: {
+        ...baseMonoStyles,
+        fontSize: '20',
+      },
+    },
+    md: {
+      value: {
+        ...baseMonoStyles,
+        fontSize: '16',
+      },
+    },
+    sm: {
+      value: {
+        ...baseMonoStyles,
+        fontSize: '14',
+      },
+    },
+    xs: {
+      value: {
+        ...baseMonoStyles,
+        fontSize: '12',
+      },
+    },
+  },
+});

package/src/styles/utilities/transitions.ts

@@ -0,0 +1,92 @@
+import { defineUtility } from '@pandacss/dev';
+import { durations, easings } from '../primitives';
+
+/**
+ * Transition property tokens for use with strictTokens.
+ * These are common CSS property combinations for transitions.
+ * Usage: transitionProperty: 'colors' or transitionProperty: 'transform'
+ */
+export const transitionProperties = {
+  none: {
+    value: 'none',
+  },
+  all: {
+    value: 'all',
+  },
+  common: {
+    value:
+      'background-color, border-color, color, fill, stroke, opacity, box-shadow, transform',
+  },
+  colors: {
+    value: 'background-color, border-color, color, fill, stroke',
+  },
+  opacity: {
+    value: 'opacity',
+  },
+  shadow: {
+    value: 'box-shadow',
+  },
+  transform: {
+    value: 'transform',
+  },
+  position: {
+    value: 'top, right, bottom, left',
+  },
+  size: {
+    value: 'width, height',
+  },
+  spacing: {
+    value: 'margin, padding',
+  },
+  outline: {
+    value: 'outline, outline-color, outline-offset',
+  },
+  border: {
+    value: 'border, border-color',
+  },
+};
+
+// Shorthands
+export const transitions = {
+  none: {
+    value: 'none',
+  },
+  all: {
+    value: `${transitionProperties.all} ${durations.normal} ${easings.default}`,
+  },
+  common: {
+    value: `${transitionProperties.common} ${durations.normal} ${easings.default}`,
+  },
+  colors: {
+    value: `${transitionProperties.colors} ${durations.normal} ${easings.default}`,
+  },
+  opacity: {
+    value: `${transitionProperties.opacity} ${durations.normal} ${easings.default}`,
+  },
+  shadow: {
+    value: `${transitionProperties.shadow} ${durations.normal} ${easings.default}`,
+  },
+  transform: {
+    value: `${transitionProperties.transform} ${durations.normal} ${easings.default}`,
+  },
+  position: {
+    value: `${transitionProperties.position} ${durations.normal} ${easings.default}`,
+  },
+  size: {
+    value: `${transitionProperties.size} ${durations.normal} ${easings.default}`,
+  },
+  spacing: {
+    value: `${transitionProperties.spacing} ${durations.normal} ${easings.default}`,
+  },
+  outline: {
+    value: `${transitionProperties.outline} ${durations.normal} ${easings.default}`,
+  },
+  border: {
+    value: `${transitionProperties.border} ${durations.normal} ${easings.default}`,
+  },
+};
+
+export const transitionProperty = defineUtility({
+  className: 'transition-property',
+  values: 'transitions',
+});

package/src/utils/injectSprite.ts

@@ -0,0 +1,36 @@
+// The sprite content is auto-generated by generate-sprite.js
+import { spriteContent } from './spriteContent';
+
+let spriteInjected = false;
+
+/**
+ * Injects the SVG sprite into the DOM.
+ * This is called automatically when the first Icon is rendered.
+ * The sprite content is bundled with the library.
+ */
+export function injectSprite(): void {
+  if (spriteInjected || typeof document === 'undefined') return;
+
+  try {
+    // Create a container for the sprite
+    const container = document.createElement('div');
+    container.style.display = 'none';
+    container.setAttribute('aria-hidden', 'true');
+    container.innerHTML = spriteContent;
+
+    // Inject at the start of body
+    if (document.body) {
+      document.body.insertBefore(container, document.body.firstChild);
+      spriteInjected = true;
+    }
+  } catch (error) {
+    console.error('Error injecting sprite:', error);
+  }
+}
+
+/**
+ * Reset the injection state (useful for testing)
+ */
+export function resetSpriteInjection(): void {
+  spriteInjected = false;
+}