@ropav/styles 0.3.0

package/dist/components/search-field.css

@@ -0,0 +1,186 @@
+/* Search field styles */
+.search-field {
+  @apply flex flex-col gap-1;
+
+  &[data-invalid="true"],
+  &[aria-invalid="true"] {
+    [data-slot="description"] {
+      @apply hidden;
+    }
+  }
+
+  [data-slot="label"] {
+    @apply w-fit;
+  }
+
+  &[data-empty="true"] {
+    [data-slot="search-field-clear-button"] {
+      @apply pointer-events-none opacity-0;
+    }
+  }
+}
+
+.search-field__group {
+  @apply relative inline-flex h-9 items-center overflow-hidden rounded-field border bg-field text-sm text-field-foreground shadow-field outline-none;
+  border-width: var(--border-width-field);
+  border-color: var(--field-border);
+
+  /**
+   * 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;
+
+  /* Hover state */
+  @media (hover: hover) {
+    &:hover:not(:focus-within),
+    &[data-hovered="true"]:not([data-focus-within="true"]) {
+      @apply bg-field-hover;
+      border-color: var(--field-border-hover);
+    }
+  }
+
+  /* Focus within state */
+  &[data-focus-within="true"],
+  &:focus-within {
+    @apply status-focused-field;
+  }
+
+  /* Invalid state */
+  &[data-invalid="true"] {
+    @apply status-invalid-field;
+    background-color: var(--field-focus);
+    border-color: var(--color-field-border-invalid);
+  }
+
+  /* Disabled state */
+  &[data-disabled="true"],
+  &[aria-disabled="true"] {
+    @apply status-disabled;
+  }
+
+  /**
+   * Browser autofill state.
+   * The user-agent paints `:-webkit-autofill`/`:autofill` on the inner <input>
+   * only. Because the input has its border-radius stripped on whichever side
+   * touches the search icon or clear button, the autofill highlight ends up
+   * as a sharp-cornered rectangle and the sibling slots receive no highlight.
+   * Lift the highlight onto the group so the rounded shell + icon + clear
+   * button all share it.
+   */
+  &:has([data-slot="search-field-input"]:-webkit-autofill),
+  &:has([data-slot="search-field-input"]:autofill) {
+    background-color: var(--field-focus);
+    border-color: var(--field-border-focus);
+  }
+}
+
+.search-field__input {
+  @apply flex-1 rounded-none border-0 bg-transparent px-3 py-2 text-base shadow-none outline-none sm:text-sm;
+
+  /* Hide browser default search clear button */
+  &::-webkit-search-cancel-button,
+  &::-webkit-search-decoration {
+    -webkit-appearance: none;
+    appearance: none;
+  }
+
+  /* Remove border radius on left side when search icon is present */
+  .search-field__group:has([data-slot="search-field-search-icon"]) & {
+    @apply rounded-s-none ps-2;
+  }
+
+  /* Remove border radius on right side when clear button is present */
+  .search-field__group:has([slot="clear"]) & {
+    @apply rounded-e-none pe-2;
+  }
+
+  /* Focus state - handled by group */
+  &:focus,
+  &:focus-visible {
+    @apply outline-none;
+  }
+
+  /**
+   * Neutralize the browser's per-input autofill paint so the inner <input>
+   * doesn't draw a sharp-cornered yellow rectangle. The unified highlight
+   * is applied to `.search-field__group` above. Preserve the autofilled
+   * text and caret colors, and pin the background-color transition so the
+   * inset box-shadow trick doesn't flicker on state changes.
+   */
+  &:-webkit-autofill,
+  &:-webkit-autofill:hover,
+  &:-webkit-autofill:focus,
+  &:-webkit-autofill:active,
+  &:autofill {
+    -webkit-box-shadow: 0 0 0 1000px transparent inset;
+    box-shadow: 0 0 0 1000px transparent inset;
+    -webkit-text-fill-color: var(--field-foreground);
+    caret-color: var(--field-foreground);
+    transition: background-color 9999s ease-in-out 0s;
+  }
+}
+
+.search-field__search-icon {
+  @apply pointer-events-none shrink-0 text-field-placeholder;
+  @apply ms-3 me-0 size-4;
+}
+
+.search-field__clear-button {
+  @apply me-2 size-5 shrink-0;
+
+  /* Overrides close button default icon size from 16px to 12px */
+  [data-slot="close-button-icon"] {
+    @apply size-3;
+  }
+}
+
+/* Variant property definitions */
+.search-field--primary {
+  /* Default styles */
+}
+
+.search-field--secondary .search-field__group {
+  @apply shadow-none;
+  background-color: var(--search-field-group-bg);
+
+  --search-field-group-bg: var(--default);
+  --search-field-group-bg-hover: var(--default-hover);
+  --search-field-group-bg-focus: var(--default);
+
+  @media (hover: hover) {
+    &:hover:not(:focus-within),
+    &[data-hovered="true"]:not([data-focus-within="true"]) {
+      background-color: var(--search-field-group-bg-hover);
+    }
+  }
+
+  &:focus-within,
+  &[data-focus-within="true"] {
+    background-color: var(--search-field-group-bg-focus);
+  }
+
+  /* Invalid state */
+  &[data-invalid="true"] {
+    @apply status-invalid-field;
+    border-color: var(--color-field-border-invalid);
+    background-color: var(--search-field-group-bg-focus);
+  }
+
+  [data-slot="search-field-input"] {
+    @apply bg-transparent;
+  }
+}
+
+/* Full width modifier */
+.search-field--full-width {
+  @apply w-full;
+}
+
+.search-field__group--full-width {
+  @apply w-full;
+}

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

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

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

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

