@ropav/styles 0.3.0

package/dist/components/avatar.css

@@ -0,0 +1,82 @@
+/* Base avatar styles */
+.avatar {
+  @apply relative flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-3xl bg-default;
+}
+
+/* Avatar fallback element */
+.avatar__fallback {
+  @apply flex size-full items-center justify-center bg-default text-sm font-medium;
+}
+
+/* Avatar image element */
+.avatar__image {
+  @apply absolute inset-0 aspect-square size-full;
+
+  /**
+   * Transitions
+   */
+  @apply transition-opacity duration-250 motion-reduce:transition-none;
+}
+
+/* Size modifiers */
+.avatar--sm {
+  @apply size-8 rounded-2xl;
+}
+
+.avatar--md {
+  /* No styles as this is the default size */
+}
+
+.avatar--lg {
+  @apply size-12 rounded-3xl;
+
+  .avatar__fallback {
+    @apply text-base;
+  }
+}
+
+/* Color modifiers for fallback */
+.avatar__fallback--accent {
+  @apply text-accent-soft-foreground;
+}
+
+.avatar__fallback--default {
+  @apply text-default-soft-foreground;
+}
+
+.avatar__fallback--success {
+  @apply text-success-soft-foreground;
+}
+
+.avatar__fallback--warning {
+  @apply text-warning-soft-foreground;
+}
+
+.avatar__fallback--danger {
+  @apply text-danger-soft-foreground;
+}
+
+/* Variant modifiers */
+.avatar--soft {
+  @apply bg-transparent;
+}
+
+.avatar--soft .avatar__fallback--accent {
+  @apply bg-accent-soft text-accent-soft-foreground;
+}
+
+.avatar--soft .avatar__fallback--success {
+  @apply bg-success-soft text-success-soft-foreground;
+}
+
+.avatar--soft .avatar__fallback--warning {
+  @apply bg-warning-soft text-warning-soft-foreground;
+}
+
+.avatar--soft .avatar__fallback--default {
+  @apply bg-default-soft text-default-soft-foreground;
+}
+
+.avatar--soft .avatar__fallback--danger {
+  @apply bg-danger-soft text-danger-soft-foreground;
+}

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

@@ -0,0 +1,178 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const badgeVariants: import("tailwind-variants").TVReturnType<{
+    color: {
+        accent: {
+            base: string;
+        };
+        danger: {
+            base: string;
+        };
+        default: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+    };
+    placement: {
+        "bottom-left": {
+            base: string;
+        };
+        "bottom-right": {
+            base: string;
+        };
+        "top-left": {
+            base: string;
+        };
+        "top-right": {
+            base: string;
+        };
+    };
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+    };
+    variant: {
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+        soft: {
+            base: string;
+        };
+    };
+}, {
+    anchor: string;
+    base: string;
+    label: string;
+}, undefined, {
+    color: {
+        accent: {
+            base: string;
+        };
+        danger: {
+            base: string;
+        };
+        default: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+    };
+    placement: {
+        "bottom-left": {
+            base: string;
+        };
+        "bottom-right": {
+            base: string;
+        };
+        "top-left": {
+            base: string;
+        };
+        "top-right": {
+            base: string;
+        };
+    };
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+    };
+    variant: {
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+        soft: {
+            base: string;
+        };
+    };
+}, {
+    anchor: string;
+    base: string;
+    label: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    color: {
+        accent: {
+            base: string;
+        };
+        danger: {
+            base: string;
+        };
+        default: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+    };
+    placement: {
+        "bottom-left": {
+            base: string;
+        };
+        "bottom-right": {
+            base: string;
+        };
+        "top-left": {
+            base: string;
+        };
+        "top-right": {
+            base: string;
+        };
+    };
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+    };
+    variant: {
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+        soft: {
+            base: string;
+        };
+    };
+}, {
+    anchor: string;
+    base: string;
+    label: string;
+}>>;
+export type BadgeVariants = VariantProps<typeof badgeVariants>;
+//# sourceMappingURL=badge.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"badge.styles.d.ts","sourceRoot":"","sources":["../../../src/components/badge/badge.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,aAAa;;QAcpB,MAAM;YACJ,IAAI;;QAEN,MAAM;YACJ,IAAI;;QAEN,OAAO;YACL,IAAI;;QAEN,OAAO;YACL,IAAI;;QAEN,OAAO;YACL,IAAI;;;;QAIN,aAAa;YACX,IAAI;;QAEN,cAAc;YACZ,IAAI;;QAEN,UAAU;YACR,IAAI;;QAEN,WAAW;YACT,IAAI;;;;QAIN,EAAE;YACA,IAAI;;QAEN,EAAE;YACA,IAAI;;QAEN,EAAE;YACA,IAAI;;;;QAIN,OAAO;YACL,IAAI;;QAEN,SAAS;YACP,IAAI;;QAEN,IAAI;YACF,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAIV,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC"}

