@vireo-ai/trellis-ui 0.1.0 → 0.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vireo-ai/trellis-ui",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "type": "module",
   "description": "Django-native UI toolkit for building realtime and interactive web apps.",
   "license": "MIT",
@@ -13,6 +13,8 @@
     "README.md",
     "types/**/*.d.ts",
     "src/theme.css",
+    "src/components.css",
+    "src/components/**/*.css",
     "trellis_ui/static/trellis_ui/css/styles.css",
     "trellis_ui/static/trellis_ui/js/index.js",
     "trellis_ui/static/trellis_ui/js/esm/**/*.js",
@@ -76,6 +78,7 @@
     "check": "pnpm run build:package && pnpm run typecheck && pnpm test && uv run pytest && pnpm run test:browser",
     "check:packages": "pnpm pack --dry-run && uv build --sdist --wheel",
     "check:release": "pnpm run check && pnpm run check:packages",
+    "release": "node scripts/release.mjs",
     "publish:npm": "pnpm run check:release && pnpm publish --access public",
     "publish:pypi": "pnpm run build:package && uv build --sdist --wheel && uv publish dist/django_trellis-${npm_package_version}.tar.gz dist/django_trellis-${npm_package_version}-py3-none-any.whl",
     "publish:all": "pnpm run check:release && pnpm publish --access public && uv publish dist/django_trellis-${npm_package_version}.tar.gz dist/django_trellis-${npm_package_version}-py3-none-any.whl",

package/src/components/accordion/styles.css

@@ -0,0 +1,16 @@
+@layer components {
+  [data-ui-accordion-trigger][data-state="open"] [data-ui-accordion-icon] {
+    transform: rotate(180deg);
+  }
+
+  [data-ui-accordion-trigger][data-icon-position="leading"] [data-ui-accordion-icon],
+  [data-ui-accordion][data-icon-position="leading"] [data-ui-accordion-trigger][data-icon-position="inherit"] [data-ui-accordion-icon] {
+    order: -1;
+    transform: rotate(-90deg);
+  }
+
+  [data-ui-accordion-trigger][data-icon-position="leading"][data-state="open"] [data-ui-accordion-icon],
+  [data-ui-accordion][data-icon-position="leading"] [data-ui-accordion-trigger][data-icon-position="inherit"][data-state="open"] [data-ui-accordion-icon] {
+    transform: rotate(0deg);
+  }
+}

package/src/components/brand/styles.css

@@ -0,0 +1,8 @@
+@layer components {
+  [data-ui-brand-logo] svg {
+    display: block;
+    flex-shrink: 0;
+    height: 100%;
+    width: 100%;
+  }
+}

package/src/components/button/styles.css