package/dist/components/select/index.js

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

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

@@ -0,0 +1,70 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const selectVariants: import("tailwind-variants").TVReturnType<{
+    fullWidth: {
+        false: {};
+        true: {
+            base: string;
+            trigger: string;
+        };
+    };
+    variant: {
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+    };
+}, {
+    base: 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;
+    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;
+    indicator: string;
+    popover: string;
+    trigger: string;
+    value: string;
+}>>;
+export type SelectVariants = VariantProps<typeof selectVariants>;
+//# sourceMappingURL=select.styles.d.ts.map

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

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

package/dist/components/select/select.styles.js

@@ -0,0 +1,30 @@
+import { tv } from "tailwind-variants";
+//#region src/components/select/select.styles.ts
+const selectVariants = tv({
+	defaultVariants: {
+		fullWidth: false,
+		variant: "primary"
+	},
+	slots: {
+		base: "select",
+		indicator: "select__indicator",
+		popover: "select__popover",
+		trigger: "select__trigger",
+		value: "select__value"
+	},
+	variants: {
+		fullWidth: {
+			false: {},
+			true: {
+				base: "select--full-width",
+				trigger: "select__trigger--full-width"
+			}
+		},
+		variant: {
+			primary: { base: "select--primary" },
+			secondary: { base: "select--secondary" }
+		}
+	}
+});
+//#endregion
+export { selectVariants };

package/dist/components/select.css