package/dist/components/badge/badge.styles.js

@@ -0,0 +1,42 @@
+import { tv } from "tailwind-variants";
+//#region src/components/badge/badge.styles.ts
+const badgeVariants = tv({
+	defaultVariants: {
+		color: "default",
+		placement: "top-right",
+		size: "md",
+		variant: "primary"
+	},
+	slots: {
+		anchor: "badge-anchor",
+		base: "badge",
+		label: "badge__label"
+	},
+	variants: {
+		color: {
+			accent: { base: "badge--accent" },
+			danger: { base: "badge--danger" },
+			default: { base: "badge--default" },
+			success: { base: "badge--success" },
+			warning: { base: "badge--warning" }
+		},
+		placement: {
+			"bottom-left": { base: "badge--bottom-left" },
+			"bottom-right": { base: "badge--bottom-right" },
+			"top-left": { base: "badge--top-left" },
+			"top-right": { base: "badge--top-right" }
+		},
+		size: {
+			lg: { base: "badge--lg" },
+			md: { base: "badge--md" },
+			sm: { base: "badge--sm" }
+		},
+		variant: {
+			primary: { base: "badge--primary" },
+			secondary: { base: "badge--secondary" },
+			soft: { base: "badge--soft" }
+		}
+	}
+});
+//#endregion
+export { badgeVariants };

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

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

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

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

package/dist/components/badge/index.js

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

package/dist/components/badge.css

