@ropav/styles 0.3.0

package/dist/components/tabs.css

@@ -0,0 +1,283 @@
+/* Base tabs component */
+.tabs {
+  @apply flex gap-2;
+
+  /* Orientation styles */
+  &[data-orientation="horizontal"] {
+    @apply flex-col;
+  }
+
+  &[data-orientation="vertical"] {
+    @apply flex-row;
+  }
+}
+
+/* Tab list container */
+.tabs__list-container {
+  @apply relative bg-default;
+
+  border-radius: calc(var(--radius) * 2.5);
+
+  /* Vertical scroller fills the container height so overflow detection
+     engages when the wrapper height is constrained (e.g. h-[240px]) */
+  > .tabs__list-container__scroller[data-orientation="vertical"] {
+    @apply h-full;
+  }
+
+  /* Overflow chevron buttons */
+  > .tabs__list-container__scroll-prev,
+  > .tabs__list-container__scroll-next {
+    @apply absolute z-2 hidden size-4 cursor-(--cursor-interactive) items-center justify-center rounded-full border-0 bg-transparent p-0 text-foreground outline-none;
+
+    /**
+    * Transitions
+    * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+    */
+    transition: opacity 150ms var(--ease-smooth);
+    @apply motion-reduce:transition-none;
+
+    @media (hover: hover) {
+      &:hover {
+        @apply opacity-70;
+      }
+    }
+
+    &:focus-visible {
+      @apply status-focused;
+    }
+  }
+
+  /* Chevron position - horizontal orientation */
+  &:has([data-orientation="horizontal"]) {
+    > .tabs__list-container__scroll-prev {
+      @apply start-1 top-1/2 -translate-y-1/2;
+    }
+
+    > .tabs__list-container__scroll-next {
+      @apply end-1 top-1/2 -translate-y-1/2;
+    }
+
+    > .tabs__list-container__scroll-prev,
+    > .tabs__list-container__scroll-next {
+      @apply rtl:rotate-180;
+    }
+  }
+
+  /* Chevron position - vertical orientation */
+  &:has([data-orientation="vertical"]) {
+    > .tabs__list-container__scroll-prev {
+      @apply top-1 left-1/2 -translate-x-1/2;
+    }
+
+    > .tabs__list-container__scroll-next {
+      @apply bottom-1 left-1/2 -translate-x-1/2;
+    }
+  }
+
+  /* Show chevrons only when ScrollShadow reports scrolling is possible */
+  &:has(
+      > :is(
+        [data-left-scroll="true"],
+        [data-left-right-scroll="true"],
+        [data-top-scroll="true"],
+        [data-top-bottom-scroll="true"]
+      )
+    )
+    > .tabs__list-container__scroll-prev {
+    @apply inline-flex;
+  }
+
+  &:has(
+      > :is(
+        [data-right-scroll="true"],
+        [data-left-right-scroll="true"],
+        [data-bottom-scroll="true"],
+        [data-top-bottom-scroll="true"]
+      )
+    )
+    > .tabs__list-container__scroll-next {
+    @apply inline-flex;
+  }
+}
+
+/* Tab list */
+.tabs__list {
+  @apply inline-flex p-1;
+
+  /* Horizontal orientation - grow with content so ScrollShadow can detect overflow */
+  &[data-orientation="horizontal"] {
+    @apply w-max min-w-full flex-row;
+  }
+
+  /* Vertical orientation */
+  &[data-orientation="vertical"] {
+    @apply flex-col gap-1;
+
+    .tabs__tab {
+      @apply min-w-20;
+    }
+  }
+}
+
+/* Individual tab */
+.tabs__tab {
+  @apply relative flex h-8 w-full items-center justify-center rounded-3xl px-4 text-center text-sm font-medium text-muted outline-none no-highlight;
+
+  z-index: 1;
+  cursor: var(--cursor-interactive);
+
+  /**
+   * Transitions
+   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+   */
+  transition:
+    color 150ms var(--ease-smooth),
+    background-color 150ms var(--ease-smooth),
+    box-shadow 150ms var(--ease-out),
+    opacity 150ms var(--ease-smooth);
+  @apply motion-reduce:transition-none;
+
+  /* Selected state */
+  &[data-selected="true"] {
+    @apply text-segment-foreground;
+
+    /* Hide separator on the selected tab and the one following it */
+    .tabs__separator,
+    & + .tabs__tab .tabs__separator {
+      @apply opacity-0;
+    }
+  }
+
+  /* Disabled state */
+  &:disabled,
+  &[data-disabled="true"],
+  &[aria-disabled="true"] {
+    @apply status-disabled;
+  }
+
+  /* Hover states - both approaches for compatibility */
+  @media (hover: hover) {
+    &:not([data-selected="true"]):not([data-disabled="true"]):hover,
+    &[data-hovered="true"]:not([data-selected="true"]):not([data-disabled="true"]) {
+      @apply opacity-70;
+    }
+  }
+
+  /* Focus states - comprehensive fallback */
+  &:focus-visible:not(:focus),
+  &[data-focus-visible="true"] {
+    @apply status-focused;
+  }
+}
+
+/* Tab separator */
+.tabs__separator {
+  @apply pointer-events-none absolute rounded-sm bg-muted/25;
+
+  /**
+   * Transitions
+   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+   */
+  transition: opacity 150ms var(--ease-smooth);
+  @apply motion-reduce:transition-none;
+
+  /* Horizontal tabs - vertical separator */
+  .tabs__list[data-orientation="horizontal"] & {
+    @apply start-0 top-1/4 h-1/2 w-px;
+  }
+
+  /* Vertical tabs - horizontal separator */
+  .tabs__list[data-orientation="vertical"] & {
+    @apply start-[5%] top-0 h-px w-[90%];
+  }
+}
+
+/* Tab panel */
+.tabs__panel {
+  @apply w-full p-2 outline-none;
+
+  /* Exiting animations */
+  &[data-exiting="true"] {
+    @apply absolute start-0 top-0 w-full;
+  }
+
+  /* Orientation spacing */
+  &[data-orientation="horizontal"] {
+    @apply mt-4;
+  }
+
+  &[data-orientation="vertical"] {
+    @apply ms-4;
+  }
+}
+
+/* Tab indicator - React Aria's SelectionIndicator */
+.tabs__indicator {
+  @apply absolute start-0 top-0 size-full rounded-3xl bg-segment shadow-surface;
+
+  z-index: -1;
+
+  /**
+   * Transitions
+   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+   */
+  transition-duration: 250ms;
+  transition-property: translate, width, height;
+  transition-timing-function: var(--ease-out-fluid);
+  @apply motion-reduce:transition-none;
+}
+
+/* ==========================================================================
+   Secondary Variant
+   ========================================================================== */
+
+.tabs--secondary {
+  /* Container - flat, no pill. Underline on container (not list) so it stays
+     stable when the inner list scrolls horizontally inside the ScrollShadow. */
+  > .tabs__list-container {
+    @apply rounded-none bg-transparent;
+
+    /* Tab list - remove padding */
+    .tabs__list {
+      @apply p-0;
+    }
+
+    /* Hide separators in secondary variant */
+    .tabs__separator {
+      @apply hidden;
+    }
+
+    /* Tab - adjust for secondary variant */
+    .tabs__tab {
+      @apply rounded-none;
+
+      /* Selected state - use text-foreground */
+      &[data-selected="true"] {
+        @apply text-foreground;
+      }
+    }
+
+    /* Tab indicator - line style */
+    .tabs__indicator {
+      @apply rounded-none bg-accent shadow-none;
+    }
+  }
+
+  /* Horizontal orientation - bottom border + bottom line indicator */
+  &[data-orientation="horizontal"] > .tabs__list-container {
+    @apply border-b border-border;
+
+    .tabs__indicator {
+      @apply top-auto bottom-0 h-0.5;
+    }
+  }
+
+  /* Vertical orientation - left border + left line indicator */
+  &[data-orientation="vertical"] > .tabs__list-container {
+    @apply border-s border-border;
+
+    .tabs__indicator {
+      @apply start-0 top-0 h-full w-0.5;
+    }
+  }
+}

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

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

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

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