@@ -0,0 +1,178 @@
+@layer components {
+  [data-ui-button] {
+    isolation: isolate;
+    overflow: hidden;
+  }
+
+  [data-ui-button]::before {
+    background: var(--_ui-button-overlay, transparent);
+    border-radius: inherit;
+    content: "";
+    inset: 0;
+    opacity: 0;
+    pointer-events: none;
+    position: absolute;
+    z-index: 0;
+  }
+
+  [data-ui-button]:hover:not(:disabled, [aria-disabled="true"], [data-ui-loading])::before {
+    opacity: 1;
+  }
+
+  [data-ui-button]:active:not(:disabled, [aria-disabled="true"], [data-ui-loading])::before {
+    background: var(--_ui-button-overlay-active, var(--_ui-button-overlay, transparent));
+    opacity: 1;
+  }
+
+  [data-ui-button] > * {
+    position: relative;
+    z-index: 1;
+  }
+
+  [data-ui-button][data-variant="surface"],
+  [data-ui-button][data-variant="outline"] {
+    --_ui-button-overlay: var(--color-base-a2);
+    --_ui-button-overlay-active: var(--color-base-a3);
+  }
+
+  [data-ui-button][data-variant="surface"]:hover,
+  [data-ui-button][data-variant="surface"]:active {
+    background-color: var(--ui-control-bg) !important;
+  }
+
+  [data-ui-button][data-variant="outline"]:hover,
+  [data-ui-button][data-variant="outline"]:active {
+    background-color: transparent !important;
+  }
+
+  [data-ui-button][data-variant="solid"] {
+    --_ui-button-overlay: rgb(255 255 255 / 0.10);
+    --_ui-button-overlay-active: rgb(255 255 255 / 0.16);
+    --_ui-button-highlight: rgb(255 255 255 / 0.18);
+    box-shadow:
+      inset 0 1px var(--_ui-button-highlight),
+      var(--shadow-1) !important;
+  }
+
+  [data-ui-button][data-variant="solid"][data-color="neutral"]:hover,
+  [data-ui-button][data-variant="solid"][data-color="neutral"]:active {
+    background-color: var(--color-base-12) !important;
+  }
+
+  [data-ui-button][data-variant="solid"][data-color="accent"]:hover,
+  [data-ui-button][data-variant="solid"][data-color="accent"]:active {
+    background-color: var(--color-accent-solid) !important;
+  }
+
+  [data-ui-button][data-variant="soft"][data-color="neutral"] {
+    --_ui-button-overlay: var(--color-base-a3);
+    --_ui-button-overlay-active: var(--color-base-a4);
+  }
+
+  [data-ui-button][data-variant="soft"][data-color="neutral"]:hover,
+  [data-ui-button][data-variant="soft"][data-color="neutral"]:active {
+    background-color: var(--color-base-a2) !important;
+  }
+
+  [data-ui-button][data-variant="soft"][data-color="accent"] {
+    --_ui-button-overlay: var(--color-accent-a3);
+    --_ui-button-overlay-active: var(--color-accent-a4);
+  }
+
+  [data-ui-button][data-variant="soft"][data-color="accent"]:hover,
+  [data-ui-button][data-variant="soft"][data-color="accent"]:active {
+    background-color: var(--color-accent-surface) !important;
+  }
+
+  [data-ui-button][data-variant="soft"][data-color="danger"] {
+    --_ui-button-overlay: var(--color-danger-a3);
+    --_ui-button-overlay-active: var(--color-danger-a4);
+  }
+
+  [data-ui-button][data-variant="soft"][data-color="danger"]:hover,
+  [data-ui-button][data-variant="soft"][data-color="danger"]:active {
+    background-color: var(--color-danger-surface) !important;
+  }
+
+  [data-ui-button][data-variant="ghost"] {
+    --_ui-button-overlay: var(--color-base-a3);
+    --_ui-button-overlay-active: var(--color-base-a4);
+  }
+
+  [data-ui-button][data-variant="ghost"]:hover,
+  [data-ui-button][data-variant="ghost"]:active {
+    background-color: transparent !important;
+  }
+
+  [data-ui-button][data-variant="ghost"][data-color="accent"],
+  [data-ui-button][data-variant="outline"][data-color="accent"] {
+    --_ui-button-overlay: var(--color-accent-a3);
+    --_ui-button-overlay-active: var(--color-accent-a4);
+  }
+
+  [data-ui-button][data-variant="ghost"][data-color="danger"],
+  [data-ui-button][data-variant="outline"][data-color="danger"] {
+    --_ui-button-overlay: var(--color-danger-a3);
+    --_ui-button-overlay-active: var(--color-danger-a4);
+  }
+
+  [data-ui-button][data-variant="solid"][data-color="danger"]:hover,
+  [data-ui-button][data-variant="solid"][data-color="danger"]:active {
+    background-color: var(--color-danger-solid) !important;
+  }
+
+  [data-ui-button][data-ui-loading] {
+    cursor: wait;
+  }
+
+  [data-ui-button]:disabled,
+  [data-ui-button][aria-disabled="true"] {
+    pointer-events: none;
+  }
+
+  [data-ui-button]:is(:disabled, [aria-disabled="true"]):not([data-ui-loading]) {
+    opacity: 0.5;
+  }
+
+  [data-ui-button] [data-ui-button-loading-indicator] {
+    opacity: 0;
+  }
+
+  [data-ui-button][data-ui-loading] [data-ui-button-content] {
+    opacity: 0;
+  }
+
+  [data-ui-button][data-ui-loading] [data-ui-button-loading-indicator] {
+    opacity: 1;
+  }
+
+  [data-ui-button-group] > [data-ui-button] {
+    position: relative;
+  }
+
+  [data-ui-button-group] > [data-ui-button]:hover {
+    z-index: 2;
+  }
+
+  [data-ui-button-group] > [data-ui-button]:focus-visible {
+    z-index: 3;
+  }
+
+  [data-ui-button-group] > [data-ui-button]:not(:first-child) {
+    margin-left: -1px;
+  }
+
+  [data-ui-button-group] > [data-ui-button]:first-child:not(:last-child) {
+    border-top-right-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
+  }
+
+  [data-ui-button-group] > [data-ui-button]:not(:first-child):not(:last-child) {
+    border-radius: 0 !important;
+  }
+
+  [data-ui-button-group] > [data-ui-button]:last-child:not(:first-child) {
+    border-top-left-radius: 0 !important;
+    border-bottom-left-radius: 0 !important;
+  }
+}