@@ -0,0 +1,167 @@
+/* ==========================================================================
+   Badge - Small informational badges for displaying labels, statuses, and categories.
+   ========================================================================== */
+
+/* Base styles */
+.badge {
+  @apply inline-flex shrink-0 items-center justify-center gap-0.5 font-medium;
+
+  /* Default size (matches --md) */
+  @apply min-h-7 min-w-7 rounded-3xl text-xs leading-[1.34];
+
+  /* Default tokens */
+  --badge-bg: var(--default);
+  --badge-fg: var(--default-foreground);
+  --badge-border: var(--background);
+
+  background-color: var(--badge-bg);
+  color: var(--badge-fg);
+  border: 1px solid var(--badge-border);
+  background-clip: padding-box;
+}
+
+.badge__label {
+  @apply px-0.5;
+}
+
+.badge-anchor {
+  @apply relative inline-flex shrink-0;
+}
+
+/* ==========================================================================
+   Size variants
+   ========================================================================== */
+
+.badge--lg {
+  @apply min-h-8 min-w-8 rounded-2xl text-sm leading-[1.43];
+}
+
+.badge--md {
+  /* No styles as this is the default size */
+}
+
+.badge--sm {
+  @apply min-h-4 min-w-4 rounded-xl text-[10px] leading-[1.34];
+}
+
+/* ==========================================================================
+   Color variants - set foreground color
+   ========================================================================== */
+
+.badge--accent {
+  --badge-fg: var(--accent-soft-foreground);
+}
+
+.badge--default {
+  --badge-fg: var(--default-foreground);
+}
+
+.badge--success {
+  --badge-fg: var(--success-soft-foreground);
+}
+
+.badge--warning {
+  --badge-fg: var(--warning-soft-foreground);
+}
+
+.badge--danger {
+  --badge-fg: var(--danger-soft-foreground);
+}
+
+/* ==========================================================================
+   Variant styles
+   ========================================================================== */
+
+.badge--primary {
+  /* Solid background - compound variants below handle bg/fg per color */
+}
+
+.badge--secondary {
+  /* Default background with colored text - base behavior */
+}
+
+.badge--soft {
+  /* Soft/muted background - compound variants below handle bg/fg per color */
+}
+
+/* ==========================================================================
+   Placement variants
+   ========================================================================== */
+
+.badge--top-right {
+  @apply absolute top-0 right-0;
+  transform: translate(25%, -25%);
+}
+
+.badge--top-left {
+  @apply absolute top-0 left-0;
+  transform: translate(-25%, -25%);
+}
+
+.badge--bottom-right {
+  @apply absolute right-0 bottom-0;
+  transform: translate(25%, 25%);
+}
+
+.badge--bottom-left {
+  @apply absolute bottom-0 left-0;
+  transform: translate(-25%, 25%);
+}
+
+/* ==========================================================================
+   Compound variants - Primary (solid background)
+   ========================================================================== */
+
+.badge--primary.badge--accent {
+  --badge-bg: var(--accent);
+  --badge-fg: var(--accent-foreground);
+}
+
+.badge--primary.badge--default {
+  --badge-bg: var(--default);
+  --badge-fg: var(--default-foreground);
+}
+
+.badge--primary.badge--success {
+  --badge-bg: var(--success);
+  --badge-fg: var(--success-foreground);
+}
+
+.badge--primary.badge--warning {
+  --badge-bg: var(--warning);
+  --badge-fg: var(--warning-foreground);
+}
+
+.badge--primary.badge--danger {
+  --badge-bg: var(--danger);
+  --badge-fg: var(--danger-foreground);
+}
+
+/* ==========================================================================
+   Compound variants - Soft (muted background)
+   ========================================================================== */
+
+.badge--soft.badge--accent {
+  --badge-bg: var(--accent-soft);
+  --badge-fg: var(--accent-soft-foreground);
+}
+
+.badge--soft.badge--default {
+  --badge-bg: var(--default-soft);
+  --badge-fg: var(--default-soft-foreground);
+}
+
+.badge--soft.badge--success {
+  --badge-bg: var(--success-soft);
+  --badge-fg: var(--success-soft-foreground);
+}
+
+.badge--soft.badge--warning {
+  --badge-bg: var(--warning-soft);
+  --badge-fg: var(--warning-soft-foreground);
+}
+
+.badge--soft.badge--danger {
+  --badge-bg: var(--danger-soft);
+  --badge-fg: var(--danger-soft-foreground);
+}

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

@@ -0,0 +1,46 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const breadcrumbsVariants: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: {
+            base?: import("tailwind-variants").ClassValue;
+            item?: import("tailwind-variants").ClassValue;
+            link?: import("tailwind-variants").ClassValue;
+            separator?: import("tailwind-variants").ClassValue;
+        } | import("tailwind-variants").ClassValue;
+    };
+} | {
+    [x: string]: {
+        [x: string]: {
+            base?: import("tailwind-variants").ClassValue;
+            item?: import("tailwind-variants").ClassValue;
+            link?: import("tailwind-variants").ClassValue;
+            separator?: import("tailwind-variants").ClassValue;
+        } | import("tailwind-variants").ClassValue;
+    };
+} | {}, {
+    base: string;
+    item: string;
+    link: string;
+    separator: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: {
+            base?: import("tailwind-variants").ClassValue;
+            item?: import("tailwind-variants").ClassValue;
+            link?: import("tailwind-variants").ClassValue;
+            separator?: import("tailwind-variants").ClassValue;
+        } | import("tailwind-variants").ClassValue;
+    };
+} | {}, {
+    base: string;
+    item: string;
+    link: string;
+    separator: string;
+}, import("tailwind-variants").TVReturnTypeLike<unknown, {
+    base: string;
+    item: string;
+    link: string;
+    separator: string;
+}>>;
+export type BreadcrumbsVariants = VariantProps<typeof breadcrumbsVariants>;
+//# sourceMappingURL=breadcrumbs.styles.d.ts.map

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

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

package/dist/components/breadcrumbs/breadcrumbs.styles.js