package/dist/components/tag/index.js

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

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

@@ -0,0 +1,73 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const tagVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+    };
+    variant: {
+        default: {
+            base: string;
+        };
+        surface: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    removeButton: string;
+}, undefined, {
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+    };
+    variant: {
+        default: {
+            base: string;
+        };
+        surface: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    removeButton: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+    };
+    variant: {
+        default: {
+            base: string;
+        };
+        surface: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    removeButton: string;
+}>>;
+export type TagVariants = VariantProps<typeof tagVariants>;
+//# sourceMappingURL=tag.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tag.styles.d.ts","sourceRoot":"","sources":["../../../src/components/tag/tag.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,WAAW;;QAWlB,EAAE;YACA,IAAI;;QAEN,EAAE;YACA,IAAI;;QAEN,EAAE;YACA,IAAI;;;;QAIN,OAAO;YACL,IAAI;;QAEN,OAAO;YACL,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAIV,CAAC;AAEH,MAAM,MAAM,WAAW,GAAG,YAAY,CAAC,OAAO,WAAW,CAAC,CAAC"}

package/dist/components/tag/tag.styles.js

@@ -0,0 +1,25 @@
+import { tv } from "tailwind-variants";
+//#region src/components/tag/tag.styles.ts
+const tagVariants = tv({
+	defaultVariants: {
+		size: "md",
+		variant: "default"
+	},
+	slots: {
+		base: "tag",
+		removeButton: "tag__remove-button"
+	},
+	variants: {
+		size: {
+			lg: { base: "tag--lg" },
+			md: { base: "tag--md" },
+			sm: { base: "tag--sm" }
+		},
+		variant: {
+			default: { base: "tag--default" },
+			surface: { base: "tag--surface" }
+		}
+	}
+});
+//#endregion
+export { tagVariants };

