@ropav/styles 0.3.0

package/dist/components/progress-bar/progress-bar.styles.d.ts

@@ -0,0 +1,106 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const progressBarVariants: import("tailwind-variants").TVReturnType<{
+    color: {
+        accent: {
+            base: string;
+        };
+        danger: {
+            base: string;
+        };
+        default: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+    };
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    fill: string;
+    output: string;
+    track: string;
+}, undefined, {
+    color: {
+        accent: {
+            base: string;
+        };
+        danger: {
+            base: string;
+        };
+        default: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+    };
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    fill: string;
+    output: string;
+    track: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    color: {
+        accent: {
+            base: string;
+        };
+        danger: {
+            base: string;
+        };
+        default: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+    };
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    fill: string;
+    output: string;
+    track: string;
+}>>;
+export type ProgressBarVariants = VariantProps<typeof progressBarVariants>;
+//# sourceMappingURL=progress-bar.styles.d.ts.map

package/dist/components/progress-bar/progress-bar.styles.d.ts.map

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

package/dist/components/progress-bar/progress-bar.styles.js

@@ -0,0 +1,30 @@
+import { tv } from "tailwind-variants";
+//#region src/components/progress-bar/progress-bar.styles.ts
+const progressBarVariants = tv({
+	defaultVariants: {
+		color: "accent",
+		size: "md"
+	},
+	slots: {
+		base: "progress-bar",
+		fill: "progress-bar__fill",
+		output: "progress-bar__output",
+		track: "progress-bar__track"
+	},
+	variants: {
+		color: {
+			accent: { base: "progress-bar--accent" },
+			danger: { base: "progress-bar--danger" },
+			default: { base: "progress-bar--default" },
+			success: { base: "progress-bar--success" },
+			warning: { base: "progress-bar--warning" }
+		},
+		size: {
+			lg: { base: "progress-bar--lg" },
+			md: { base: "progress-bar--md" },
+			sm: { base: "progress-bar--sm" }
+		}
+	}
+});
+//#endregion
+export { progressBarVariants };

package/dist/components/progress-bar.css

@@ -0,0 +1,136 @@
+/* ==========================================================================
+   ProgressBar - Shows determinate or indeterminate progress
+   ========================================================================== */
+
+/* Base styles */
+.progress-bar {
+  @apply grid w-full gap-1;
+  grid-template-areas:
+    "label output"
+    "track track";
+  grid-template-columns: 1fr auto;
+
+  /* Default color token (accent) */
+  --progress-bar-fill: var(--accent);
+
+  [data-slot="label"] {
+    @apply w-fit text-sm font-medium;
+
+    grid-area: label;
+  }
+
+  .progress-bar__output {
+    @apply text-sm font-medium tabular-nums;
+
+    grid-area: output;
+  }
+
+  .progress-bar__track {
+    @apply relative overflow-hidden rounded-sm bg-default;
+
+    grid-area: track;
+
+    /* Default height (matches --md) */
+    @apply h-2;
+  }
+
+  .progress-bar__fill {
+    @apply absolute start-0 top-0 h-full rounded-sm;
+
+    background-color: var(--progress-bar-fill);
+
+    /**
+     * Transitions
+     * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+     */
+    transition: width 300ms var(--ease-out);
+    @apply motion-reduce:transition-none;
+  }
+
+  /* Indeterminate state - when no aria-valuenow is set */
+  &:not([aria-valuenow]) {
+    .progress-bar__fill {
+      @apply w-2/5;
+
+      animation: progress-bar-indeterminate 1.5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
+
+      @apply motion-reduce:animate-none;
+    }
+  }
+
+  /* Disabled state */
+  &:disabled,
+  &[data-disabled="true"],
+  &[aria-disabled="true"] {
+    @apply status-disabled;
+
+    [data-slot="label"] {
+      @apply opacity-100;
+    }
+  }
+}
+
+/* ==========================================================================
+   Indeterminate animation
+   ========================================================================== */
+
+@keyframes progress-bar-indeterminate {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(350%);
+  }
+}
+
+/* ==========================================================================
+   Size variants
+   ========================================================================== */
+
+.progress-bar--sm {
+  .progress-bar__track {
+    @apply h-1 rounded-xs;
+  }
+
+  .progress-bar__fill {
+    @apply rounded-xs;
+  }
+}
+
+.progress-bar--md {
+  /* No styles as this is the default size */
+}
+
+.progress-bar--lg {
+  .progress-bar__track {
+    @apply h-3 rounded-md;
+  }
+
+  .progress-bar__fill {
+    @apply rounded-md;
+  }
+}
+
+/* ==========================================================================
+   Color variants
+   ========================================================================== */
+
+.progress-bar--default {
+  --progress-bar-fill: var(--default-foreground);
+}
+
+.progress-bar--accent {
+  --progress-bar-fill: var(--accent);
+}
+
+.progress-bar--success {
+  --progress-bar-fill: var(--success);
+}
+
+.progress-bar--warning {
+  --progress-bar-fill: var(--warning);
+}
+
+.progress-bar--danger {
+  --progress-bar-fill: var(--danger);
+}

package/dist/components/progress-circle/index.d.ts

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

package/dist/components/progress-circle/index.d.ts.map

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

package/dist/components/progress-circle/index.js

@@ -0,0 +1,2 @@
+import { progressCircleVariants } from "./progress-circle.styles.js";
+export { progressCircleVariants };

package/dist/components/progress-circle/progress-circle.styles.d.ts

