@ropav/styles 0.3.0

package/dist/components/alert.css

@@ -0,0 +1,69 @@
+/* Alert component styles */
+
+/* Base alert styles */
+.alert {
+  @apply flex w-full flex-row items-start justify-start gap-4 bg-surface px-4 py-3 shadow-surface;
+  border-radius: min(32px, var(--radius-3xl));
+}
+
+/* Alert elements */
+.alert__content {
+  @apply flex h-full grow flex-col items-start;
+}
+
+.alert__indicator {
+  @apply flex items-center justify-center p-1 select-none;
+
+  [data-slot="alert-default-icon"] {
+    @apply box-content size-4;
+  }
+}
+
+.alert__title {
+  @apply text-sm leading-6 font-medium;
+}
+
+.alert__description {
+  @apply text-sm text-muted;
+}
+
+/* Variant modifiers */
+.alert--default .alert__indicator {
+  @apply text-foreground;
+}
+
+.alert--default .alert__title {
+  @apply text-foreground;
+}
+
+.alert--accent .alert__indicator {
+  @apply text-accent-soft-foreground;
+}
+
+.alert--accent .alert__title {
+  @apply text-accent-soft-foreground;
+}
+
+.alert--success .alert__indicator {
+  @apply text-success-soft-foreground;
+}
+
+.alert--success .alert__title {
+  @apply text-success-soft-foreground;
+}
+
+.alert--warning .alert__indicator {
+  @apply text-warning-soft-foreground;
+}
+
+.alert--warning .alert__title {
+  @apply text-warning-soft-foreground;
+}
+
+.alert--danger .alert__indicator {
+  @apply text-danger-soft-foreground;
+}
+
+.alert--danger .alert__title {
+  @apply text-danger-soft-foreground;
+}

package/dist/components/autocomplete/autocomplete.styles.d.ts

