@teja-app/ui 0.0.8 → 0.0.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/dist/components/DateInput/DateInput.d.ts +2 -1
  2. package/dist/components/DateInput/DateInput.d.ts.map +1 -1
  3. package/dist/components/DateInput/DateInput.types.d.ts +25 -2
  4. package/dist/components/DateInput/DateInput.types.d.ts.map +1 -1
  5. package/dist/components/Select/Select.d.ts.map +1 -1
  6. package/dist/index.cjs +4687 -124
  7. package/dist/index.cjs.map +1 -1
  8. package/dist/index.js +4797 -234
  9. package/dist/index.js.map +1 -1
  10. package/dist/tailwind/index.cjs +3 -2
  11. package/dist/tailwind/index.cjs.map +1 -1
  12. package/dist/tailwind/index.js +3 -2
  13. package/dist/tailwind/index.js.map +1 -1
  14. package/dist/tailwind/spacing.d.ts +1 -1
  15. package/dist/tailwind/spacing.d.ts.map +1 -1
  16. package/dist/ui.css +457 -0
  17. package/package.json +4 -2
package/dist/tailwind/index.cjs CHANGED
@@ -121,12 +121,13 @@ const boxShadow = {
121
121
  };
122
122
  const zIndex = {
123
123
  base: "0",
124
- dropdown: "10",
125
124
  sticky: "20",
126
125
  drawer: "30",
127
126
  modal: "40",
128
127
  toast: "50",
129
- tooltip: "60"
128
+ tooltip: "60",
129
+ // dropdown must be highest — Headless UI portals it to <body>, above drawers/modals
130
+ dropdown: "100"
130
131
  };