@@ -0,0 +1,10 @@
+import { tv } from "tailwind-variants";
+//#region src/components/breadcrumbs/breadcrumbs.styles.ts
+const breadcrumbsVariants = tv({ slots: {
+	base: "breadcrumbs",
+	item: "breadcrumbs__item",
+	link: "breadcrumbs__link",
+	separator: "breadcrumbs__separator"
+} });
+//#endregion
+export { breadcrumbsVariants };

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

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

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

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

package/dist/components/breadcrumbs/index.js

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

package/dist/components/breadcrumbs.css

@@ -0,0 +1,28 @@
+/* Base breadcrumbs container */
+.breadcrumbs {
+  @apply flex items-center;
+
+  /* Breadcrumb link */
+  .breadcrumbs__link {
+    @apply relative px-0.5 text-sm leading-5 font-medium text-muted no-underline opacity-100;
+
+    &:hover,
+    &[data-hovered="true"] {
+      @apply underline;
+    }
+
+    &[data-current="true"] {
+      @apply text-link opacity-100;
+    }
+  }
+
+  /* Breadcrumb item wrapper */
+  .breadcrumbs__item {
+    @apply flex shrink-0 items-center justify-center gap-0.5 px-0.5;
+  }
+
+  /* Separator icon */
+  .breadcrumbs__separator {
+    @apply size-3 text-muted rtl:rotate-180;
+  }
+}

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

@@ -0,0 +1,70 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
+    fullWidth: {
+        false: "";
+        true: "button--full-width";
+    };
+    isIconOnly: {
+        true: "button--icon-only";
+    };
+    size: {
+        lg: "button--lg";
+        md: "button--md";
+        sm: "button--sm";
+    };
+    variant: {
+        danger: "button--danger";
+        "danger-soft": "button--danger-soft";
+        ghost: "button--ghost";
+        outline: "button--outline";
+        primary: "button--primary";
+        secondary: "button--secondary";
+        tertiary: "button--tertiary";
+    };
+}, undefined, "button", {
+    fullWidth: {
+        false: "";
+        true: "button--full-width";
+    };
+    isIconOnly: {
+        true: "button--icon-only";
+    };
+    size: {
+        lg: "button--lg";
+        md: "button--md";
+        sm: "button--sm";
+    };
+    variant: {
+        danger: "button--danger";
+        "danger-soft": "button--danger-soft";
+        ghost: "button--ghost";
+        outline: "button--outline";
+        primary: "button--primary";
+        secondary: "button--secondary";
+        tertiary: "button--tertiary";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    fullWidth: {
+        false: "";
+        true: "button--full-width";
+    };
+    isIconOnly: {
+        true: "button--icon-only";
+    };
+    size: {
+        lg: "button--lg";
+        md: "button--md";
+        sm: "button--sm";
+    };
+    variant: {
+        danger: "button--danger";
+        "danger-soft": "button--danger-soft";
+        ghost: "button--ghost";
+        outline: "button--outline";
+        primary: "button--primary";
+        secondary: "button--secondary";
+        tertiary: "button--tertiary";
+    };
+}, undefined>>;
+export type ButtonVariants = VariantProps<typeof buttonVariants>;
+//# sourceMappingURL=button.styles.d.ts.map

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

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

package/dist/components/button/button.styles.js

@@ -0,0 +1,34 @@
+import { tv } from "tailwind-variants";
+//#region src/components/button/button.styles.ts
+const buttonVariants = tv({
+	base: "button",
+	defaultVariants: {
+		fullWidth: false,
+		isIconOnly: false,
+		size: "md",
+		variant: "primary"
+	},
+	variants: {
+		fullWidth: {
+			false: "",
+			true: "button--full-width"
+		},
+		isIconOnly: { true: "button--icon-only" },
+		size: {
+			lg: "button--lg",
+			md: "button--md",
+			sm: "button--sm"
+		},
+		variant: {
+			danger: "button--danger",
+			"danger-soft": "button--danger-soft",
+			ghost: "button--ghost",
+			outline: "button--outline",
+			primary: "button--primary",
+			secondary: "button--secondary",
+			tertiary: "button--tertiary"
+		}
+	}
+});
+//#endregion
+export { buttonVariants };

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

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