{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "css-progressbar", "type": "registry:ui", "title": "ProgressBar", "dependencies": [ "react-aria-components" ], "registryDependencies": [ "https://react-aria.adobe.com/registry/css-form.json" ], "files": [ { "path": "components/ui/ProgressBar.tsx", "type": "registry:ui", "content": "'use client';\nimport {\n ProgressBar as AriaProgressBar,\n type ProgressBarProps as AriaProgressBarProps\n} from 'react-aria-components/ProgressBar';\nimport {Label} from '@/registry/react-aria/ui/Form';\nimport './ProgressBar.css';\n\nexport interface ProgressBarProps extends AriaProgressBarProps {\n label?: string;\n}\n\nexport function ProgressBar({label, ...props}: ProgressBarProps) {\n return (\n \n {({percentage, valueText, isIndeterminate}) => (\n <>\n \n {valueText}\n
\n \n
\n \n )}\n \n );\n}\n" }, { "path": "components/ui/ProgressBar.css", "type": "registry:component", "content": "@import './theme.css';\n@import './utilities.css';\n\n.react-aria-ProgressBar {\n display: grid;\n grid-template-areas:\n 'label value'\n 'bar bar';\n grid-template-columns: 1fr auto;\n width: 250px;\n color: var(--text-color);\n font: var(--font-size) system-ui;\n\n .value {\n grid-area: value;\n }\n\n .track {\n grid-area: bar;\n forced-color-adjust: none;\n height: calc(var(--spacing-2) + 2px);\n border-radius: 9999px;\n overflow: clip;\n will-change: transform;\n }\n\n .fill {\n background: linear-gradient(\n to right,\n oklch(from var(--tint) 58% c h) 0px,\n oklch(from var(--tint) 72% c h) 20px,\n oklch(from var(--tint) 58% c h) 40px\n );\n background-size: 40px 100%;\n height: calc(100% - 2px);\n width: calc(var(--percent) - 2px);\n margin: 1px 0 0 1px;\n border-radius: inherit;\n animation: progress-fill 1s infinite linear;\n box-shadow:\n inset 0 1px 0 rgb(255 255 255 / 0.3),\n /* top specular highlight */ inset 0 2px 2px rgb(255 255 255 / 0.2),\n /* 3d effect */ 0 1px 0 lch(from var(--tint) 42% c h),\n /* bottom shadow */ 0 0 0 1px var(--tint-900); /* border */\n\n @media (prefers-color-scheme: dark) {\n box-shadow:\n 0 -1px 0 rgb(255 255 255 / 0.6),\n /* top specular highlight */ inset 0 2px 2px rgb(255 255 255 / 0.2),\n /* 3d effect */ 0 1px 0 lch(from var(--tint) 42% c h),\n /* bottom shadow */ 0 0 0 1px var(--tint-900); /* border */\n }\n\n @media (prefers-reduced-motion: reduce) {\n background: var(--highlight-background);\n animation: none;\n }\n\n @media (forced-colors: active) {\n background-image: none;\n background-color: Highlight;\n box-shadow: none;\n }\n }\n\n /* indeterminate */\n &:not([aria-valuenow]) {\n .fill {\n --fill-dark: oklch(from var(--tint) 58% c h);\n --fill-light: var(--tint-200);\n background-image: linear-gradient(\n 45deg,\n var(--fill-dark) 0px 12px,\n var(--fill-light) 15px 25px,\n var(--fill-dark) 28px\n );\n animation-duration: 0.5s;\n\n @media (forced-colors: active) {\n --fill-dark: Highlight;\n --fill-light: HighlightText;\n }\n }\n }\n}\n\n@keyframes progress-fill {\n from {\n background-position-x: 0;\n }\n\n to {\n background-position-x: -40px;\n }\n}\n" }, { "path": "components/ui/theme.css", "type": "registry:component", "content": "/* colors */\n:root {\n /* Change this variable to set the theme color for all components. */\n /* You can use the below presets, or choose a custom color. */\n --tint: var(--indigo);\n\n /* theme colors */\n /* lightness channel is only used as a multiplier for chroma (see below) */\n --gray: oklch(0.5 0 0);\n --red: oklch(0.6 0.181447 27.0726);\n --orange: oklch(0.7 0.150492 54);\n --yellow: oklch(0.8 0.128516 73.8032);\n --turquoise: oklch(0.5 0.081146 205.114);\n --cyan: oklch(0.4 0.142107 243.926);\n --green: oklch(0.5 0.121276 155.372);\n --blue: oklch(0.5 0.22049 266.315);\n --indigo: oklch(1 0.25049 284.23);\n --purple: oklch(0.7 0.223324 302);\n --pink: oklch(0.6 0.177717 347.813);\n\n /** tint color scale */\n --tint-100: oklch(from var(--tint) var(--lightness-100) var(--chroma-100) h);\n --tint-200: oklch(from var(--tint) var(--lightness-200) var(--chroma-200) h);\n --tint-300: oklch(from var(--tint) var(--lightness-300) var(--chroma-300) h);\n --tint-400: oklch(from var(--tint) var(--lightness-400) var(--chroma-400) h);\n --tint-500: oklch(from var(--tint) var(--lightness-500) var(--chroma-500) h);\n --tint-600: oklch(from var(--tint) var(--lightness-600) var(--chroma-600) h);\n --tint-700: oklch(from var(--tint) var(--lightness-700) var(--chroma-700) h);\n --tint-800: oklch(from var(--tint) var(--lightness-800) var(--chroma-800) h);\n --tint-900: oklch(from var(--tint) var(--lightness-900) var(--chroma-900) h);\n --tint-1000: oklch(from var(--tint) var(--lightness-1000) var(--chroma-1000) h);\n --tint-1100: oklch(from var(--tint) var(--lightness-1100) var(--chroma-1100) h);\n --tint-1200: oklch(from var(--tint) var(--lightness-1200) var(--chroma-1200) h);\n --tint-1300: oklch(from var(--tint) var(--lightness-1300) var(--chroma-1300) h);\n --tint-1400: oklch(from var(--tint) var(--lightness-1400) var(--chroma-1400) h);\n --tint-1500: oklch(from var(--tint) var(--lightness-1500) var(--chroma-1500) h);\n --tint-1600: oklch(from var(--tint) var(--lightness-1600) var(--chroma-1600) h);\n\n /* gray scale */\n --gray-100: oklch(from var(--gray) var(--lightness-100) c h);\n --gray-200: oklch(from var(--gray) var(--lightness-200) c h);\n --gray-300: oklch(from var(--gray) var(--lightness-300) c h);\n --gray-400: oklch(from var(--gray) var(--lightness-400) c h);\n --gray-500: oklch(from var(--gray) var(--lightness-500) c h);\n --gray-600: oklch(from var(--gray) var(--lightness-600) c h);\n --gray-700: oklch(from var(--gray) var(--lightness-700) c h);\n --gray-800: oklch(from var(--gray) var(--lightness-800) c h);\n --gray-900: oklch(from var(--gray) var(--lightness-900) c h);\n --gray-1000: oklch(from var(--gray) var(--lightness-1000) c h);\n --gray-1100: oklch(from var(--gray) var(--lightness-1100) c h);\n --gray-1200: oklch(from var(--gray) var(--lightness-1200) c h);\n --gray-1300: oklch(from var(--gray) var(--lightness-1300) c h);\n --gray-1400: oklch(from var(--gray) var(--lightness-1400) c h);\n --gray-1500: oklch(from var(--gray) var(--lightness-1500) c h);\n --gray-1600: oklch(from var(--gray) var(--lightness-1600) c h);\n}\n\n/* light mode colors */\n:root {\n --background-color: #f8f8f8;\n --gray-50: #ffffff;\n\n --lightness-100: 98.1187%;\n --lightness-200: 95.2045%;\n --lightness-300: 91.1434%;\n --lightness-400: 85.1751%;\n --lightness-500: 79.1773%;\n --lightness-600: 72.3297%;\n --lightness-700: 67.0121%;\n --lightness-800: 62.3039%;\n --lightness-900: 57.9699%;\n --lightness-1000: 51.9076%;\n --lightness-1100: 46.9058%;\n --lightness-1200: 41.0821%;\n --lightness-1300: 35.3616%;\n --lightness-1400: 29.6725%;\n --lightness-1500: 24.5366%;\n --lightness-1600: 16.6959%;\n\n /* lower chroma at low lightness levels */\n --chroma-100: calc(l * c * 0.5);\n --chroma-200: calc(l * c * 0.6);\n --chroma-300: calc(l * c * 0.7);\n --chroma-400: calc(l * c * 0.8);\n --chroma-500: calc(l * c * 0.9);\n --chroma-600: c;\n --chroma-700: c;\n --chroma-800: c;\n --chroma-900: c;\n --chroma-1000: c;\n --chroma-1100: c;\n --chroma-1200: c;\n --chroma-1300: c;\n --chroma-1400: c;\n --chroma-1500: c;\n --chroma-1600: c;\n\n --highlight-hover: rgb(0 0 0 / 0.07);\n --highlight-pressed: rgb(0 0 0 / 0.15);\n --overlay-background: var(--gray-50);\n --overlay-border: rgb(0 0 0 / 0.06);\n --popover-shadow: 0 8px 20px rgba(0 0 0 / 0.12);\n}\n\n/* dark mode colors */\n@media (prefers-color-scheme: dark) {\n :root {\n --background-color: #1b1b1b;\n --gray-50: oklch(22% 0 0);\n\n --lightness-100: 29.6725%;\n --lightness-200: 35.3616%;\n --lightness-300: 41.0821%;\n --lightness-400: 46.9058%;\n --lightness-500: 51.9076%;\n --lightness-600: 57.9699%;\n --lightness-700: 56.1347%;\n --lightness-800: 59.2866%;\n --lightness-900: 62.3039%;\n --lightness-1000: 67.0121%;\n --lightness-1100: 72.3297%;\n --lightness-1200: 79.1773%;\n --lightness-1300: 85.1751%;\n --lightness-1400: 91.1434%;\n --lightness-1500: 95.2045%;\n --lightness-1600: 100%;\n\n --highlight-hover: rgb(255 255 255 / 0.1);\n --highlight-pressed: rgb(255 255 255 / 0.2);\n --overlay-background: var(--gray-100);\n --overlay-border: rgb(255 255 255 / 0.2);\n --popover-shadow: 0 8px 20px rgba(0 0 0 / 0.5);\n }\n}\n\n/* Semantic colors */\n:root {\n --focus-ring-color: var(--tint-1000);\n --text-color: var(--gray-1200);\n --text-color-hover: var(--gray-1300);\n --text-color-disabled: var(--gray-600);\n --text-color-placeholder: var(--gray-1000);\n --link-color: var(--tint-1200);\n --link-color-secondary: var(--gray-1200);\n --link-color-pressed: var(--tint-1300);\n --border-color: var(--gray-400);\n --border-color-hover: var(--gray-500);\n --border-color-disabled: var(--gray-300);\n --field-text-color: var(--gray-1400);\n --button-background: var(--tint-100);\n --button-background-pressed: var(--tint-200);\n /* these colors are the same between light and dark themes\n * to ensure contrast with the foreground color */\n --highlight-background: oklch(from var(--tint) 55% c h);\n --highlight-background-pressed: oklch(from var(--tint) 50% c h);\n --highlight-background-invalid: oklch(from var(--red) var(--lightness-900) c h);\n --highlight-foreground: white;\n --highlight-overlay: oklch(from var(--tint-1000) l c h / 15%);\n --invalid-color: oklch(from var(--red) var(--lightness-1000) c h);\n --field-background: var(--gray-50);\n}\n\n/* Windows high contrast mode overrides */\n@media (forced-colors: active) {\n :root {\n --background-color: Canvas;\n --focus-ring-color: Highlight;\n --text-color: ButtonText;\n --text-color-hover: ButtonText;\n --text-color-disabled: GrayText;\n --text-color-placeholder: ButtonText;\n --link-color: LinkText;\n --link-color-secondary: LinkText;\n --link-color-pressed: LinkText;\n --border-color: ButtonBorder;\n --border-color-hover: ButtonBorder;\n --border-color-pressed: ButtonBorder;\n --border-color-disabled: GrayText;\n --field-background: Field;\n --field-text-color: FieldText;\n --overlay-background: Canvas;\n --overlay-border: ButtonBorder;\n --button-background: ButtonFace;\n --button-background-pressed: ButtonFace;\n --highlight-background: Highlight;\n --highlight-background-pressed: Highlight;\n --highlight-background-invalid: LinkText;\n --highlight-foreground: HighlightText;\n --invalid-color: LinkText;\n }\n}\n\n/* typography and spacing scale */\n:root {\n --font-size: 0.875rem; /* 14px */\n --font-size-sm: 0.75rem; /* 12px */\n --font-size-lg: 1rem; /* 16px */\n --radius: 8px;\n --radius-sm: 6px;\n --radius-lg: 10px;\n --radius-xl: 16px;\n --spacing: 0.25rem; /* 4px */\n --spacing-1: var(--spacing);\n --spacing-2: calc(2 * var(--spacing));\n --spacing-3: calc(3 * var(--spacing));\n --spacing-4: calc(4 * var(--spacing));\n --spacing-5: calc(5 * var(--spacing));\n --spacing-6: calc(6 * var(--spacing));\n --spacing-7: calc(7 * var(--spacing));\n --spacing-8: calc(8 * var(--spacing));\n --spacing-9: calc(9 * var(--spacing));\n --spacing-10: calc(10 * var(--spacing));\n}\n\n/* Scale up hit targets on high resolution mobile devices. */\n@media (min-resolution: 200dpi) {\n :root {\n --spacing: calc(0.25rem * 1.25);\n --font-size: 1.0625rem; /* 17px */\n --font-size-sm: 0.9375rem; /* 15px */\n --font-size-lg: 1.25rem; /* 20px */\n }\n}\n" }, { "path": "components/ui/utilities.css", "type": "registry:component", "content": "@layer utilities {\n /* utility that creates a button-like element, which can be optionally selected */\n .button-base {\n --button-color: var(--tint);\n --button-background: oklch(from var(--button-color) var(--lightness-100) var(--chroma-100) h);\n --button-gradient: oklch(from var(--button-color) var(--lightness-200) var(--chroma-200) h);\n --button-border: oklch(from var(--button-color) var(--lightness-300) var(--chroma-300) h);\n --button-highlight: rgb(255 255 255 / 0.8);\n --button-shadow: oklch(from var(--button-color) var(--lightness-400) var(--chroma-400) h);\n --button-border-size: 1px;\n --button-text: oklch(from var(--button-color) var(--lightness-1400) var(--chroma-1400) h);\n --button-gradient-size: 8px;\n\n background: var(--button-background);\n color: var(--button-text);\n box-shadow:\n inset 0 -1px 0 var(--button-shadow),\n /* bottom shadow */ inset 0 0 0 var(--button-border-size) var(--button-border),\n /* border */ inset 0px calc(var(--button-border-size) + 1px) 0px var(--button-highlight),\n /* top specular highlight */ inset 0px calc(-1 * var(--button-gradient-size))\n var(--button-gradient-size) -2px var(--button-gradient); /* inner gradient */\n outline: none;\n transition-property: background, color, scale, box-shadow;\n transition-duration: 200ms;\n will-change: scale;\n forced-color-adjust: none;\n -webkit-tap-highlight-color: transparent;\n\n @media (prefers-color-scheme: dark) {\n --button-shadow: oklch(from var(--button-color) var(--lightness-200) var(--chroma-200) h);\n --button-highlight: rgb(255 255 255 / 0.15);\n box-shadow:\n inset 0 var(--button-border-size) 0 var(--button-highlight),\n /* top specular highlight */ inset 0 calc(-1 * var(--button-border-size)) 0\n var(--button-shadow),\n /* bottom shadow */ inset 0 0 0 var(--button-border-size) var(--button-border),\n /* border */ inset 0 var(--button-gradient-size) var(--button-gradient-size) -2px\n var(--button-gradient); /* inner gradient */\n }\n\n &:where([data-pressed]) {\n --button-background: oklch(from var(--button-color) var(--lightness-200) var(--chroma-200) h);\n }\n\n &:where([data-focus-visible]) {\n outline: 2px solid var(--focus-ring-color);\n outline-offset: 2px;\n }\n\n &:where([data-variant='secondary']) {\n --button-color: var(--gray);\n }\n\n &:where([data-variant='quiet']) {\n --button-background: none;\n --button-text: var(--text-color);\n box-shadow: 0 0 0 1px transparent;\n\n &:where([data-hovered], [data-pressed]) {\n --button-background: var(--tint-200);\n --button-text: var(--tint-1400);\n box-shadow: 0 0 0 1px var(--tint-200);\n }\n }\n\n &:where([data-selected]) {\n --button-background: oklch(from var(--button-color) 55% c h);\n --button-border: oklch(from var(--button-color) 50% c h);\n --button-gradient: var(--button-border);\n --button-highlight: rgb(255 255 255 / 0.2);\n --button-shadow: oklch(from var(--button-color) 30% c h);\n --button-text: var(--highlight-foreground);\n\n box-shadow:\n inset 0 -1px 0 var(--button-shadow),\n /* bottom shadow */ inset 0 0 0 1px var(--button-border),\n /* border */ inset 0 2px 0 var(--button-highlight),\n /* top specular highlight */ inset 0 calc(-1 * var(--button-gradient-size))\n var(--button-gradient-size) var(--button-gradient); /* inner gradient */\n\n @media (prefers-color-scheme: dark) {\n --button-highlight: rgb(255 255 255 / 0.4);\n --button-gradient: rgb(255 255 255 / 0.2);\n --button-shadow: var(--button-border);\n box-shadow:\n inset 0 1px 0 var(--button-highlight),\n /* top specular highlight */ inset 0 var(--button-gradient-size)\n var(--button-gradient-size) var(--button-gradient),\n /* inner gradient */ inset 0 0 0 1px var(--button-border); /* border */\n }\n\n &:where([data-pressed]) {\n --button-background: oklch(from var(--button-color) 50% c h);\n }\n }\n\n &:where([data-disabled]) {\n box-shadow: none;\n --button-background: var(--border-color-disabled);\n --button-text: var(--text-color-disabled);\n\n &:where([data-variant='quiet']) {\n --button-background: none;\n }\n }\n\n @media (forced-colors: active) {\n --button-background: ButtonFace;\n --button-text: ButtonText;\n --button-border: ButtonBorder;\n box-shadow: inset 0 0 0 var(--button-border-size) var(--button-border);\n\n &:where([data-variant='quiet']) {\n --button-border: transparent;\n &:where([data-hovered], [data-pressed]) {\n --button-border: ButtonBorder;\n }\n }\n\n &:where([data-selected]) {\n --button-background: Highlight;\n --button-text: HighlightText;\n --button-border: Highlight;\n }\n\n &:where([data-disabled]) {\n --button-background: ButtonFace;\n --button-text: GrayText;\n --button-border: GrayText;\n\n &:where([data-variant='quiet']) {\n --button-border: transparent;\n }\n }\n }\n }\n\n /* utility that creates a small indicator, such as a checkbox, radio, switch, or slider thumb */\n .indicator {\n --indicator-color: var(--gray);\n --indicator-background: oklch(\n from var(--indicator-color) var(--lightness-100) var(--chroma-100) h\n );\n --indicator-border: oklch(from var(--indicator-color) var(--lightness-800) var(--chroma-800) h);\n --indicator-drop-shadow: 0 0;\n\n background: var(--indicator-background);\n box-shadow:\n inset 0 0 0 1px var(--indicator-border),\n /* border */ inset 0 2px 0 white,\n /* top specular highlight */ inset 0 -4px 2px\n oklch(from var(--indicator-color) 30% c h / 0.08),\n /* inner gradient */ var(--indicator-drop-shadow); /* optional drop shadow */\n will-change: scale;\n\n @media (prefers-color-scheme: dark) {\n box-shadow:\n inset 0 1px 0 rgb(255 255 255 / 0.4),\n /* top specular highlight */ inset 0 4px 2px rgb(255 255 255 / 0.1),\n /* inner shadow */ inset 0 0 0 1px var(--indicator-border),\n /* border */ var(--indicator-drop-shadow); /* optional drop shadow */\n }\n\n @media (forced-colors: active) {\n --indicator-background: ButtonFace;\n --indicator-border: ButtonBorder;\n box-shadow: inset 0 0 0 1px var(--indicator-border);\n }\n\n &[data-pressed],\n [data-pressed] & {\n scale: 0.9;\n }\n\n [data-selected] > &,\n [data-indeterminate] > & {\n --indicator-color: var(--highlight-background);\n --indicator-background: var(--indicator-color);\n --indicator-highlight: rgb(255 255 255 / 0.3);\n --indicator-shadow: oklch(from var(--indicator-color) 45% c h);\n --indicator-border: var(--indicator-background);\n box-shadow:\n inset 0 -1px 0 var(--indicator-shadow),\n /* bottom shadow */ inset 0 0 0 1px var(--indicator-border),\n /* border */ inset 0 2px 0 var(--indicator-highlight),\n /* top specular highlight */ var(--indicator-drop-shadow); /* optional drop shadow */\n\n @media (prefers-color-scheme: dark) {\n --indicator-highlight: rgb(255 255 255 / 0.5);\n --indicator-gradient: rgb(255 255 255 / 0.12);\n box-shadow:\n inset 0 1px 0 var(--indicator-highlight),\n /* top specular highlight */ inset 0 4px 2px var(--indicator-gradient),\n /* inner gradient */ inset 0 0 0 1px var(--indicator-border),\n /* border */ var(--indicator-drop-shadow); /* optional drop shadow */\n }\n\n @media (forced-colors: active) {\n box-shadow: none;\n }\n }\n\n &[data-invalid],\n [data-invalid] > & {\n --indicator-color: var(--invalid-color);\n\n @media (forced-colors: active) {\n --indicator-border: var(--invalid-color);\n }\n }\n\n &[data-focus-visible],\n [data-focus-visible] > & {\n outline: 2px solid var(--focus-ring-color);\n outline-offset: 2px;\n }\n\n &[data-disabled],\n [data-disabled] > & {\n background: var(--field-background);\n box-shadow: inset 0 0 0 1px var(--border-color-disabled);\n }\n }\n\n /* utility that creates an inset effect, used for form fields, slider/progress tracks, etc. */\n .inset {\n --inset-background: var(--field-background);\n --inset-border: var(--border-color);\n --inset-border-size: 1px;\n --inset-shadow-offset: 2px;\n --inset-shadow-size: 4px;\n\n background: var(--inset-background);\n box-shadow:\n inset 0 0 0 var(--inset-border-size) var(--inset-border),\n /* border */ inset 0 var(--inset-shadow-offset) var(--inset-shadow-size) rgb(0 0 0 / 0.15),\n /* inner shadow */ 0 1px 0 var(--gray-50); /* bottom specular highlight */\n transition: box-shadow 200ms;\n forced-color-adjust: none;\n\n @media (prefers-color-scheme: dark) {\n --inset-border: var(--gray-200);\n --border-color-hover: var(--gray-300);\n --inset-highlight: var(--gray-400);\n --inset-shadow-size: 6px;\n box-shadow:\n inset 0 calc(-1 * var(--inset-border-size)) 0 var(--inset-highlight),\n /* bottom specular highlight */ inset 0 0 0 var(--inset-border-size) var(--inset-border),\n /* border */ inset 0 1px var(--inset-shadow-size) rgb(0 0 0); /* inner shadow */\n }\n\n &:where([data-hovered], [data-pressed]) {\n --inset-border: var(--border-color-hover);\n }\n\n @media (forced-colors: active) {\n --inset-border: ButtonBorder;\n box-shadow: inset 0 0 0 var(--inset-border-size) var(--inset-border);\n }\n\n &:where([data-invalid]) {\n --inset-border: var(--invalid-color);\n --inset-highlight: var(--inset-border);\n }\n\n &:where([data-disabled]) {\n box-shadow: inset 0 0 0 1px var(--border-color-disabled);\n }\n\n &.track {\n --inset-shadow-offset: 1px;\n --inset-shadow-size: 3px;\n\n @media (prefers-color-scheme: light) {\n --inset-background: var(--gray-300);\n --inset-border: var(--gray-500);\n --inset-border-size: 0.5px;\n }\n\n @media (forced-colors: active) {\n --inset-background: Field;\n --inset-border: ButtonBorder;\n --inset-border-size: 1px;\n }\n }\n }\n}\n" } ] }