@@ -0,0 +1,106 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const progressCircleVariants: import("tailwind-variants").TVReturnType<{
+    color: {
+        accent: {
+            base: string;
+        };
+        danger: {
+            base: string;
+        };
+        default: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+    };
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    fillCircle: string;
+    track: string;
+    trackCircle: string;
+}, undefined, {
+    color: {
+        accent: {
+            base: string;
+        };
+        danger: {
+            base: string;
+        };
+        default: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+    };
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    fillCircle: string;
+    track: string;
+    trackCircle: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    color: {
+        accent: {
+            base: string;
+        };
+        danger: {
+            base: string;
+        };
+        default: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+    };
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    fillCircle: string;
+    track: string;
+    trackCircle: string;
+}>>;
+export type ProgressCircleVariants = VariantProps<typeof progressCircleVariants>;
+//# sourceMappingURL=progress-circle.styles.d.ts.map

package/dist/components/progress-circle/progress-circle.styles.d.ts.map

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

package/dist/components/progress-circle/progress-circle.styles.js

@@ -0,0 +1,30 @@
+import { tv } from "tailwind-variants";
+//#region src/components/progress-circle/progress-circle.styles.ts
+const progressCircleVariants = tv({
+	defaultVariants: {
+		color: "accent",
+		size: "md"
+	},
+	slots: {
+		base: "progress-circle",
+		fillCircle: "progress-circle__fill-circle",
+		track: "progress-circle__track",
+		trackCircle: "progress-circle__track-circle"
+	},
+	variants: {
+		color: {
+			accent: { base: "progress-circle--accent" },
+			danger: { base: "progress-circle--danger" },
+			default: { base: "progress-circle--default" },
+			success: { base: "progress-circle--success" },
+			warning: { base: "progress-circle--warning" }
+		},
+		size: {
+			lg: { base: "progress-circle--lg" },
+			md: { base: "progress-circle--md" },
+			sm: { base: "progress-circle--sm" }
+		}
+	}
+});
+//#endregion
+export { progressCircleVariants };

package/dist/components/progress-circle.css

@@ -0,0 +1,105 @@
+/* ==========================================================================
+   ProgressCircle - Circular progress indicator
+   ========================================================================== */
+
+/* Base styles */
+.progress-circle {
+  @apply inline-flex items-center justify-center;
+
+  /* Default color token (accent) */
+  --progress-circle-stroke: var(--accent);
+  --progress-circle-track-stroke: var(--default);
+
+  .progress-circle__track {
+    /* Default size (matches --md) */
+    @apply size-7;
+  }
+
+  .progress-circle__track-circle {
+    stroke: var(--progress-circle-track-stroke);
+  }
+
+  .progress-circle__fill-circle {
+    stroke: var(--progress-circle-stroke);
+
+    /**
+     * Transitions
+     * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+     */
+    transition: stroke-dashoffset 300ms var(--ease-out);
+    @apply motion-reduce:transition-none;
+  }
+
+  /* Indeterminate state - when no aria-valuenow is set */
+  &:not([aria-valuenow]) {
+    .progress-circle__track {
+      animation: progress-circle-spin 1s linear infinite;
+
+      @apply motion-reduce:animate-none;
+    }
+  }
+
+  /* Disabled state */
+  &:disabled,
+  &[data-disabled="true"],
+  &[aria-disabled="true"] {
+    @apply status-disabled;
+  }
+}
+
+/* ==========================================================================
+   Indeterminate animation
+   ========================================================================== */
+
+@keyframes progress-circle-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* ==========================================================================
+   Size variants
+   ========================================================================== */
+
+.progress-circle--sm {
+  .progress-circle__track {
+    @apply size-5;
+  }
+}
+
+.progress-circle--md {
+  /* No styles as this is the default size */
+}
+
+.progress-circle--lg {
+  .progress-circle__track {
+    @apply size-9;
+  }
+}
+
+/* ==========================================================================
+   Color variants
+   ========================================================================== */
+
+.progress-circle--default {
+  --progress-circle-stroke: var(--default-foreground);
+}
+
+.progress-circle--accent {
+  --progress-circle-stroke: var(--accent);
+}
+
+.progress-circle--success {
+  --progress-circle-stroke: var(--success);
+}
+
+.progress-circle--warning {
+  --progress-circle-stroke: var(--warning);
+}
+
+.progress-circle--danger {
+  --progress-circle-stroke: var(--danger);
+}

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

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

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

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

package/dist/components/radio/index.js

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

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

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

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

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

package/dist/components/radio/radio.styles.js

@@ -0,0 +1,10 @@
+import { tv } from "tailwind-variants";
+//#region src/components/radio/radio.styles.ts
+const radioVariants = tv({ slots: {
+	base: "radio",
+	content: "radio__content",
+	control: "radio__control",
+	indicator: "radio__indicator"
+} });
+//#endregion
+export { radioVariants };

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

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

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

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

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

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

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

@@ -0,0 +1,19 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const radioGroupVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: "radio-group--primary";
+        secondary: "radio-group--secondary";
+    };
+}, undefined, "radio-group", {
+    variant: {
+        primary: "radio-group--primary";
+        secondary: "radio-group--secondary";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    variant: {
+        primary: "radio-group--primary";
+        secondary: "radio-group--secondary";
+    };
+}, undefined>>;
+export type RadioGroupVariants = VariantProps<typeof radioGroupVariants>;
+//# sourceMappingURL=radio-group.styles.d.ts.map

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

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

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

@@ -0,0 +1,12 @@
+import { tv } from "tailwind-variants";
+//#region src/components/radio-group/radio-group.styles.ts
+const radioGroupVariants = tv({
+	base: "radio-group",
+	defaultVariants: { variant: "primary" },
+	variants: { variant: {
+		primary: "radio-group--primary",
+		secondary: "radio-group--secondary"
+	} }
+});
+//#endregion
+export { radioGroupVariants };