131
132
  const transitionDuration = {
132
133
  fast: "100ms",
package/dist/tailwind/index.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.cjs","sources":["../../src/tailwind/colors.ts","../../src/tailwind/typography.ts","../../src/tailwind/spacing.ts","../../src/tailwind/preset.ts"],"sourcesContent":["/**\n * Design token colors for the Teja UI component library.\n * Based on /business/ux/Patterns/Design-Tokens.md\n * Theme: Gold accent (matching frontend/browser-extension)\n */\n\nexport const colors = {\n // Brand colors (dark gray primary with gold accent)\n brand: {\n primary: '#1f2937', // primary-800 - dark gray for primary buttons\n 'primary-hover': '#111827', // primary-900\n secondary: '#64748B',\n },\n\n // Gold accent palette (for borders, highlights, CTAs)\n gold: {\n 50: '#fefce8',\n 100: '#fef9c3',\n 200: '#fef08a',\n 300: '#fde047',\n 400: '#fbbf24',\n 500: '#f59e0b', // primary accent\n 600: '#d97706',\n 700: '#a16207',\n 800: '#854d0e',\n 900: '#713f12',\n },\n\n // Primary grayscale (for UI structure, text, backgrounds)\n primary: {\n 50: '#f9fafb',\n 100: '#f3f4f6',\n 200: '#e5e7eb',\n 300: '#d1d5db',\n 400: '#9ca3af',\n 500: '#6b7280',\n 600: '#4b5563',\n 700: '#374151',\n 800: '#1f2937',\n 900: '#111827',\n 950: '#030712',\n },\n\n // Semantic colors\n success: {\n DEFAULT: '#16A34A',\n light: '#DCFCE7',\n },\n warning: {\n DEFAULT: '#CA8A04',\n light: '#FEF9C3',\n },\n error: {\n DEFAULT: '#DC2626',\n light: '#FEE2E2',\n },\n info: {\n DEFAULT: '#2563EB',\n light: '#DBEAFE',\n },\n\n // Neutral colors\n neutral: {\n 50: '#F8FAFC',\n 100: '#F1F5F9',\n 200: '#E2E8F0',\n 300: '#CBD5E1',\n 500: '#64748B',\n 700: '#334155',\n 900: '#0F172A',\n },\n\n // Status colors (for sessions/notes)\n status: {\n scheduled: '#3B82F6',\n completed: '#16A34A',\n cancelled: '#6B7280',\n 'no-show': '#EF4444',\n draft: '#F59E0B',\n signed: '#16A34A',\n },\n} as const;\n\nexport type Colors = typeof colors;\n","/**\n * Typography design tokens for the Teja UI component library.\n * Based on /business/ux/Patterns/Design-Tokens.md\n */\n\nexport const fontFamily = {\n sans: ['Inter', 'system-ui', 'sans-serif'],\n mono: ['JetBrains Mono', 'monospace'],\n} as const;\n\nexport const fontSize = {\n xs: ['0.75rem', { lineHeight: '1rem' }],\n sm: ['0.875rem', { lineHeight: '1.25rem' }],\n base: ['1rem', { lineHeight: '1.5rem' }],\n lg: ['1.125rem', { lineHeight: '1.75rem' }],\n xl: ['1.25rem', { lineHeight: '1.75rem' }],\n '2xl': ['1.5rem', { lineHeight: '2rem' }],\n '3xl': ['2rem', { lineHeight: '2.5rem' }],\n} as const;\n\nexport const fontWeight = {\n normal: '400',\n medium: '500',\n semibold: '600',\n bold: '700',\n} as const;\n\nexport type FontFamily = typeof fontFamily;\nexport type FontSize = typeof fontSize;\nexport type FontWeight = typeof fontWeight;\n","/**\n * Spacing and layout design tokens for the Teja UI component library.\n * Based on /business/ux/Patterns/Design-Tokens.md\n */\n\nexport const spacing = {\n 0: '0',\n 1: '0.25rem',\n 2: '0.5rem',\n 3: '0.75rem',\n 4: '1rem',\n 5: '1.25rem',\n 6: '1.5rem',\n 8: '2rem',\n 10: '2.5rem',\n 12: '3rem',\n} as const;\n\nexport const borderRadius = {\n none: '0',\n sm: '0.25rem',\n md: '0.375rem',\n lg: '0.5rem',\n xl: '0.75rem',\n full: '9999px',\n} as const;\n\nexport const boxShadow = {\n sm: '0 1px 2px rgba(0, 0, 0, 0.05)',\n md: '0 4px 6px rgba(0, 0, 0, 0.1)',\n lg: '0 10px 15px rgba(0, 0, 0, 0.1)',\n xl: '0 20px 25px rgba(0, 0, 0, 0.15)',\n} as const;\n\nexport const zIndex = {\n base: '0',\n dropdown: '10',\n sticky: '20',\n drawer: '30',\n modal: '40',\n toast: '50',\n tooltip: '60',\n} as const;\n\nexport const transitionDuration = {\n fast: '100ms',\n normal: '150ms',\n slow: '300ms',\n} as const;\n\nexport const transitionTimingFunction = {\n default: 'ease-out',\n bounce: 'cubic-bezier(0.34, 1.56, 0.64, 1)',\n} as const;\n\nexport type Spacing = typeof spacing;\nexport type BorderRadius = typeof borderRadius;\nexport type BoxShadow = typeof boxShadow;\nexport type ZIndex = typeof zIndex;\n","/**\n * Tailwind CSS preset for the Teja UI component library.\n *\n * Usage in consumer apps:\n * ```ts\n * import tejaPreset from '@teja-app/ui/tailwind';\n *\n * export default {\n * presets: [tejaPreset],\n * content: [\n * \"./src/**\\/*.{js,ts,jsx,tsx}\",\n * \"./node_modules/@teja-app/ui/dist/**\\/*.{js,mjs}\",\n * ],\n * };\n * ```\n */\n\nimport type { Config } from 'tailwindcss';\nimport { colors } from './colors';\nimport { fontFamily, fontSize, fontWeight } from './typography';\nimport {\n spacing,\n borderRadius,\n boxShadow,\n zIndex,\n transitionDuration,\n transitionTimingFunction,\n} from './spacing';\n\nconst preset: Partial<Config> = {\n theme: {\n extend: {\n colors,\n fontFamily,\n fontSize,\n fontWeight,\n spacing,\n borderRadius,\n boxShadow,\n zIndex,\n transitionDuration,\n transitionTimingFunction,\n },\n },\n};\n\nexport default preset;\n"],"names":[],"mappings":";;AAMO,MAAM,SAAS;AAAA;AAAA,EAEpB,OAAO;AAAA,IACL,SAAS;AAAA;AAAA,IACT,iBAAiB;AAAA;AAAA,IACjB,WAAW;AAAA,EAAA;AAAA;AAAA,EAIb,MAAM;AAAA,IACJ,IAAI;AAAA,IACJ,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,EAAA;AAAA;AAAA,EAIP,SAAS;AAAA,IACP,IAAI;AAAA,IACJ,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,EAAA;AAAA;AAAA,EAIP,SAAS;AAAA,IACP,SAAS;AAAA,IACT,OAAO;AAAA,EAAA;AAAA,EAET,SAAS;AAAA,IACP,SAAS;AAAA,IACT,OAAO;AAAA,EAAA;AAAA,EAET,OAAO;AAAA,IACL,SAAS;AAAA,IACT,OAAO;AAAA,EAAA;AAAA,EAET,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,OAAO;AAAA,EAAA;AAAA;AAAA,EAIT,SAAS;AAAA,IACP,IAAI;AAAA,IACJ,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,EAAA;AAAA;AAAA,EAIP,QAAQ;AAAA,IACN,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,OAAO;AAAA,IACP,QAAQ;AAAA,EAAA;AAEZ;AC5EO,MAAM,aAAa;AAAA,EACxB,MAAM,CAAC,SAAS,aAAa,YAAY;AAAA,EACzC,MAAM,CAAC,kBAAkB,WAAW;AACtC;AAEO,MAAM,WAAW;AAAA,EACtB,IAAI,CAAC,WAAW,EAAE,YAAY,QAAQ;AAAA,EACtC,IAAI,CAAC,YAAY,EAAE,YAAY,WAAW;AAAA,EAC1C,MAAM,CAAC,QAAQ,EAAE,YAAY,UAAU;AAAA,EACvC,IAAI,CAAC,YAAY,EAAE,YAAY,WAAW;AAAA,EAC1C,IAAI,CAAC,WAAW,EAAE,YAAY,WAAW;AAAA,EACzC,OAAO,CAAC,UAAU,EAAE,YAAY,QAAQ;AAAA,EACxC,OAAO,CAAC,QAAQ,EAAE,YAAY,UAAU;AAC1C;AAEO,MAAM,aAAa;AAAA,EACxB,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,MAAM;AACR;ACpBO,MAAM,UAAU;AAAA,EACrB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,IAAI;AACN;AAEO,MAAM,eAAe;AAAA,EAC1B,MAAM;AAAA,EACN,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,MAAM;AACR;AAEO,MAAM,YAAY;AAAA,EACvB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEO,MAAM,SAAS;AAAA,EACpB,MAAM;AAAA,EACN,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,OAAO;AAAA,EACP,SAAS;AACX;AAEO,MAAM,qBAAqB;AAAA,EAChC,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,MAAM;AACR;AAEO,MAAM,2BAA2B;AAAA,EACtC,SAAS;AAAA,EACT,QAAQ;AACV;ACxBA,MAAM,SAA0B;AAAA,EAC9B,OAAO;AAAA,IACL,QAAQ;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EACF;AAEJ;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.cjs","sources":["../../src/tailwind/colors.ts","../../src/tailwind/typography.ts","../../src/tailwind/spacing.ts","../../src/tailwind/preset.ts"],"sourcesContent":["/**\n * Design token colors for the Teja UI component library.\n * Based on /business/ux/Patterns/Design-Tokens.md\n * Theme: Gold accent (matching frontend/browser-extension)\n */\n\nexport const colors = {\n // Brand colors (dark gray primary with gold accent)\n brand: {\n primary: '#1f2937', // primary-800 - dark gray for primary buttons\n 'primary-hover': '#111827', // primary-900\n secondary: '#64748B',\n },\n\n // Gold accent palette (for borders, highlights, CTAs)\n gold: {\n 50: '#fefce8',\n 100: '#fef9c3',\n 200: '#fef08a',\n 300: '#fde047',\n 400: '#fbbf24',\n 500: '#f59e0b', // primary accent\n 600: '#d97706',\n 700: '#a16207',\n 800: '#854d0e',\n 900: '#713f12',\n },\n\n // Primary grayscale (for UI structure, text, backgrounds)\n primary: {\n 50: '#f9fafb',\n 100: '#f3f4f6',\n 200: '#e5e7eb',\n 300: '#d1d5db',\n 400: '#9ca3af',\n 500: '#6b7280',\n 600: '#4b5563',\n 700: '#374151',\n 800: '#1f2937',\n 900: '#111827',\n 950: '#030712',\n },\n\n // Semantic colors\n success: {\n DEFAULT: '#16A34A',\n light: '#DCFCE7',\n },\n warning: {\n DEFAULT: '#CA8A04',\n light: '#FEF9C3',\n },\n error: {\n DEFAULT: '#DC2626',\n light: '#FEE2E2',\n },\n info: {\n DEFAULT: '#2563EB',\n light: '#DBEAFE',\n },\n\n // Neutral colors\n neutral: {\n 50: '#F8FAFC',\n 100: '#F1F5F9',\n 200: '#E2E8F0',\n 300: '#CBD5E1',\n 500: '#64748B',\n 700: '#334155',\n 900: '#0F172A',\n },\n\n // Status colors (for sessions/notes)\n status: {\n scheduled: '#3B82F6',\n completed: '#16A34A',\n cancelled: '#6B7280',\n 'no-show': '#EF4444',\n draft: '#F59E0B',\n signed: '#16A34A',\n },\n} as const;\n\nexport type Colors = typeof colors;\n","/**\n * Typography design tokens for the Teja UI component library.\n * Based on /business/ux/Patterns/Design-Tokens.md\n */\n\nexport const fontFamily = {\n sans: ['Inter', 'system-ui', 'sans-serif'],\n mono: ['JetBrains Mono', 'monospace'],\n} as const;\n\nexport const fontSize = {\n xs: ['0.75rem', { lineHeight: '1rem' }],\n sm: ['0.875rem', { lineHeight: '1.25rem' }],\n base: ['1rem', { lineHeight: '1.5rem' }],\n lg: ['1.125rem', { lineHeight: '1.75rem' }],\n xl: ['1.25rem', { lineHeight: '1.75rem' }],\n '2xl': ['1.5rem', { lineHeight: '2rem' }],\n '3xl': ['2rem', { lineHeight: '2.5rem' }],\n} as const;\n\nexport const fontWeight = {\n normal: '400',\n medium: '500',\n semibold: '600',\n bold: '700',\n} as const;\n\nexport type FontFamily = typeof fontFamily;\nexport type FontSize = typeof fontSize;\nexport type FontWeight = typeof fontWeight;\n","/**\n * Spacing and layout design tokens for the Teja UI component library.\n * Based on /business/ux/Patterns/Design-Tokens.md\n */\n\nexport const spacing = {\n 0: '0',\n 1: '0.25rem',\n 2: '0.5rem',\n 3: '0.75rem',\n 4: '1rem',\n 5: '1.25rem',\n 6: '1.5rem',\n 8: '2rem',\n 10: '2.5rem',\n 12: '3rem',\n} as const;\n\nexport const borderRadius = {\n none: '0',\n sm: '0.25rem',\n md: '0.375rem',\n lg: '0.5rem',\n xl: '0.75rem',\n full: '9999px',\n} as const;\n\nexport const boxShadow = {\n sm: '0 1px 2px rgba(0, 0, 0, 0.05)',\n md: '0 4px 6px rgba(0, 0, 0, 0.1)',\n lg: '0 10px 15px rgba(0, 0, 0, 0.1)',\n xl: '0 20px 25px rgba(0, 0, 0, 0.15)',\n} as const;\n\nexport const zIndex = {\n base: '0',\n sticky: '20',\n drawer: '30',\n modal: '40',\n toast: '50',\n tooltip: '60',\n // dropdown must be highest — Headless UI portals it to <body>, above drawers/modals\n dropdown: '100',\n} as const;\n\nexport const transitionDuration = {\n fast: '100ms',\n normal: '150ms',\n slow: '300ms',\n} as const;\n\nexport const transitionTimingFunction = {\n default: 'ease-out',\n bounce: 'cubic-bezier(0.34, 1.56, 0.64, 1)',\n} as const;\n\nexport type Spacing = typeof spacing;\nexport type BorderRadius = typeof borderRadius;\nexport type BoxShadow = typeof boxShadow;\nexport type ZIndex = typeof zIndex;\n","/**\n * Tailwind CSS preset for the Teja UI component library.\n *\n * Usage in consumer apps:\n * ```ts\n * import tejaPreset from '@teja-app/ui/tailwind';\n *\n * export default {\n * presets: [tejaPreset],\n * content: [\n * \"./src/**\\/*.{js,ts,jsx,tsx}\",\n * \"./node_modules/@teja-app/ui/dist/**\\/*.{js,mjs}\",\n * ],\n * };\n * ```\n */\n\nimport type { Config } from 'tailwindcss';\nimport { colors } from './colors';\nimport { fontFamily, fontSize, fontWeight } from './typography';\nimport {\n spacing,\n borderRadius,\n boxShadow,\n zIndex,\n transitionDuration,\n transitionTimingFunction,\n} from './spacing';\n\nconst preset: Partial<Config> = {\n theme: {\n extend: {\n colors,\n fontFamily,\n fontSize,\n fontWeight,\n spacing,\n borderRadius,\n boxShadow,\n zIndex,\n transitionDuration,\n transitionTimingFunction,\n },\n },\n};\n\nexport default preset;\n"],"names":[],"mappings":"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"}
package/dist/tailwind/index.js CHANGED
@@ -119,12 +119,13 @@ const boxShadow = {
119
119
  };
120
120
  const zIndex = {
121
121
  base: "0",
122
- dropdown: "10",
123
122
  sticky: "20",
124
123
  drawer: "30",
125
124
  modal: "40",
126
125
  toast: "50",
127
- tooltip: "60"
126
+ tooltip: "60",
127
+ // dropdown must be highest — Headless UI portals it to <body>, above drawers/modals
128
+ dropdown: "100"
128
129
  };
129
130
  const transitionDuration = {
130
131
  fast: "100ms",
package/dist/tailwind/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../src/tailwind/colors.ts","../../src/tailwind/typography.ts","../../src/tailwind/spacing.ts","../../src/tailwind/preset.ts"],"sourcesContent":["/**\n * Design token colors for the Teja UI component library.\n * Based on /business/ux/Patterns/Design-Tokens.md\n * Theme: Gold accent (matching frontend/browser-extension)\n */\n\nexport const colors = {\n // Brand colors (dark gray primary with gold accent)\n brand: {\n primary: '#1f2937', // primary-800 - dark gray for primary buttons\n 'primary-hover': '#111827', // primary-900\n secondary: '#64748B',\n },\n\n // Gold accent palette (for borders, highlights, CTAs)\n gold: {\n 50: '#fefce8',\n 100: '#fef9c3',\n 200: '#fef08a',\n 300: '#fde047',\n 400: '#fbbf24',\n 500: '#f59e0b', // primary accent\n 600: '#d97706',\n 700: '#a16207',\n 800: '#854d0e',\n 900: '#713f12',\n },\n\n // Primary grayscale (for UI structure, text, backgrounds)\n primary: {\n 50: '#f9fafb',\n 100: '#f3f4f6',\n 200: '#e5e7eb',\n 300: '#d1d5db',\n 400: '#9ca3af',\n 500: '#6b7280',\n 600: '#4b5563',\n 700: '#374151',\n 800: '#1f2937',\n 900: '#111827',\n 950: '#030712',\n },\n\n // Semantic colors\n success: {\n DEFAULT: '#16A34A',\n light: '#DCFCE7',\n },\n warning: {\n DEFAULT: '#CA8A04',\n light: '#FEF9C3',\n },\n error: {\n DEFAULT: '#DC2626',\n light: '#FEE2E2',\n },\n info: {\n DEFAULT: '#2563EB',\n light: '#DBEAFE',\n },\n\n // Neutral colors\n neutral: {\n 50: '#F8FAFC',\n 100: '#F1F5F9',\n 200: '#E2E8F0',\n 300: '#CBD5E1',\n 500: '#64748B',\n 700: '#334155',\n 900: '#0F172A',\n },\n\n // Status colors (for sessions/notes)\n status: {\n scheduled: '#3B82F6',\n completed: '#16A34A',\n cancelled: '#6B7280',\n 'no-show': '#EF4444',\n draft: '#F59E0B',\n signed: '#16A34A',\n },\n} as const;\n\nexport type Colors = typeof colors;\n","/**\n * Typography design tokens for the Teja UI component library.\n * Based on /business/ux/Patterns/Design-Tokens.md\n */\n\nexport const fontFamily = {\n sans: ['Inter', 'system-ui', 'sans-serif'],\n mono: ['JetBrains Mono', 'monospace'],\n} as const;\n\nexport const fontSize = {\n xs: ['0.75rem', { lineHeight: '1rem' }],\n sm: ['0.875rem', { lineHeight: '1.25rem' }],\n base: ['1rem', { lineHeight: '1.5rem' }],\n lg: ['1.125rem', { lineHeight: '1.75rem' }],\n xl: ['1.25rem', { lineHeight: '1.75rem' }],\n '2xl': ['1.5rem', { lineHeight: '2rem' }],\n '3xl': ['2rem', { lineHeight: '2.5rem' }],\n} as const;\n\nexport const fontWeight = {\n normal: '400',\n medium: '500',\n semibold: '600',\n bold: '700',\n} as const;\n\nexport type FontFamily = typeof fontFamily;\nexport type FontSize = typeof fontSize;\nexport type FontWeight = typeof fontWeight;\n","/**\n * Spacing and layout design tokens for the Teja UI component library.\n * Based on /business/ux/Patterns/Design-Tokens.md\n */\n\nexport const spacing = {\n 0: '0',\n 1: '0.25rem',\n 2: '0.5rem',\n 3: '0.75rem',\n 4: '1rem',\n 5: '1.25rem',\n 6: '1.5rem',\n 8: '2rem',\n 10: '2.5rem',\n 12: '3rem',\n} as const;\n\nexport const borderRadius = {\n none: '0',\n sm: '0.25rem',\n md: '0.375rem',\n lg: '0.5rem',\n xl: '0.75rem',\n full: '9999px',\n} as const;\n\nexport const boxShadow = {\n sm: '0 1px 2px rgba(0, 0, 0, 0.05)',\n md: '0 4px 6px rgba(0, 0, 0, 0.1)',\n lg: '0 10px 15px rgba(0, 0, 0, 0.1)',\n xl: '0 20px 25px rgba(0, 0, 0, 0.15)',\n} as const;\n\nexport const zIndex = {\n base: '0',\n dropdown: '10',\n sticky: '20',\n drawer: '30',\n modal: '40',\n toast: '50',\n tooltip: '60',\n} as const;\n\nexport const transitionDuration = {\n fast: '100ms',\n normal: '150ms',\n slow: '300ms',\n} as const;\n\nexport const transitionTimingFunction = {\n default: 'ease-out',\n bounce: 'cubic-bezier(0.34, 1.56, 0.64, 1)',\n} as const;\n\nexport type Spacing = typeof spacing;\nexport type BorderRadius = typeof borderRadius;\nexport type BoxShadow = typeof boxShadow;\nexport type ZIndex = typeof zIndex;\n","/**\n * Tailwind CSS preset for the Teja UI component library.\n *\n * Usage in consumer apps:\n * ```ts\n * import tejaPreset from '@teja-app/ui/tailwind';\n *\n * export default {\n * presets: [tejaPreset],\n * content: [\n * \"./src/**\\/*.{js,ts,jsx,tsx}\",\n * \"./node_modules/@teja-app/ui/dist/**\\/*.{js,mjs}\",\n * ],\n * };\n * ```\n */\n\nimport type { Config } from 'tailwindcss';\nimport { colors } from './colors';\nimport { fontFamily, fontSize, fontWeight } from './typography';\nimport {\n spacing,\n borderRadius,\n boxShadow,\n zIndex,\n transitionDuration,\n transitionTimingFunction,\n} from './spacing';\n\nconst preset: Partial<Config> = {\n theme: {\n extend: {\n colors,\n fontFamily,\n fontSize,\n fontWeight,\n spacing,\n borderRadius,\n boxShadow,\n zIndex,\n transitionDuration,\n transitionTimingFunction,\n },\n },\n};\n\nexport default preset;\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"index.js","sources":["../../src/tailwind/colors.ts","../../src/tailwind/typography.ts","../../src/tailwind/spacing.ts","../../src/tailwind/preset.ts"],"sourcesContent":["/**\n * Design token colors for the Teja UI component library.\n * Based on /business/ux/Patterns/Design-Tokens.md\n * Theme: Gold accent (matching frontend/browser-extension)\n */\n\nexport const colors = {\n // Brand colors (dark gray primary with gold accent)\n brand: {\n primary: '#1f2937', // primary-800 - dark gray for primary buttons\n 'primary-hover': '#111827', // primary-900\n secondary: '#64748B',\n },\n\n // Gold accent palette (for borders, highlights, CTAs)\n gold: {\n 50: '#fefce8',\n 100: '#fef9c3',\n 200: '#fef08a',\n 300: '#fde047',\n 400: '#fbbf24',\n 500: '#f59e0b', // primary accent\n 600: '#d97706',\n 700: '#a16207',\n 800: '#854d0e',\n 900: '#713f12',\n },\n\n // Primary grayscale (for UI structure, text, backgrounds)\n primary: {\n 50: '#f9fafb',\n 100: '#f3f4f6',\n 200: '#e5e7eb',\n 300: '#d1d5db',\n 400: '#9ca3af',\n 500: '#6b7280',\n 600: '#4b5563',\n 700: '#374151',\n 800: '#1f2937',\n 900: '#111827',\n 950: '#030712',\n },\n\n // Semantic colors\n success: {\n DEFAULT: '#16A34A',\n light: '#DCFCE7',\n },\n warning: {\n DEFAULT: '#CA8A04',\n light: '#FEF9C3',\n },\n error: {\n DEFAULT: '#DC2626',\n light: '#FEE2E2',\n },\n info: {\n DEFAULT: '#2563EB',\n light: '#DBEAFE',\n },\n\n // Neutral colors\n neutral: {\n 50: '#F8FAFC',\n 100: '#F1F5F9',\n 200: '#E2E8F0',\n 300: '#CBD5E1',\n 500: '#64748B',\n 700: '#334155',\n 900: '#0F172A',\n },\n\n // Status colors (for sessions/notes)\n status: {\n scheduled: '#3B82F6',\n completed: '#16A34A',\n cancelled: '#6B7280',\n 'no-show': '#EF4444',\n draft: '#F59E0B',\n signed: '#16A34A',\n },\n} as const;\n\nexport type Colors = typeof colors;\n","/**\n * Typography design tokens for the Teja UI component library.\n * Based on /business/ux/Patterns/Design-Tokens.md\n */\n\nexport const fontFamily = {\n sans: ['Inter', 'system-ui', 'sans-serif'],\n mono: ['JetBrains Mono', 'monospace'],\n} as const;\n\nexport const fontSize = {\n xs: ['0.75rem', { lineHeight: '1rem' }],\n sm: ['0.875rem', { lineHeight: '1.25rem' }],\n base: ['1rem', { lineHeight: '1.5rem' }],\n lg: ['1.125rem', { lineHeight: '1.75rem' }],\n xl: ['1.25rem', { lineHeight: '1.75rem' }],\n '2xl': ['1.5rem', { lineHeight: '2rem' }],\n '3xl': ['2rem', { lineHeight: '2.5rem' }],\n} as const;\n\nexport const fontWeight = {\n normal: '400',\n medium: '500',\n semibold: '600',\n bold: '700',\n} as const;\n\nexport type FontFamily = typeof fontFamily;\nexport type FontSize = typeof fontSize;\nexport type FontWeight = typeof fontWeight;\n","/**\n * Spacing and layout design tokens for the Teja UI component library.\n * Based on /business/ux/Patterns/Design-Tokens.md\n */\n\nexport const spacing = {\n 0: '0',\n 1: '0.25rem',\n 2: '0.5rem',\n 3: '0.75rem',\n 4: '1rem',\n 5: '1.25rem',\n 6: '1.5rem',\n 8: '2rem',\n 10: '2.5rem',\n 12: '3rem',\n} as const;\n\nexport const borderRadius = {\n none: '0',\n sm: '0.25rem',\n md: '0.375rem',\n lg: '0.5rem',\n xl: '0.75rem',\n full: '9999px',\n} as const;\n\nexport const boxShadow = {\n sm: '0 1px 2px rgba(0, 0, 0, 0.05)',\n md: '0 4px 6px rgba(0, 0, 0, 0.1)',\n lg: '0 10px 15px rgba(0, 0, 0, 0.1)',\n xl: '0 20px 25px rgba(0, 0, 0, 0.15)',\n} as const;\n\nexport const zIndex = {\n base: '0',\n sticky: '20',\n drawer: '30',\n modal: '40',\n toast: '50',\n tooltip: '60',\n // dropdown must be highest — Headless UI portals it to <body>, above drawers/modals\n dropdown: '100',\n} as const;\n\nexport const transitionDuration = {\n fast: '100ms',\n normal: '150ms',\n slow: '300ms',\n} as const;\n\nexport const transitionTimingFunction = {\n default: 'ease-out',\n bounce: 'cubic-bezier(0.34, 1.56, 0.64, 1)',\n} as const;\n\nexport type Spacing = typeof spacing;\nexport type BorderRadius = typeof borderRadius;\nexport type BoxShadow = typeof boxShadow;\nexport type ZIndex = typeof zIndex;\n","/**\n * Tailwind CSS preset for the Teja UI component library.\n *\n * Usage in consumer apps:\n * ```ts\n * import tejaPreset from '@teja-app/ui/tailwind';\n *\n * export default {\n * presets: [tejaPreset],\n * content: [\n * \"./src/**\\/*.{js,ts,jsx,tsx}\",\n * \"./node_modules/@teja-app/ui/dist/**\\/*.{js,mjs}\",\n * ],\n * };\n * ```\n */\n\nimport type { Config } from 'tailwindcss';\nimport { colors } from './colors';\nimport { fontFamily, fontSize, fontWeight } from './typography';\nimport {\n spacing,\n borderRadius,\n boxShadow,\n zIndex,\n transitionDuration,\n transitionTimingFunction,\n} from './spacing';\n\nconst preset: Partial<Config> = {\n theme: {\n extend: {\n colors,\n fontFamily,\n fontSize,\n fontWeight,\n spacing,\n borderRadius,\n boxShadow,\n zIndex,\n transitionDuration,\n transitionTimingFunction,\n },\n },\n};\n\nexport default preset;\n"],"names":[],"mappings":"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"}
package/dist/tailwind/spacing.d.ts CHANGED
@@ -30,12 +30,12 @@ export declare const boxShadow: {
30
30
  };
31
31
  export declare const zIndex: {
32
32
  readonly base: "0";
33
- readonly dropdown: "10";
34
33
  readonly sticky: "20";
35
34
  readonly drawer: "30";
36
35
  readonly modal: "40";
37
36
  readonly toast: "50";
38
37
  readonly tooltip: "60";
38
+ readonly dropdown: "100";
39
39
  };
40
40
  export declare const transitionDuration: {
41
41
  readonly fast: "100ms";
package/dist/tailwind/spacing.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"spacing.d.ts","sourceRoot":"","sources":["../../src/tailwind/spacing.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,OAAO;;;;;;;;;;;CAWV,CAAC;AAEX,eAAO,MAAM,YAAY;;;;;;;CAOf,CAAC;AAEX,eAAO,MAAM,SAAS;;;;;CAKZ,CAAC;AAEX,eAAO,MAAM,MAAM;;;;;;;;CAQT,CAAC;AAEX,eAAO,MAAM,kBAAkB;;;;CAIrB,CAAC;AAEX,eAAO,MAAM,wBAAwB;;;CAG3B,CAAC;AAEX,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC;AACrC,MAAM,MAAM,YAAY,GAAG,OAAO,YAAY,CAAC;AAC/C,MAAM,MAAM,SAAS,GAAG,OAAO,SAAS,CAAC;AACzC,MAAM,MAAM,MAAM,GAAG,OAAO,MAAM,CAAC"}
1
+ {"version":3,"file":"spacing.d.ts","sourceRoot":"","sources":["../../src/tailwind/spacing.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,OAAO;;;;;;;;;;;CAWV,CAAC;AAEX,eAAO,MAAM,YAAY;;;;;;;CAOf,CAAC;AAEX,eAAO,MAAM,SAAS;;;;;CAKZ,CAAC;AAEX,eAAO,MAAM,MAAM;;;;;;;;CAST,CAAC;AAEX,eAAO,MAAM,kBAAkB;;;;CAIrB,CAAC;AAEX,eAAO,MAAM,wBAAwB;;;CAG3B,CAAC;AAEX,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC;AACrC,MAAM,MAAM,YAAY,GAAG,OAAO,YAAY,CAAC;AAC/C,MAAM,MAAM,SAAS,GAAG,OAAO,SAAS,CAAC;AACzC,MAAM,MAAM,MAAM,GAAG,OAAO,MAAM,CAAC"}
package/dist/ui.css ADDED
@@ -0,0 +1,457 @@
1
+ /* Variables declaration */
2
+ .rdp-root {
3
+ --rdp-accent-color: blue; /* The accent color used for selected days and UI elements. */
4
+ --rdp-accent-background-color: #f0f0ff; /* The accent background color used for selected days and UI elements. */
5
+
6
+ --rdp-day-height: 44px; /* The height of the day cells. */
7
+ --rdp-day-width: 44px; /* The width of the day cells. */
8
+
9
+ --rdp-day_button-border-radius: 100%; /* The border radius of the day cells. */
10
+ --rdp-day_button-border: 2px solid transparent; /* The border of the day cells. */
11
+ --rdp-day_button-height: 42px; /* The height of the day cells. */
12
+ --rdp-day_button-width: 42px; /* The width of the day cells. */
13
+
14
+ --rdp-selected-border: 2px solid var(--rdp-accent-color); /* The border of the selected days. */
15
+ --rdp-disabled-opacity: 0.5; /* The opacity of the disabled days. */
16
+ --rdp-outside-opacity: 0.75; /* The opacity of the days outside the current month. */
17
+ --rdp-today-color: var(--rdp-accent-color); /* The color of the today's date. */
18
+
19
+ --rdp-dropdown-gap: 0.5rem; /* The gap between the dropdowns used in the month captons. */
20
+
21
+ --rdp-months-gap: 2rem; /* The gap between the months in the multi-month view. */
22
+
23
+ --rdp-nav_button-disabled-opacity: 0.5; /* The opacity of the disabled navigation buttons. */
24
+ --rdp-nav_button-height: 2.25rem; /* The height of the navigation buttons. */
25
+ --rdp-nav_button-width: 2.25rem; /* The width of the navigation buttons. */
26
+ --rdp-nav-height: 2.75rem; /* The height of the navigation bar. */
27
+
28
+ --rdp-range_middle-background-color: var(--rdp-accent-background-color); /* The color of the background for days in the middle of a range. */
29
+ --rdp-range_middle-color: inherit; /* The color of the range text. */
30
+
31
+ --rdp-range_start-color: white; /* The color of the range text. */
32
+ --rdp-range_start-background: linear-gradient(
33
+ var(--rdp-gradient-direction),
34
+ transparent 50%,
35
+ var(--rdp-range_middle-background-color) 50%
36
+ ); /* Used for the background of the start of the selected range. */
37
+ --rdp-range_start-date-background-color: var(--rdp-accent-color); /* The background color of the date when at the start of the selected range. */
38
+
39
+ --rdp-range_end-background: linear-gradient(
40
+ var(--rdp-gradient-direction),
41
+ var(--rdp-range_middle-background-color) 50%,
42
+ transparent 50%
43
+ ); /* Used for the background of the end of the selected range. */
44
+ --rdp-range_end-color: white; /* The color of the range text. */
45
+ --rdp-range_end-date-background-color: var(--rdp-accent-color); /* The background color of the date when at the end of the selected range. */
46
+
47
+ --rdp-week_number-border-radius: 100%; /* The border radius of the week number. */
48
+ --rdp-week_number-border: 2px solid transparent; /* The border of the week number. */
49
+
50
+ --rdp-week_number-height: var(--rdp-day-height); /* The height of the week number cells. */
51
+ --rdp-week_number-opacity: 0.75; /* The opacity of the week number. */
52
+ --rdp-week_number-width: var(--rdp-day-width); /* The width of the week number cells. */
53
+ --rdp-weeknumber-text-align: center; /* The text alignment of the weekday cells. */
54
+
55
+ --rdp-weekday-opacity: 0.75; /* The opacity of the weekday. */
56
+ --rdp-weekday-padding: 0.5rem 0rem; /* The padding of the weekday. */
57
+ --rdp-weekday-text-align: center; /* The text alignment of the weekday cells. */
58
+
59
+ --rdp-gradient-direction: 90deg;
60
+
61
+ --rdp-animation_duration: 0.3s;
62
+ --rdp-animation_timing: cubic-bezier(0.4, 0, 0.2, 1);
63
+ }
64
+
65
+ .rdp-root[dir="rtl"] {
66
+ --rdp-gradient-direction: -90deg;
67
+ }
68
+
69
+ .rdp-root[data-broadcast-calendar="true"] {
70
+ --rdp-outside-opacity: unset;
71
+ }
72
+
73
+ /* Root of the component. */
74
+ .rdp-root {
75
+ position: relative; /* Required to position the navigation toolbar. */
76
+ box-sizing: border-box;
77
+ }
78
+
79
+ .rdp-root * {
80
+ box-sizing: border-box;
81
+ }
82
+
83
+ .rdp-day {
84
+ width: var(--rdp-day-width);
85
+ height: var(--rdp-day-height);
86
+ text-align: center;
87
+ }
88
+
89
+ .rdp-day_button {
90
+ background: none;
91
+ padding: 0;
92
+ margin: 0;
93
+ cursor: pointer;
94
+ font: inherit;
95
+ color: inherit;
96
+ justify-content: center;
97
+ align-items: center;
98
+ display: flex;
99
+
100
+ width: var(--rdp-day_button-width);
101
+ height: var(--rdp-day_button-height);
102
+ border: var(--rdp-day_button-border);
103
+ border-radius: var(--rdp-day_button-border-radius);
104
+ }
105
+
106
+ .rdp-day_button:disabled {
107
+ cursor: revert;
108
+ }
109
+
110
+ .rdp-caption_label {
111
+ z-index: 1;
112
+
113
+ position: relative;
114
+ display: inline-flex;
115
+ align-items: center;
116
+
117
+ white-space: nowrap;
118
+ border: 0;
119
+ }
120
+
121
+ .rdp-dropdown:focus-visible ~ .rdp-caption_label {
122
+ outline: 5px auto Highlight;
123
+ /* biome-ignore lint/suspicious/noDuplicateProperties: backward compatibility */
124
+ outline: 5px auto -webkit-focus-ring-color;
125
+ }
126
+
127
+ .rdp-button_next,
128
+ .rdp-button_previous {
129
+ border: none;
130
+ background: none;
131
+ padding: 0;
132
+ margin: 0;
133
+ cursor: pointer;
134
+ font: inherit;
135
+ color: inherit;
136
+ -moz-appearance: none;
137
+ -webkit-appearance: none;
138
+ display: inline-flex;
139
+ align-items: center;
140
+ justify-content: center;
141
+ position: relative;
142
+ appearance: none;
143
+
144
+ width: var(--rdp-nav_button-width);
145
+ height: var(--rdp-nav_button-height);
146
+ }
147
+
148
+ .rdp-button_next:disabled,
149
+ .rdp-button_next[aria-disabled="true"],
150
+ .rdp-button_previous:disabled,
151
+ .rdp-button_previous[aria-disabled="true"] {
152
+ cursor: revert;
153
+
154
+ opacity: var(--rdp-nav_button-disabled-opacity);
155
+ }
156
+
157
+ .rdp-chevron {
158
+ display: inline-block;
159
+ fill: var(--rdp-accent-color);
160
+ }
161
+
162
+ .rdp-root[dir="rtl"] .rdp-nav .rdp-chevron {
163
+ transform: rotate(180deg);
164
+ transform-origin: 50%;
165
+ }
166
+
167
+ .rdp-dropdowns {
168
+ position: relative;
169
+ display: inline-flex;
170
+ align-items: center;
171
+ gap: var(--rdp-dropdown-gap);
172
+ }
173
+ .rdp-dropdown {
174
+ z-index: 2;
175
+
176
+ /* Reset */
177
+ opacity: 0;
178
+ appearance: none;
179
+ position: absolute;
180
+ inset-block-start: 0;
181
+ inset-block-end: 0;
182
+ inset-inline-start: 0;
183
+ width: 100%;
184
+ margin: 0;
185
+ padding: 0;
186
+ cursor: inherit;
187
+ border: none;
188
+ line-height: inherit;
189
+ }
190
+
191
+ .rdp-dropdown_root {
192
+ position: relative;
193
+ display: inline-flex;
194
+ align-items: center;
195
+ }
196
+
197
+ .rdp-dropdown_root[data-disabled="true"] .rdp-chevron {
198
+ opacity: var(--rdp-disabled-opacity);
199
+ }
200
+
201
+ .rdp-month_caption {
202
+ display: flex;
203
+ align-content: center;
204
+ height: var(--rdp-nav-height);
205
+ font-weight: bold;
206
+ font-size: large;
207
+ }
208
+
209
+ .rdp-root[data-nav-layout="around"] .rdp-month,
210
+ .rdp-root[data-nav-layout="after"] .rdp-month {
211
+ position: relative;
212
+ }
213
+
214
+ .rdp-root[data-nav-layout="around"] .rdp-month_caption {
215
+ justify-content: center;
216
+ margin-inline-start: var(--rdp-nav_button-width);
217
+ margin-inline-end: var(--rdp-nav_button-width);
218
+ position: relative;
219
+ }
220
+
221
+ .rdp-root[data-nav-layout="around"] .rdp-button_previous {
222
+ position: absolute;
223
+ inset-inline-start: 0;
224
+ top: 0;
225
+ height: var(--rdp-nav-height);
226
+ display: inline-flex;
227
+ }
228
+
229
+ .rdp-root[data-nav-layout="around"] .rdp-button_next {
230
+ position: absolute;
231
+ inset-inline-end: 0;
232
+ top: 0;
233
+ height: var(--rdp-nav-height);
234
+ display: inline-flex;
235
+ justify-content: center;
236
+ }
237
+
238
+ .rdp-months {
239
+ position: relative;
240
+ display: flex;
241
+ flex-wrap: wrap;
242
+ gap: var(--rdp-months-gap);
243
+ max-width: fit-content;
244
+ }
245
+
246
+ .rdp-month_grid {
247
+ border-collapse: collapse;
248
+ }
249
+
250
+ .rdp-nav {
251
+ position: absolute;
252
+ inset-block-start: 0;
253
+ inset-inline-end: 0;
254
+
255
+ display: flex;
256
+ align-items: center;
257
+
258
+ height: var(--rdp-nav-height);
259
+ }
260
+
261
+ .rdp-weekday {
262
+ opacity: var(--rdp-weekday-opacity);
263
+ padding: var(--rdp-weekday-padding);
264
+ font-weight: 500;
265
+ font-size: smaller;
266
+ text-align: var(--rdp-weekday-text-align);
267
+ text-transform: var(--rdp-weekday-text-transform);
268
+ }
269
+
270
+ .rdp-week_number {
271
+ opacity: var(--rdp-week_number-opacity);
272
+ font-weight: 400;
273
+ font-size: small;
274
+ height: var(--rdp-week_number-height);
275
+ width: var(--rdp-week_number-width);
276
+ border: var(--rdp-week_number-border);
277
+ border-radius: var(--rdp-week_number-border-radius);
278
+ text-align: var(--rdp-weeknumber-text-align);
279
+ }
280
+
281
+ /* DAY MODIFIERS */
282
+ .rdp-today:not(.rdp-outside) {
283
+ color: var(--rdp-today-color);
284
+ }
285
+
286
+ .rdp-selected {
287
+ font-weight: bold;
288
+ font-size: large;
289
+ }
290
+
291
+ .rdp-selected .rdp-day_button {
292
+ border: var(--rdp-selected-border);
293
+ }
294
+
295
+ .rdp-outside {
296
+ opacity: var(--rdp-outside-opacity);
297
+ }
298
+
299
+ .rdp-disabled:not(.rdp-selected) {
300
+ opacity: var(--rdp-disabled-opacity);
301
+ }
302
+
303
+ .rdp-hidden {
304
+ visibility: hidden;
305
+ color: var(--rdp-range_start-color);
306
+ }
307
+
308
+ .rdp-range_start {
309
+ background: var(--rdp-range_start-background);
310
+ }
311
+
312
+ .rdp-range_start .rdp-day_button {
313
+ background-color: var(--rdp-range_start-date-background-color);
314
+ color: var(--rdp-range_start-color);
315
+ }
316
+
317
+ .rdp-range_middle {
318
+ background-color: var(--rdp-range_middle-background-color);
319
+ }
320
+
321
+ .rdp-range_middle .rdp-day_button {
322
+ border: unset;
323
+ border-radius: unset;
324
+ color: var(--rdp-range_middle-color);
325
+ }
326
+
327
+ .rdp-range_end {
328
+ background: var(--rdp-range_end-background);
329
+ color: var(--rdp-range_end-color);
330
+ }
331
+
332
+ .rdp-range_end .rdp-day_button {
333
+ color: var(--rdp-range_start-color);
334
+ background-color: var(--rdp-range_end-date-background-color);
335
+ }
336
+
337
+ .rdp-range_start.rdp-range_end {
338
+ background: revert;
339
+ }
340
+
341
+ .rdp-focusable {
342
+ cursor: pointer;
343
+ }
344
+
345
+ @keyframes rdp-slide_in_left {
346
+ 0% {
347
+ transform: translateX(-100%);
348
+ }
349
+ 100% {
350
+ transform: translateX(0);
351
+ }
352
+ }
353
+
354
+ @keyframes rdp-slide_in_right {
355
+ 0% {
356
+ transform: translateX(100%);
357
+ }
358
+ 100% {
359
+ transform: translateX(0);
360
+ }
361
+ }
362
+
363
+ @keyframes rdp-slide_out_left {
364
+ 0% {
365
+ transform: translateX(0);
366
+ }
367
+ 100% {
368
+ transform: translateX(-100%);
369
+ }
370
+ }
371
+
372
+ @keyframes rdp-slide_out_right {
373
+ 0% {
374
+ transform: translateX(0);
375
+ }
376
+ 100% {
377
+ transform: translateX(100%);
378
+ }
379
+ }
380
+
381
+ .rdp-weeks_before_enter {
382
+ animation: rdp-slide_in_left var(--rdp-animation_duration)
383
+ var(--rdp-animation_timing) forwards;
384
+ }
385
+
386
+ .rdp-weeks_before_exit {
387
+ animation: rdp-slide_out_left var(--rdp-animation_duration)
388
+ var(--rdp-animation_timing) forwards;
389
+ }
390
+
391
+ .rdp-weeks_after_enter {
392
+ animation: rdp-slide_in_right var(--rdp-animation_duration)
393
+ var(--rdp-animation_timing) forwards;
394
+ }
395
+
396
+ .rdp-weeks_after_exit {
397
+ animation: rdp-slide_out_right var(--rdp-animation_duration)
398
+ var(--rdp-animation_timing) forwards;
399
+ }
400
+
401
+ .rdp-root[dir="rtl"] .rdp-weeks_after_enter {
402
+ animation: rdp-slide_in_left var(--rdp-animation_duration)
403
+ var(--rdp-animation_timing) forwards;
404
+ }
405
+
406
+ .rdp-root[dir="rtl"] .rdp-weeks_before_exit {
407
+ animation: rdp-slide_out_right var(--rdp-animation_duration)
408
+ var(--rdp-animation_timing) forwards;
409
+ }
410
+
411
+ .rdp-root[dir="rtl"] .rdp-weeks_before_enter {
412
+ animation: rdp-slide_in_right var(--rdp-animation_duration)
413
+ var(--rdp-animation_timing) forwards;
414
+ }
415
+
416
+ .rdp-root[dir="rtl"] .rdp-weeks_after_exit {
417
+ animation: rdp-slide_out_left var(--rdp-animation_duration)
418
+ var(--rdp-animation_timing) forwards;
419
+ }
420
+
421
+ @keyframes rdp-fade_in {
422
+ from {
423
+ opacity: 0;
424
+ }
425
+ to {
426
+ opacity: 1;
427
+ }
428
+ }
429
+
430
+ @keyframes rdp-fade_out {
431
+ from {
432
+ opacity: 1;
433
+ }
434
+ to {
435
+ opacity: 0;
436
+ }
437
+ }
438
+
439
+ .rdp-caption_after_enter {
440
+ animation: rdp-fade_in var(--rdp-animation_duration)
441
+ var(--rdp-animation_timing) forwards;
442
+ }
443
+
444
+ .rdp-caption_after_exit {
445
+ animation: rdp-fade_out var(--rdp-animation_duration)
446
+ var(--rdp-animation_timing) forwards;
447
+ }
448
+
449
+ .rdp-caption_before_enter {
450
+ animation: rdp-fade_in var(--rdp-animation_duration)
451
+ var(--rdp-animation_timing) forwards;
452
+ }
453
+
454
+ .rdp-caption_before_exit {
455
+ animation: rdp-fade_out var(--rdp-animation_duration)
456
+ var(--rdp-animation_timing) forwards;
457
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@teja-app/ui",
3
- "version": "0.0.8",
3
+ "version": "0.0.10",
4
4
  "description": "Shared UI component library for Teja applications",
5
5
  "author": "Teja App",
6
6
  "license": "MIT",
@@ -33,7 +33,8 @@
33
33
  "./utils": {
34
34
  "types": "./dist/utils/index.d.ts",
35
35
  "import": "./dist/utils/index.js"
36
- }
36
+ },
37
+ "./styles.css": "./dist/ui.css"
37
38
  },
38
39
  "files": [
39
40
  "dist"
@@ -68,6 +69,7 @@
68
69
  "dependencies": {
69
70
  "@headlessui/react": "^2.2.9",
70
71
  "clsx": "^2.1.1",
72
+ "react-day-picker": "^9.14.0",
71
73
  "tailwind-merge": "^3.4.0"
72
74
  },
73
75
  "devDependencies": {