package/src/components/date-picker/styles.css

@@ -0,0 +1,426 @@
+@layer components {
+  [data-ui-date-picker] {
+    --ui-date-picker-selected-bg: var(--color-base-12);
+    --ui-date-picker-selected-bg-hover: var(--color-base-12);
+    --ui-date-picker-selected-fg: var(--color-surface-inverse-fg);
+    --ui-date-picker-range-bg: var(--color-base-a3);
+    --ui-date-picker-range-bg-hover: var(--color-base-a4);
+    --ui-date-picker-month-heading-size: 1.75rem;
+    --ui-date-picker-month-min: 16.25rem;
+    --ui-date-picker-week-gap: 0.125rem;
+    --ui-date-picker-week-row-size: 2.125rem;
+  }
+
+  [data-ui-date-picker][data-color="accent"] {
+    --ui-date-picker-selected-bg: var(--color-accent-solid);
+    --ui-date-picker-selected-bg-hover: var(--color-accent-solid-hover);
+    --ui-date-picker-selected-fg: var(--color-accent-contrast);
+    --ui-date-picker-range-bg: var(--color-accent-surface);
+    --ui-date-picker-range-bg-hover: var(--color-accent-surface-hover);
+  }
+
+  [data-ui-date-picker-native]:is(:hover, :active):not(:focus):not(:disabled):not([aria-invalid="true"]) {
+    --ui-control-shadow: var(--ui-control-shadow-hover);
+  }
+
+  [data-ui-date-picker-native]:focus:not([aria-invalid="true"]) {
+    --ui-control-shadow: var(--ui-control-shadow-focus);
+    box-shadow: var(--shadow-control), var(--shadow-focus);
+  }
+
+  [data-ui-date-picker-native][aria-invalid="true"] {
+    --ui-control-shadow: var(--ui-control-shadow-invalid);
+  }
+
+  [data-ui-date-picker-native][aria-invalid="true"]:is(:hover, :active):not(:focus):not(:disabled) {
+    --ui-control-shadow: var(--ui-control-shadow-invalid-hover);
+  }
+
+  [data-ui-date-picker-native][aria-invalid="true"]:focus {
+    --ui-control-shadow: var(--ui-control-shadow-invalid-focus);
+    box-shadow: var(--shadow-danger-focus);
+  }
+
+  [data-ui-date-picker-calendar] {
+    --color-accent: var(--ui-date-picker-selected-bg);
+    --color-text-on-accent: var(--ui-date-picker-selected-fg);
+    color: var(--color-foreground);
+    inline-size: max-content;
+    max-inline-size: none;
+  }
+
+  [data-ui-date-picker-panel] {
+    inline-size: max-content;
+    max-inline-size: calc(100vw - 2rem);
+  }
+
+  [data-ui-date-picker-panel]:not(:has([data-ui-date-picker-presets])) {
+    inline-size: max-content;
+    grid-template-columns: auto !important;
+  }
+
+  [data-ui-date-picker-panel]:not(:has([data-ui-date-picker-presets])):has([data-ui-date-picker-calendar][months="2"]) {
+    inline-size: max-content;
+  }
+
+  [data-ui-date-picker-panel]:not(:has([data-ui-date-picker-presets])):has([data-ui-date-picker-calendar][months="3"]) {
+    inline-size: max-content;
+  }
+
+  [data-ui-date-picker-panel]:has([data-ui-date-picker-presets]) {
+    inline-size: max-content;
+  }
+
+  [data-ui-date-picker-calendar-wrap] {
+    block-size: 100%;
+    inline-size: 100%;
+    max-inline-size: calc(100vw - 2rem);
+  }
+
+  [data-ui-date-picker-calendar-wrap]:not(:has([data-ui-date-picker-presets])) {
+    inline-size: 100%;
+  }
+
+  [data-ui-date-picker-calendar-today] {
+    align-items: center;
+    background-color: transparent;
+    border: 0;
+    border-radius: var(--radius-2);
+    color: var(--color-foreground-muted);
+    display: inline-flex;
+    block-size: 1.75rem;
+    inline-size: 1.75rem;
+    justify-content: center;
+    padding: 0;
+    position: absolute;
+    right: 5rem;
+    top: var(--ui-popover-padding);
+    z-index: 1;
+  }
+
+  [data-ui-date-picker-today-day] {
+    align-items: center;
+    color: var(--color-foreground);
+    display: flex;
+    font-size: 0.5625rem;
+    font-weight: var(--font-weight-semibold);
+    inset-block: 0.3125rem 0;
+    inset-inline: 0;
+    justify-content: center;
+    line-height: 1;
+    position: absolute;
+    text-align: center;
+  }
+
+  [data-ui-date-picker-today-icon] {
+    block-size: 1.125rem;
+    border: 1.5px solid currentColor;
+    border-radius: var(--radius-2);
+    display: block;
+    inline-size: 1.125rem;
+    overflow: hidden;
+    position: relative;
+  }
+
+  [data-ui-date-picker-today-icon]::before {
+    background-color: currentColor;
+    block-size: 0.1875rem;
+    content: "";
+    inset-block-start: 0;
+    inset-inline: 0;
+    position: absolute;
+  }
+
+  [data-ui-date-picker-today-icon]::after {
+    background:
+      linear-gradient(currentColor 0 0) 0.25rem 0 / 0.125rem 0.25rem no-repeat,
+      linear-gradient(currentColor 0 0) calc(100% - 0.25rem) 0 / 0.125rem 0.25rem no-repeat;
+    content: "";
+    inset: -0.1875rem 0 0;
+    position: absolute;
+  }
+
+  [data-ui-date-picker-calendar-today]:hover {
+    background-color: var(--color-base-a2);
+    color: var(--color-foreground);
+  }
+
+  [data-ui-date-picker-calendar-today]:focus-visible {
+    box-shadow: var(--shadow-focus);
+    outline: none;
+  }
+
+  [data-ui-date-picker-calendar]::part(container) {
+    display: grid;
+    gap: 0.625rem;
+  }
+
+  [data-ui-date-picker-calendar]::part(header) {
+    align-items: center;
+    display: grid;
+    column-gap: 0.25rem;
+    grid-template-columns: minmax(0, 1fr) auto auto;
+    min-block-size: 1.75rem;
+    min-width: 0;
+  }
+
+  [data-ui-date-picker-calendar]::part(heading) {
+    align-items: center;
+    color: var(--color-foreground);
+    display: flex;
+    font-size: var(--text-sm);
+    font-weight: var(--font-weight-semibold);
+    gap: 0.375rem;
+    line-height: var(--text-sm--line-height);
+    min-width: 0;
+    text-align: left;
+  }
+
+  [data-ui-date-picker-calendar]::part(button) {
+    align-items: center;
+    background: transparent;
+    border: 0;
+    border-radius: var(--radius-2);
+    color: var(--color-foreground-muted);
+    display: inline-flex;
+    block-size: 1.75rem;
+    inline-size: 1.75rem;
+    justify-content: center;
+    outline: none;
+    padding: 0;
+  }
+
+  [data-ui-date-picker-calendar]::part(previous) {
+    grid-column: 2;
+    grid-row: 1;
+  }
+
+  [data-ui-date-picker-calendar]::part(next) {
+    grid-column: 3;
+    grid-row: 1;
+  }
+
+  [data-ui-date-picker-calendar]::part(button):hover {
+    background-color: var(--color-base-a2);
+    color: var(--color-foreground);
+  }
+
+  [data-ui-date-picker-calendar]::part(button):focus-visible {
+    box-shadow: var(--shadow-focus);
+  }
+
+  [data-ui-date-picker-calendar]::part(disabled) {
+    cursor: not-allowed;
+    opacity: 0.4;
+  }
+
+  [data-ui-date-picker-calendar]::part(months) {
+    align-items: start;
+    display: grid;
+    gap: 0.75rem;
+    grid-template-columns: repeat(var(--ui-date-picker-month-columns, 1), var(--ui-date-picker-month-min));
+    justify-content: center;
+    min-width: 0;
+  }
+
+  [data-ui-date-picker-calendar] [data-ui-date-picker-calendar-icon] {
+    color: var(--color-foreground-muted);
+    display: block;
+    pointer-events: none;
+  }
+
+  [data-ui-date-picker-calendar] calendar-month {
+    --color-accent: var(--ui-date-picker-selected-bg);
+    --color-text-on-accent: var(--ui-date-picker-selected-fg);
+    inline-size: var(--ui-date-picker-month-min);
+    min-inline-size: var(--ui-date-picker-month-min);
+  }
+
+  [data-ui-date-picker-calendar][data-fixed-weeks="true"] calendar-month {
+    min-block-size: calc(
+      var(--ui-date-picker-month-heading-size) +
+      (var(--ui-date-picker-week-row-size) * 7) +
+      (var(--ui-date-picker-week-gap) * 6) +
+      0.25rem
+    );
+  }
+
+  [data-ui-date-picker-calendar][data-hide-month-heading="true"][data-fixed-weeks="true"] calendar-month {
+    min-block-size: calc(
+      (var(--ui-date-picker-week-row-size) * 7) +
+      (var(--ui-date-picker-week-gap) * 6)
+    );
+  }
+
+  [data-ui-date-picker-calendar] calendar-month::part(table) {
+    border-collapse: separate;
+    border-spacing: 0 0.125rem;
+    inline-size: var(--ui-date-picker-month-min);
+    max-inline-size: none;
+    min-inline-size: var(--ui-date-picker-month-min);
+    table-layout: fixed;
+  }
+
+  [data-ui-date-picker-calendar] calendar-month::part(heading) {
+    color: var(--color-foreground);
+    font-size: var(--text-sm);
+    font-weight: var(--font-weight-medium);
+    line-height: var(--text-sm--line-height);
+    min-block-size: var(--ui-date-picker-month-heading-size);
+    padding-block: 0.25rem;
+    text-align: center;
+  }
+
+  [data-ui-date-picker-calendar][data-hide-month-heading="true"] calendar-month::part(heading) {
+    display: none;
+  }
+
+  [data-ui-date-picker-calendar] calendar-month::part(th),
+  [data-ui-date-picker-calendar] calendar-month::part(td) {
+    block-size: var(--ui-date-picker-week-row-size);
+    inline-size: calc(100% / 7);
+    max-inline-size: none;
+    min-inline-size: 0;
+    overflow: hidden;
+    padding: 0;
+    text-align: center;
+  }
+
+  [data-ui-date-picker-calendar] calendar-month::part(weekday) {
+    align-items: center;
+    color: var(--color-foreground-subtle);
+    display: inline-flex;
+    font-size: var(--text-xs);
+    font-weight: var(--font-weight-medium);
+    inline-size: 100%;
+    justify-content: center;
+    line-height: var(--text-xs--line-height);
+    overflow: hidden;
+  }
+
+  [data-ui-date-picker-calendar] calendar-month::part(button) {
+    align-items: center;
+    background: transparent;
+    border: 0;
+    border-radius: var(--radius-3);
+    color: var(--color-foreground);
+    display: inline-flex;
+    block-size: 2rem;
+    inline-size: 2rem;
+    font-size: var(--text-sm);
+    justify-content: center;
+    line-height: var(--text-sm--line-height);
+    margin-inline: auto;
+    outline: none;
+    padding: 0;
+  }
+
+  [data-ui-date-picker-calendar] calendar-month::part(day) {
+    border-radius: var(--radius-3);
+  }
+
+  [data-ui-date-picker-calendar] calendar-month::part(button):hover {
+    background-color: var(--color-base-a2);
+    color: var(--color-foreground);
+  }
+
+  [data-ui-date-picker-calendar] calendar-month::part(button):focus-visible {
+    box-shadow: var(--shadow-focus);
+  }
+
+  [data-ui-date-picker-calendar] calendar-month::part(outside) {
+    color: var(--color-foreground-subtle);
+  }
+
+  [data-ui-date-picker-calendar] calendar-month::part(today) {
+    background-image: radial-gradient(circle at 50% calc(100% - 0.1875rem), currentColor 0.125rem, transparent 0.15625rem);
+  }
+
+  [data-ui-date-picker-calendar] calendar-month::part(selected),
+  [data-ui-date-picker-calendar] calendar-month::part(range-start),
+  [data-ui-date-picker-calendar] calendar-month::part(range-end) {
+    background-color: var(--ui-date-picker-selected-bg);
+    color: var(--ui-date-picker-selected-fg);
+  }
+
+  [data-ui-date-picker-calendar] calendar-month::part(selected):hover,
+  [data-ui-date-picker-calendar] calendar-month::part(range-start):hover,
+  [data-ui-date-picker-calendar] calendar-month::part(range-end):hover {
+    background-color: var(--ui-date-picker-selected-bg-hover);
+    color: var(--ui-date-picker-selected-fg);
+  }
+
+  [data-ui-date-picker-calendar] calendar-month::part(range-inner) {
+    background-color: var(--ui-date-picker-range-bg);
+    border-radius: 0;
+    color: var(--color-foreground);
+    inline-size: 100%;
+    margin-inline: 0;
+    width: 100%;
+  }
+
+  [data-ui-date-picker-calendar] calendar-month::part(range-inner):hover {
+    background-color: var(--ui-date-picker-range-bg-hover);
+    color: var(--color-foreground);
+  }
+
+  [data-ui-date-picker-calendar] calendar-month::part(range-start) {
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+    inline-size: 100%;
+    margin-inline: 0;
+    width: 100%;
+  }
+
+  [data-ui-date-picker-calendar] calendar-month::part(range-end) {
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+    inline-size: 100%;
+    margin-inline: 0;
+    width: 100%;
+  }
+
+  [data-ui-date-picker-calendar] calendar-month::part(range-start range-end) {
+    border-radius: var(--radius-3);
+  }
+
+  [data-ui-date-picker-calendar] calendar-select-month::part(label),
+  [data-ui-date-picker-calendar] calendar-select-year::part(label) {
+    display: none;
+  }
+
+  [data-ui-date-picker-calendar] calendar-select-month::part(select),
+  [data-ui-date-picker-calendar] calendar-select-year::part(select) {
+    appearance: auto;
+    background-color: var(--color-base-a2);
+    border: 1px solid transparent;
+    border-radius: var(--radius-3);
+    box-shadow: none;
+    block-size: var(--ui-control-height-md);
+    color: var(--color-foreground);
+    font-size: var(--text-sm);
+    font-weight: var(--font-weight-medium);
+    line-height: var(--text-sm--line-height);
+    min-inline-size: 4.75rem;
+    outline: none;
+    padding-block: 0;
+    padding-inline: 0.5rem 0.25rem;
+  }
+
+  [data-ui-date-picker-calendar] calendar-select-month::part(select):hover,
+  [data-ui-date-picker-calendar] calendar-select-year::part(select):hover {
+    background-color: var(--color-base-a3);
+    border-color: transparent;
+  }
+
+  [data-ui-date-picker-calendar] calendar-select-month::part(select):focus-visible,
+  [data-ui-date-picker-calendar] calendar-select-year::part(select):focus-visible {
+    box-shadow: var(--shadow-focus);
+  }
+
+  @media (max-width: 40rem) {
+    [data-ui-date-picker-calendar]::part(months) {
+      grid-template-columns: minmax(var(--ui-date-picker-month-min), 1fr);
+    }
+  }
+}