@@ -0,0 +1,76 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const autocompleteVariants: import("tailwind-variants").TVReturnType<{
+    fullWidth: {
+        false: {};
+        true: {
+            base: string;
+            trigger: string;
+        };
+    };
+    variant: {
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    clearButton: string;
+    filter: string;
+    indicator: string;
+    popover: string;
+    trigger: string;
+    value: string;
+}, undefined, {
+    fullWidth: {
+        false: {};
+        true: {
+            base: string;
+            trigger: string;
+        };
+    };
+    variant: {
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    clearButton: string;
+    filter: string;
+    indicator: string;
+    popover: string;
+    trigger: string;
+    value: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    fullWidth: {
+        false: {};
+        true: {
+            base: string;
+            trigger: string;
+        };
+    };
+    variant: {
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    clearButton: string;
+    filter: string;
+    indicator: string;
+    popover: string;
+    trigger: string;
+    value: string;
+}>>;
+export type AutocompleteVariants = VariantProps<typeof autocompleteVariants>;
+//# sourceMappingURL=autocomplete.styles.d.ts.map

package/dist/components/autocomplete/autocomplete.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"autocomplete.styles.d.ts","sourceRoot":"","sources":["../../../src/components/autocomplete/autocomplete.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,oBAAoB;;QAgB3B,KAAK;QACL,IAAI;YACF,IAAI;YACJ,OAAO;;;;QAIT,OAAO;YACL,IAAI;;QAEN,SAAS;YACP,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAIV,CAAC;AAEH,MAAM,MAAM,oBAAoB,GAAG,YAAY,CAAC,OAAO,oBAAoB,CAAC,CAAC"}

package/dist/components/autocomplete/autocomplete.styles.js

@@ -0,0 +1,32 @@
+import { tv } from "tailwind-variants";
+//#region src/components/autocomplete/autocomplete.styles.ts
+const autocompleteVariants = tv({
+	defaultVariants: {
+		fullWidth: false,
+		variant: "primary"
+	},
+	slots: {
+		base: "autocomplete",
+		clearButton: "autocomplete__clear-button",
+		filter: "autocomplete__filter",
+		indicator: "autocomplete__indicator",
+		popover: "autocomplete__popover",
+		trigger: "autocomplete__trigger",
+		value: "autocomplete__value"
+	},
+	variants: {
+		fullWidth: {
+			false: {},
+			true: {
+				base: "autocomplete--full-width",
+				trigger: "autocomplete__trigger--full-width"
+			}
+		},
+		variant: {
+			primary: { base: "autocomplete--primary" },
+			secondary: { base: "autocomplete--secondary" }
+		}
+	}
+});
+//#endregion
+export { autocompleteVariants };

package/dist/components/autocomplete/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./autocomplete.styles";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/autocomplete/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/autocomplete/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC"}

package/dist/components/autocomplete/index.js

@@ -0,0 +1,2 @@
+import { autocompleteVariants } from "./autocomplete.styles.js";
+export { autocompleteVariants };

package/dist/components/autocomplete.css

@@ -0,0 +1,283 @@
+/* Autocomplete styles */
+.autocomplete {
+  @apply flex flex-col gap-1;
+}
+
+.autocomplete__trigger {
+  @apply relative isolate inline-flex min-h-9 rounded-field border bg-field px-3 py-2 text-sm text-field-foreground shadow-field outline-none select-none no-highlight;
+
+  /**
+   * Transitions
+   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+   */
+  transition:
+    background-color 150ms var(--ease-smooth),
+    border-color 150ms var(--ease-smooth),
+    box-shadow 150ms var(--ease-out);
+  @apply motion-reduce:transition-none;
+
+  /* Cursor */
+  cursor: var(--cursor-interactive);
+
+  border-width: var(--border-width-field);
+  border-color: var(--field-border);
+
+  /* Add inline-end padding when indicator is present */
+  &:has(.autocomplete__indicator) {
+    @apply pe-7;
+  }
+
+  /* Hover state - exclude when clear button is hovered to prevent double hover effect */
+  @media (hover: hover) {
+    &:hover:not(:has(.autocomplete__clear-button:hover)),
+    &[data-hovered="true"]:not(:has(.autocomplete__clear-button:hover)) {
+      @apply bg-field-hover;
+      border-color: var(--field-border-hover);
+    }
+  }
+
+  /* Focus visible state */
+  &:focus-visible:not(:focus),
+  &[data-focus-visible="true"] {
+    @apply status-focused;
+    border-color: var(--field-border-focus);
+    background-color: var(--field-focus);
+  }
+
+  /* Focus state */
+  &:focus,
+  &[data-focus="true"] {
+  }
+
+  /* Invalid state */
+  .autocomplete[data-invalid="true"] &,
+  .autocomplete[aria-invalid="true"] & {
+    @apply status-invalid-field;
+    background-color: var(--field-focus);
+  }
+
+  /* Disabled state */
+  &:disabled,
+  &[data-disabled="true"],
+  &[aria-disabled="true"] {
+    @apply status-disabled;
+  }
+}
+
+/* Variant property definitions */
+.autocomplete--primary {
+  /* Default styles */
+}
+
+.autocomplete--secondary .autocomplete__trigger {
+  @apply shadow-none;
+  background-color: var(--autocomplete-trigger-bg);
+
+  --autocomplete-trigger-bg: var(--default);
+  --autocomplete-trigger-bg-hover: var(--default-hover);
+  --autocomplete-trigger-bg-focus: var(--default);
+
+  /* Exclude when clear button is hovered to prevent double hover effect */
+  @media (hover: hover) {
+    &:hover:not(:has(.autocomplete__clear-button:hover)),
+    &[data-hovered="true"]:not(:has(.autocomplete__clear-button:hover)) {
+      background-color: var(--autocomplete-trigger-bg-hover);
+    }
+  }
+
+  &:focus-visible:not(:focus),
+  &[data-focus-visible="true"] {
+    background-color: var(--autocomplete-trigger-bg-focus);
+  }
+
+  &:focus,
+  &[data-focus="true"] {
+  }
+
+  .autocomplete[data-invalid="true"] &,
+  .autocomplete[aria-invalid="true"] & {
+    background-color: var(--autocomplete-trigger-bg-focus);
+  }
+}
+
+.autocomplete__value {
+  @apply flex-1 text-start text-base wrap-break-word text-current sm:text-sm;
+
+  &[data-placeholder="true"] {
+    @apply text-field-placeholder;
+  }
+
+  /* Removes the list-box-item indicator element from the autocomplete value*/
+  [data-slot="list-box-item-indicator"] {
+    @apply hidden;
+  }
+}
+
+.autocomplete__indicator {
+  @apply absolute inset-y-0 end-2 my-auto flex shrink-0 items-center justify-center text-field-placeholder transition duration-150;
+
+  /* Cursor */
+  cursor: var(--cursor-interactive);
+
+  &[data-open="true"] {
+    @apply rotate-180;
+  }
+
+  &[data-slot="autocomplete-default-indicator"] {
+    @apply size-4;
+  }
+}
+
+/* Similar to popover content styles */
+.autocomplete__popover {
+  @apply flex w-(--trigger-width) max-w-(--trigger-width) origin-(--trigger-anchor-point) scroll-py-1 flex-col overflow-hidden overscroll-contain bg-overlay p-0 pt-2 text-sm outline-none;
+  border-radius: min(32px, var(--radius-3xl));
+  box-shadow: var(--shadow-overlay);
+
+  &:focus,
+  &:focus-visible,
+  &:focus-visible:not(:focus),
+  &[data-focus-visible="true"] {
+    @apply outline-none;
+  }
+
+  /* Entering animations */
+  &[data-entering="true"] {
+    @apply animate-in duration-250 ease-out-fluid fade-in-0 zoom-in-95;
+
+    /* Placement-specific translations */
+    &[data-placement="top"] {
+      @apply slide-in-from-bottom-1;
+    }
+
+    &[data-placement="bottom"] {
+      @apply slide-in-from-top-1;
+    }
+
+    &[data-placement="left"] {
+      @apply slide-in-from-right-1;
+    }
+
+    &[data-placement="right"] {
+      @apply slide-in-from-left-1;
+    }
+  }
+
+  /* Exiting animations */
+  &[data-exiting="true"] {
+    @apply animate-out duration-100 ease-out-quad zoom-out-95 fade-out;
+  }
+
+  &[data-exiting="true"],
+  &[data-entering="true"] {
+    @apply transition-[opacity,transform] will-change-[opacity,transform];
+  }
+
+  /* Arrow styling */
+  & [data-slot="popover-overlay-arrow"] {
+    fill: var(--overlay);
+  }
+
+  /* Arrow rotation based on placement */
+  &[data-placement="bottom"] [data-slot="popover-overlay-arrow"] {
+    rotate: 180deg;
+  }
+
+  &[data-placement="left"] [data-slot="popover-overlay-arrow"] {
+    rotate: -90deg;
+  }
+
+  &[data-placement="right"] [data-slot="popover-overlay-arrow"] {
+    rotate: 90deg;
+  }
+
+  /* Listbox styles.
+   * `min-h-0` + the popover's flex column let the list shrink below 320px when the
+   * popover itself is constrained (e.g. inside a Modal, or a short viewport). Without
+   * it the list keeps its full 320px and its overflow is clipped by the popover, making
+   * the last options unreachable. */
+  [data-slot="list-box"] {
+    @apply max-h-[320px] min-h-0 scrollbar overflow-y-auto p-1.5 outline-none;
+  }
+
+  [data-slot="list-box-item"] {
+    @apply px-2.5;
+  }
+
+  /* Virtualized rows: react-aria's Virtualizer wraps each row in an absolutely-positioned
+   * [role="presentation"] element whose width equals the scroll container's clientWidth
+   * (which includes the list-box horizontal padding) while sitting inside the padded content
+   * box. Without this, rows overflow the right padding and the hover background reaches the
+   * popover edge. Subtract the horizontal padding (2 × p-1.5 = 12px) to keep rows aligned. */
+  [role="presentation"] > [data-slot="list-box-item"] {
+    width: calc(100% - var(--spacing) * 3);
+  }
+
+  /* As the popover closes fast in single-select mode, the default item indicator transition is not even visible - so we disable it only for single-select */
+  [data-slot="list-box"]:not([aria-multiselectable="true"]) [data-slot="list-box-item-indicator"],
+  [data-slot="list-box"]:not([aria-multiselectable="true"])
+    [data-slot="list-box-item-indicator"]
+    [data-slot="list-box-item-indicator--checkmark"] {
+    @apply transition-none;
+  }
+
+  /* Search Field styles */
+  [data-slot="search-field"] {
+    @apply shrink-0 px-3 py-1 outline-none;
+  }
+
+  /* Empty State */
+  [data-slot="empty-state"] {
+    @apply text-center text-sm text-overlay-foreground/60;
+  }
+}
+
+/* Full width modifier */
+.autocomplete--full-width {
+  @apply w-full;
+}
+
+.autocomplete__trigger--full-width {
+  @apply w-full;
+}
+
+/* Clear Button styles */
+.autocomplete__clear-button {
+  @apply relative isolate inline-flex h-6 w-6 shrink-0 origin-center items-center justify-center rounded-xl p-1 text-muted select-none no-highlight;
+  @apply me-0 size-5 shrink-0 self-center bg-transparent;
+
+  /* Cursor */
+  cursor: var(--cursor-interactive);
+
+  @apply transform-gpu;
+
+  /* Transition only when visible - disappears immediately when cleared */
+  &:not([data-empty="true"]) {
+    transition: opacity 150ms var(--ease-smooth);
+    @apply motion-reduce:transition-none;
+  }
+
+  &[data-empty="true"] {
+    @apply pointer-events-none opacity-0;
+  }
+
+  [data-slot="autocomplete-clear-button-icon"] {
+    @apply size-3.5;
+  }
+
+  &:active,
+  &[data-pressed="true"] {
+  }
+
+  @media (hover: hover) {
+    &:hover,
+    &[data-hovered="true"] {
+      @apply bg-default-hover;
+    }
+  }
+
+  &:active,
+  &[data-pressed="true"] {
+    transform: scale(0.93);
+  }
+}

package/dist/components/avatar/avatar.styles.d.ts

@@ -0,0 +1,121 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const avatarVariants: import("tailwind-variants").TVReturnType<{
+    color: {
+        accent: {
+            fallback: string;
+        };
+        danger: {
+            fallback: string;
+        };
+        default: {
+            fallback: string;
+        };
+        success: {
+            fallback: string;
+        };
+        warning: {
+            fallback: string;
+        };
+    };
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+    };
+    variant: {
+        default: {};
+        soft: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    fallback: string;
+    image: string;
+}, undefined, {
+    color: {
+        accent: {
+            fallback: string;
+        };
+        danger: {
+            fallback: string;
+        };
+        default: {
+            fallback: string;
+        };
+        success: {
+            fallback: string;
+        };
+        warning: {
+            fallback: string;
+        };
+    };
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+    };
+    variant: {
+        default: {};
+        soft: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    fallback: string;
+    image: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    color: {
+        accent: {
+            fallback: string;
+        };
+        danger: {
+            fallback: string;
+        };
+        default: {
+            fallback: string;
+        };
+        success: {
+            fallback: string;
+        };
+        warning: {
+            fallback: string;
+        };
+    };
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+    };
+    variant: {
+        default: {};
+        soft: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    fallback: string;
+    image: string;
+}>>;
+export type AvatarVariants = VariantProps<typeof avatarVariants>;
+//# sourceMappingURL=avatar.styles.d.ts.map

package/dist/components/avatar/avatar.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.styles.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/avatar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,cAAc;;QAYrB,MAAM;YACJ,QAAQ;;QAEV,MAAM;YACJ,QAAQ;;QAEV,OAAO;YACL,QAAQ;;QAEV,OAAO;YACL,QAAQ;;QAEV,OAAO;YACL,QAAQ;;;;QAIV,EAAE;YACA,IAAI;;QAEN,EAAE;YACA,IAAI;;QAEN,EAAE;YACA,IAAI;;;;QAIN,OAAO;QACP,IAAI;YACF,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAIV,CAAC;AAEH,MAAM,MAAM,cAAc,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC"}

package/dist/components/avatar/avatar.styles.js

@@ -0,0 +1,33 @@
+import { tv } from "tailwind-variants";
+//#region src/components/avatar/avatar.styles.ts
+const avatarVariants = tv({
+	defaultVariants: {
+		color: "default",
+		size: "md"
+	},
+	slots: {
+		base: "avatar",
+		fallback: "avatar__fallback",
+		image: "avatar__image"
+	},
+	variants: {
+		color: {
+			accent: { fallback: "avatar__fallback--accent" },
+			danger: { fallback: "avatar__fallback--danger" },
+			default: { fallback: "avatar__fallback--default" },
+			success: { fallback: "avatar__fallback--success" },
+			warning: { fallback: "avatar__fallback--warning" }
+		},
+		size: {
+			lg: { base: "avatar--lg" },
+			md: { base: "avatar--md" },
+			sm: { base: "avatar--sm" }
+		},
+		variant: {
+			default: {},
+			soft: { base: "avatar--soft" }
+		}
+	}
+});
+//#endregion
+export { avatarVariants };

package/dist/components/avatar/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./avatar.styles";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/avatar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC"}

package/dist/components/avatar/index.js

@@ -0,0 +1,2 @@
+import { avatarVariants } from "./avatar.styles.js";
+export { avatarVariants };