package/dist/components/tag-group/index.d.ts

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

package/dist/components/tag-group/index.d.ts.map

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

package/dist/components/tag-group/index.js

@@ -0,0 +1,2 @@
+import { tagGroupVariants } from "./tag-group.styles.js";
+export { tagGroupVariants };

package/dist/components/tag-group/tag-group.styles.d.ts

@@ -0,0 +1,34 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const tagGroupVariants: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: {
+            base?: import("tailwind-variants").ClassValue;
+            list?: import("tailwind-variants").ClassValue;
+        } | import("tailwind-variants").ClassValue;
+    };
+} | {
+    [x: string]: {
+        [x: string]: {
+            base?: import("tailwind-variants").ClassValue;
+            list?: import("tailwind-variants").ClassValue;
+        } | import("tailwind-variants").ClassValue;
+    };
+} | {}, {
+    base: string;
+    list: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: {
+            base?: import("tailwind-variants").ClassValue;
+            list?: import("tailwind-variants").ClassValue;
+        } | import("tailwind-variants").ClassValue;
+    };
+} | {}, {
+    base: string;
+    list: string;
+}, import("tailwind-variants").TVReturnTypeLike<unknown, {
+    base: string;
+    list: string;
+}>>;
+export type TagGroupVariants = VariantProps<typeof tagGroupVariants>;
+//# sourceMappingURL=tag-group.styles.d.ts.map

package/dist/components/tag-group/tag-group.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag-group.styles.d.ts","sourceRoot":"","sources":["../../../src/components/tag-group/tag-group.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAK3B,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC"}

package/dist/components/tag-group/tag-group.styles.js

@@ -0,0 +1,8 @@
+import { tv } from "tailwind-variants";
+//#region src/components/tag-group/tag-group.styles.ts
+const tagGroupVariants = tv({ slots: {
+	base: "tag-group",
+	list: "tag-group__list"
+} });
+//#endregion
+export { tagGroupVariants };

package/dist/components/tag-group.css

@@ -0,0 +1,15 @@
+/* Base styles */
+.tag-group {
+  @apply relative flex flex-col gap-1;
+}
+
+.tag-group__list {
+  @apply relative flex flex-wrap gap-1.5;
+}
+
+.tag-group [slot="description"],
+.tag-group [data-slot="description"],
+.tag-group [slot="errorMessage"],
+.tag-group [data-slot="error-message"] {
+  @apply p-1;
+}

package/dist/components/tag.css