@@ -0,0 +1,225 @@
+/* Select styles */
+.select {
+  @apply flex flex-col gap-1;
+
+  &[data-invalid="true"],
+  &[aria-invalid="true"] {
+    [data-slot="description"] {
+      @apply hidden;
+    }
+  }
+
+  [data-slot="label"] {
+    @apply w-fit;
+  }
+}
+
+.select__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(.select__indicator) {
+    @apply pe-7;
+  }
+
+  /* Hover state */
+  @media (hover: hover) {
+    &:hover,
+    &[data-hovered="true"] {
+      @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 */
+  .select[data-invalid="true"] &,
+  .select[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 */
+.select--primary {
+  /* Default styles */
+}
+
+.select--secondary .select__trigger {
+  @apply shadow-none;
+  background-color: var(--select-trigger-bg);
+
+  --select-trigger-bg: var(--default);
+  --select-trigger-bg-hover: var(--default-hover);
+  --select-trigger-bg-focus: var(--default);
+
+  @media (hover: hover) {
+    &:hover,
+    &[data-hovered="true"] {
+      background-color: var(--select-trigger-bg-hover);
+    }
+  }
+
+  &:focus-visible:not(:focus),
+  &[data-focus-visible="true"] {
+    background-color: var(--select-trigger-bg-focus);
+  }
+
+  &:focus,
+  &[data-focus="true"] {
+  }
+
+  .select[data-invalid="true"] &,
+  .select[aria-invalid="true"] & {
+    background-color: var(--select-trigger-bg-focus);
+  }
+}
+
+.select__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 select value*/
+  [data-slot="list-box-item-indicator"] {
+    @apply hidden;
+  }
+}
+
+.select__indicator {
+  @apply absolute inset-y-0 end-2 my-auto flex shrink-0 items-center justify-center text-field-placeholder transition duration-150;
+
+  &[data-open="true"] {
+    @apply rotate-180;
+  }
+
+  &[data-slot="select-default-indicator"] {
+    @apply size-4;
+  }
+}
+
+/* Similar to popover content styles */
+.select__popover {
+  @apply min-w-(--trigger-width) origin-(--trigger-anchor-point) scroll-py-1 scrollbar overflow-y-auto overscroll-contain bg-overlay p-0 text-sm;
+  border-radius: min(32px, var(--radius-3xl));
+  box-shadow: var(--shadow-overlay);
+
+  /* Focus state */
+  &:focus-visible:not(:focus),
+  &[data-focus-visible="true"] {
+    @apply outline-none;
+  }
+
+  /* Entering animations */
+  &[data-entering="true"] {
+    @apply animate-in duration-150 ease-smooth 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-smooth 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 */
+  [data-slot="list-box"] {
+    @apply p-1.5 outline-none;
+  }
+
+  [data-slot="list-box-item"] {
+    @apply px-2.5;
+  }
+
+  /* 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;
+  }
+}
+
+/* Full width modifier */
+.select--full-width {
+  @apply w-full;
+}
+
+.select__trigger--full-width {
+  @apply w-full;
+}

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

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

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

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

package/dist/components/separator/index.js

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

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

@@ -0,0 +1,35 @@
+import type { VariantProps } from "tailwind-variants";
+declare const separatorVariants: import("tailwind-variants").TVReturnType<{
+    orientation: {
+        horizontal: "separator--horizontal";
+        vertical: "separator--vertical";
+    };
+    variant: {
+        default: "separator--default";
+        secondary: "separator--secondary";
+        tertiary: "separator--tertiary";
+    };
+}, undefined, "separator", {
+    orientation: {
+        horizontal: "separator--horizontal";
+        vertical: "separator--vertical";
+    };
+    variant: {
+        default: "separator--default";
+        secondary: "separator--secondary";
+        tertiary: "separator--tertiary";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    orientation: {
+        horizontal: "separator--horizontal";
+        vertical: "separator--vertical";
+    };
+    variant: {
+        default: "separator--default";
+        secondary: "separator--secondary";
+        tertiary: "separator--tertiary";
+    };
+}, undefined>>;
+export { separatorVariants };
+export type SeparatorVariants = VariantProps<typeof separatorVariants>;
+//# sourceMappingURL=separator.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"separator.styles.d.ts","sourceRoot":"","sources":["../../../src/components/separator/separator.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,QAAA,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAiBrB,CAAC;AAEH,OAAO,EAAE,iBAAiB,EAAE,CAAC;AAC7B,MAAM,MAAM,iBAAiB,GAAG,YAAY,CAAC,OAAO,iBAAiB,CAAC,CAAC"}

package/dist/components/separator/separator.styles.js

@@ -0,0 +1,22 @@
+import { tv } from "tailwind-variants";
+//#region src/components/separator/separator.styles.ts
+const separatorVariants = tv({
+	base: "separator",
+	defaultVariants: {
+		orientation: "horizontal",
+		variant: "default"
+	},
+	variants: {
+		orientation: {
+			horizontal: "separator--horizontal",
+			vertical: "separator--vertical"
+		},
+		variant: {
+			default: "separator--default",
+			secondary: "separator--secondary",
+			tertiary: "separator--tertiary"
+		}
+	}
+});
+//#endregion
+export { separatorVariants };

package/dist/components/separator.css

@@ -0,0 +1,59 @@
+/* Separator Component Styles */
+
+/* Base separator with default horizontal orientation */
+.separator {
+  @apply shrink-0 rounded-sm border-t-0 border-b-0 bg-separator;
+
+  /* Default size - horizontal orientation */
+  @apply h-px w-full;
+}
+
+/* Orientation variants */
+.separator--horizontal {
+  @apply h-px w-full;
+}
+
+.separator--vertical {
+  @apply h-auto min-h-2 w-px self-stretch;
+}
+
+/* Color variants */
+.separator--default {
+  @apply bg-separator;
+}
+
+.separator--secondary {
+  @apply bg-separator-secondary;
+}
+
+.separator--tertiary {
+  @apply bg-separator-tertiary;
+}
+
+.separator__container {
+  @apply flex items-center gap-3;
+}
+
+.separator__container--horizontal {
+  @apply w-full flex-row;
+}
+
+.separator__container--vertical {
+  @apply h-full flex-col justify-center;
+}
+
+.separator__line {
+  @apply shrink-0 grow;
+}
+
+.separator__content {
+  @apply inline-flex items-center justify-center text-center whitespace-nowrap text-muted;
+}
+
+.separator__content--horizontal {
+  @apply text-center;
+}
+
+.separator__content--vertical {
+  @apply text-center;
+}

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

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

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

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

package/dist/components/skeleton/index.js

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

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

@@ -0,0 +1,28 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const skeletonVariants: import("tailwind-variants").TVReturnType<{
+    animationType: {
+        none: "skeleton--none";
+        pulse: "skeleton--pulse";
+        shimmer: "skeleton--shimmer";
+    };
+}, {
+    base: string;
+}, undefined, {
+    animationType: {
+        none: "skeleton--none";
+        pulse: "skeleton--pulse";
+        shimmer: "skeleton--shimmer";
+    };
+}, {
+    base: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    animationType: {
+        none: "skeleton--none";
+        pulse: "skeleton--pulse";
+        shimmer: "skeleton--shimmer";
+    };
+}, {
+    base: string;
+}>>;
+export type SkeletonVariants = VariantProps<typeof skeletonVariants>;
+//# sourceMappingURL=skeleton.styles.d.ts.map