package/src/components/field/styles.css

@@ -0,0 +1,12 @@
+@layer components {
+  [data-ui-field][data-layout="grid"] > [data-ui-field-label] {
+    grid-column: 1;
+    grid-row: 1;
+  }
+
+  [data-ui-field][data-layout="grid"] > [data-ui-field-description],
+  [data-ui-field][data-layout="grid"] > [data-ui-field-error],
+  [data-ui-field][data-layout="grid"] > [data-ui-field-control] {
+    grid-column: 2;
+  }
+}

package/src/components/file-upload/styles.css

@@ -0,0 +1,28 @@
+@layer components {
+  [data-ui-file-upload-dropzone]:is(:hover, :active):not(:focus-within):not([data-dragging]):not([data-disabled]):not([data-invalid]) {
+    --ui-control-shadow: var(--ui-control-shadow-hover);
+  }
+
+  [data-ui-file-upload-dropzone]:focus-within:not([data-invalid]) {
+    --ui-control-shadow: var(--ui-control-shadow-focus);
+    box-shadow: var(--shadow-control), var(--shadow-focus);
+  }
+
+  [data-ui-file-upload-dropzone][data-dragging]:not([data-invalid]) {
+    --ui-control-shadow: var(--ui-control-shadow-focus);
+  }
+
+  [data-ui-file-upload-dropzone][data-invalid] {
+    --ui-control-shadow: var(--ui-control-shadow-invalid);
+  }
+
+  [data-ui-file-upload-dropzone][data-invalid]:is(:hover, :active):not(:focus-within):not([data-dragging]):not([data-disabled]) {
+    --ui-control-shadow: var(--ui-control-shadow-invalid-hover);
+  }
+
+  [data-ui-file-upload-dropzone][data-invalid]:focus-within:not([data-disabled]),
+  [data-ui-file-upload-dropzone][data-invalid][data-dragging]:not([data-disabled]) {
+    --ui-control-shadow: var(--ui-control-shadow-invalid-focus);
+    box-shadow: var(--shadow-danger-focus);
+  }
+}