@@ -0,0 +1,98 @@
+/* Tag component styles */
+.tag {
+  --optical-offset: 0.031em;
+
+  @apply relative inline-flex items-center gap-1 rounded-xl font-medium select-none no-highlight;
+
+  /**
+   * Transitions
+   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+   */
+  transition:
+    color 100ms var(--ease-smooth),
+    scale 100ms var(--ease-smooth),
+    opacity 100ms var(--ease-smooth),
+    background-color 100ms var(--ease-smooth),
+    box-shadow 100ms var(--ease-out);
+  @apply origin-center transform-gpu motion-reduce:transition-none;
+
+  /* Cursor */
+  cursor: var(--cursor-interactive);
+
+  /* SVG icon styling */
+  & svg {
+    @apply pointer-events-none size-3 shrink-0 self-center text-current;
+  }
+}
+
+/* Disabled state */
+.tag:is([data-disabled="true"], [aria-disabled="true"]) {
+  @apply status-disabled;
+}
+
+/* Focus visible state (keyboard focus only) */
+.tag:is(:focus-visible, [data-focus-visible]) {
+  @apply status-focused;
+}
+
+/* Pressed/Active state */
+.tag:is(:active, [data-pressed="true"]) {
+}
+
+/* Selected state */
+.tag:is([data-selected="true"], [aria-selected="true"]) {
+  @apply bg-accent-soft text-accent-soft-foreground;
+
+  /* Selected + Hover state */
+  @media (hover: hover) {
+    &:is(:hover, [data-hovered="true"]) {
+      @apply bg-accent-soft-hover;
+    }
+  }
+}
+
+/* Size */
+.tag--sm {
+  @apply px-2 py-0.5 text-xs;
+}
+
+.tag--md {
+  @apply px-2 py-1 text-xs;
+}
+
+.tag--lg {
+  @apply rounded-2xl px-2.5 py-1.5 text-sm;
+}
+
+/* Variant */
+.tag--default {
+  @apply bg-default text-default-foreground;
+
+  /* Hover state (when not selected or disabled) */
+  @media (hover: hover) {
+    &:is(:hover, [data-hovered="true"]):not([data-selected="true"]):not([data-disabled="true"]) {
+      @apply bg-default-hover;
+    }
+  }
+}
+
+.tag--surface {
+  @apply bg-surface text-surface-foreground;
+
+  /* Hover state (when not selected or disabled) */
+  @media (hover: hover) {
+    &:is(:hover, [data-hovered="true"]):not([data-selected="true"]):not([data-disabled="true"]) {
+      @apply bg-surface-hover;
+    }
+  }
+}
+
+/* Remove Button  */
+.tag__remove-button {
+  @apply size-3 text-inherit;
+
+  /* SVG icon styling */
+  & svg {
+    @apply size-[inherit] shrink-0 self-center text-current;
+  }
+}

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

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

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

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

package/dist/components/textarea/index.js

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

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

@@ -0,0 +1,31 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const textAreaVariants: import("tailwind-variants").TVReturnType<{
+    fullWidth: {
+        false: "";
+        true: "textarea--full-width";
+    };
+    variant: {
+        primary: "textarea--primary";
+        secondary: "textarea--secondary";
+    };
+}, undefined, "textarea", {
+    fullWidth: {
+        false: "";
+        true: "textarea--full-width";
+    };
+    variant: {
+        primary: "textarea--primary";
+        secondary: "textarea--secondary";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    fullWidth: {
+        false: "";
+        true: "textarea--full-width";
+    };
+    variant: {
+        primary: "textarea--primary";
+        secondary: "textarea--secondary";
+    };
+}, undefined>>;
+export type TextAreaVariants = VariantProps<typeof textAreaVariants>;
+//# sourceMappingURL=textarea.styles.d.ts.map

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

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

package/dist/components/textarea/textarea.styles.js

@@ -0,0 +1,21 @@
+import { tv } from "tailwind-variants";
+//#region src/components/textarea/textarea.styles.ts
+const textAreaVariants = tv({
+	base: "textarea",
+	defaultVariants: {
+		fullWidth: false,
+		variant: "primary"
+	},
+	variants: {
+		fullWidth: {
+			false: "",
+			true: "textarea--full-width"
+		},
+		variant: {
+			primary: "textarea--primary",
+			secondary: "textarea--secondary"
+		}
+	}
+});
+//#endregion
+export { textAreaVariants };