@ropav/styles 0.3.0

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

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

package/dist/components/skeleton/skeleton.styles.js

@@ -0,0 +1,13 @@
+import { tv } from "tailwind-variants";
+//#region src/components/skeleton/skeleton.styles.ts
+const skeletonVariants = tv({
+	defaultVariants: { animationType: "shimmer" },
+	slots: { base: "skeleton" },
+	variants: { animationType: {
+		none: "skeleton--none",
+		pulse: "skeleton--pulse",
+		shimmer: "skeleton--shimmer"
+	} }
+});
+//#endregion
+export { skeletonVariants };

package/dist/components/skeleton.css

@@ -0,0 +1,48 @@
+.skeleton {
+  @apply pointer-events-none relative overflow-hidden rounded-sm bg-surface-tertiary/70;
+}
+
+/* TODO: Skeleton with parent are not visible */
+
+/* Animation types */
+.skeleton--shimmer {
+  &::after {
+    @apply absolute inset-0 -translate-x-full animate-skeleton bg-linear-to-r from-transparent via-surface-tertiary to-transparent content-[''];
+  }
+
+  /* When applied to a parent container with multiple skeletons */
+  &:has(.skeleton) {
+    &::after {
+      content: none;
+    }
+
+    /* Single synchronized shimmer that passes over all children */
+    &::before {
+      @apply absolute inset-0 -translate-x-full animate-skeleton content-[''];
+      background: linear-gradient(
+        90deg,
+        transparent 0%,
+        rgba(255, 255, 255, 0.5) 50%,
+        transparent 100%
+      );
+      z-index: 10;
+      pointer-events: none;
+      /* Use mix-blend-mode to only show over skeleton elements */
+      mix-blend-mode: overlay;
+    }
+
+    /* Ensure children don't have their own shimmer */
+    & .skeleton {
+      &::after {
+        content: none;
+      }
+    }
+  }
+}
+
+.skeleton--pulse {
+  @apply animate-pulse;
+}
+
+.skeleton--none {
+}

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

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

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

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

package/dist/components/slider/index.js

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

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

@@ -0,0 +1,58 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const sliderVariants: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: {
+            base?: import("tailwind-variants").ClassValue;
+            fill?: import("tailwind-variants").ClassValue;
+            marks?: import("tailwind-variants").ClassValue;
+            output?: import("tailwind-variants").ClassValue;
+            thumb?: import("tailwind-variants").ClassValue;
+            track?: import("tailwind-variants").ClassValue;
+        } | import("tailwind-variants").ClassValue;
+    };
+} | {
+    [x: string]: {
+        [x: string]: {
+            base?: import("tailwind-variants").ClassValue;
+            fill?: import("tailwind-variants").ClassValue;
+            marks?: import("tailwind-variants").ClassValue;
+            output?: import("tailwind-variants").ClassValue;
+            thumb?: import("tailwind-variants").ClassValue;
+            track?: import("tailwind-variants").ClassValue;
+        } | import("tailwind-variants").ClassValue;
+    };
+} | {}, {
+    base: string;
+    fill: string;
+    marks: string;
+    output: string;
+    thumb: string;
+    track: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: {
+            base?: import("tailwind-variants").ClassValue;
+            fill?: import("tailwind-variants").ClassValue;
+            marks?: import("tailwind-variants").ClassValue;
+            output?: import("tailwind-variants").ClassValue;
+            thumb?: import("tailwind-variants").ClassValue;
+            track?: import("tailwind-variants").ClassValue;
+        } | import("tailwind-variants").ClassValue;
+    };
+} | {}, {
+    base: string;
+    fill: string;
+    marks: string;
+    output: string;
+    thumb: string;
+    track: string;
+}, import("tailwind-variants").TVReturnTypeLike<unknown, {
+    base: string;
+    fill: string;
+    marks: string;
+    output: string;
+    thumb: string;
+    track: string;
+}>>;
+export type SliderVariants = VariantProps<typeof sliderVariants>;
+//# sourceMappingURL=slider.styles.d.ts.map

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

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

package/dist/components/slider/slider.styles.js

@@ -0,0 +1,12 @@
+import { tv } from "tailwind-variants";
+//#region src/components/slider/slider.styles.ts
+const sliderVariants = tv({ slots: {
+	base: "slider",
+	fill: "slider__fill",
+	marks: "slider__marks",
+	output: "slider__output",
+	thumb: "slider__thumb",
+	track: "slider__track"
+} });
+//#endregion
+export { sliderVariants };

package/dist/components/slider.css

@@ -0,0 +1,180 @@
+/* Slider styles */
+
+.slider {
+  @apply grid w-full gap-1;
+
+  grid-template-areas:
+    "label output"
+    "track track";
+  grid-template-columns: 1fr auto;
+
+  [data-slot="label"] {
+    @apply w-fit text-sm font-medium;
+
+    grid-area: label;
+  }
+
+  .slider__output {
+    @apply text-sm font-medium tabular-nums;
+
+    grid-area: output;
+  }
+
+  .slider__track {
+    @apply relative rounded-xl bg-default;
+
+    grid-area: track;
+  }
+
+  .slider__fill {
+    @apply pointer-events-none absolute bg-accent;
+  }
+
+  .slider__thumb {
+    /* Flex container for centering pseudo-elements */
+    @apply absolute flex cursor-grab items-center justify-center rounded-xl bg-accent no-highlight;
+
+    /**
+   * Transitions
+   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+   */
+    transition:
+      background-color 250ms var(--ease-smooth),
+      transform 250ms var(--ease-out),
+      box-shadow 150ms var(--ease-out);
+    @apply motion-reduce:transition-none;
+
+    /* after: Visible thumb element */
+    &::after {
+      @apply relative z-10 rounded-lg bg-accent-foreground text-black shadow-field;
+      content: "";
+
+      /**
+       * Transitions
+       */
+      @apply origin-center transition-all motion-reduce:transition-none;
+    }
+
+    /* Dragging state - cursor changes and thumb scales down */
+    &[data-dragging="true"] {
+      @apply cursor-grabbing;
+
+      &::after {
+        @apply scale-[0.9] motion-reduce:scale-100;
+      }
+    }
+
+    /* Focus state - increase z-index */
+    &[data-focus-visible="true"] {
+      @apply z-10 status-focused;
+    }
+
+    /* Disabled state */
+    &[data-disabled="true"] {
+      @apply cursor-default;
+    }
+  }
+
+  /* Disabled state */
+  &:disabled,
+  &[data-disabled="true"],
+  &[aria-disabled="true"] {
+    @apply status-disabled;
+
+    [data-slot="label"] {
+      @apply opacity-100;
+    }
+  }
+
+  /* Horizontal orientation */
+  &[data-orientation="horizontal"] {
+    flex-direction: column;
+
+    .slider__track {
+      @apply h-5 w-full;
+      /* Add transparent borders to provide space for thumb at edges */
+      /* Thumb width is 1.5rem (24px), so half is 0.75rem (12px) */
+      @apply border-x-[0.75rem] border-x-transparent;
+
+      &[data-fill-start="true"] {
+        @apply border-s-accent;
+      }
+
+      &[data-fill-end="true"] {
+        @apply border-e-accent;
+      }
+    }
+
+    .slider__fill,
+    .slider__thumb {
+      @apply h-full;
+    }
+
+    .slider__thumb {
+      @apply top-1/2;
+
+      /* Thumb width + border width */
+      width: calc(1.5rem + 0.25rem);
+
+      &::after {
+        width: 1.5rem;
+        height: 1rem;
+      }
+    }
+  }
+
+  /* Vertical orientation */
+  &[data-orientation="vertical"] {
+    @apply h-full gap-2;
+
+    flex-direction: row;
+    grid-template-areas:
+      "output"
+      "track"
+      "label";
+    grid-template-rows: auto 1fr auto;
+    grid-template-columns: 1fr;
+
+    .slider__output {
+      text-align: center;
+    }
+
+    [data-slot="label"] {
+      text-align: center;
+    }
+
+    .slider__track {
+      @apply h-full w-5;
+      /* Add transparent borders to provide space for thumb at edges */
+      /* Thumb height is 1.5rem (24px), so half is 0.75rem (12px) */
+      @apply border-y-[0.75rem] border-y-transparent;
+      justify-self: center;
+
+      &[data-fill-start="true"] {
+        @apply border-b-accent;
+      }
+
+      &[data-fill-end="true"] {
+        @apply border-t-accent;
+      }
+    }
+
+    .slider__fill,
+    .slider__thumb {
+      @apply w-full;
+    }
+
+    .slider__thumb {
+      /* Cross-axis centering; React Aria applies a physical translateX(-50%), so keep left-1/2 for RTL correctness */
+      @apply left-1/2;
+
+      /* Thumb height + border height */
+      height: calc(1.5rem + 0.25rem);
+
+      &::after {
+        width: 1rem;
+        height: 1.5rem;
+      }
+    }
+  }
+}

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

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

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

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

package/dist/components/spinner/index.js

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

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

@@ -0,0 +1,46 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const spinnerVariants: import("tailwind-variants").TVReturnType<{
+    color: {
+        accent: "spinner--accent";
+        current: "spinner--current";
+        danger: "spinner--danger";
+        success: "spinner--success";
+        warning: "spinner--warning";
+    };
+    size: {
+        lg: "spinner--lg";
+        md: "spinner--md";
+        sm: "spinner--sm";
+        xl: "spinner--xl";
+    };
+}, undefined, "spinner", {
+    color: {
+        accent: "spinner--accent";
+        current: "spinner--current";
+        danger: "spinner--danger";
+        success: "spinner--success";
+        warning: "spinner--warning";
+    };
+    size: {
+        lg: "spinner--lg";
+        md: "spinner--md";
+        sm: "spinner--sm";
+        xl: "spinner--xl";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    color: {
+        accent: "spinner--accent";
+        current: "spinner--current";
+        danger: "spinner--danger";
+        success: "spinner--success";
+        warning: "spinner--warning";
+    };
+    size: {
+        lg: "spinner--lg";
+        md: "spinner--md";
+        sm: "spinner--sm";
+        xl: "spinner--xl";
+    };
+}, undefined>>;
+export type SpinnerVariants = VariantProps<typeof spinnerVariants>;
+//# sourceMappingURL=spinner.styles.d.ts.map

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

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

package/dist/components/spinner/spinner.styles.js

@@ -0,0 +1,26 @@
+import { tv } from "tailwind-variants";
+//#region src/components/spinner/spinner.styles.ts
+const spinnerVariants = tv({
+	base: "spinner",
+	defaultVariants: {
+		color: "accent",
+		size: "md"
+	},
+	variants: {
+		color: {
+			accent: "spinner--accent",
+			current: "spinner--current",
+			danger: "spinner--danger",
+			success: "spinner--success",
+			warning: "spinner--warning"
+		},
+		size: {
+			lg: "spinner--lg",
+			md: "spinner--md",
+			sm: "spinner--sm",
+			xl: "spinner--xl"
+		}
+	}
+});
+//#endregion
+export { spinnerVariants };

package/dist/components/spinner.css

@@ -0,0 +1,42 @@
+/* Base spinner styles */
+.spinner {
+  @apply pointer-events-none inline-flex size-6 shrink-0 animate-spin-fast motion-reduce:animate-none;
+}
+
+/* Size variants */
+.spinner--sm {
+  @apply size-4;
+}
+
+.spinner--md {
+  /* No styles as this is the default size */
+}
+
+.spinner--lg {
+  @apply size-8;
+}
+
+.spinner--xl {
+  @apply size-10;
+}
+
+/* Color variants */
+.spinner--current {
+  color: inherit;
+}
+
+.spinner--accent {
+  color: var(--accent);
+}
+
+.spinner--danger {
+  color: var(--danger);
+}
+
+.spinner--success {
+  color: var(--success);
+}
+
+.spinner--warning {
+  color: var(--warning);
+}

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

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

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

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

package/dist/components/surface/index.js

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

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

@@ -0,0 +1,25 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const surfaceVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: "surface--default";
+        secondary: "surface--secondary";
+        tertiary: "surface--tertiary";
+        transparent: "surface--transparent";
+    };
+}, undefined, "surface", {
+    variant: {
+        default: "surface--default";
+        secondary: "surface--secondary";
+        tertiary: "surface--tertiary";
+        transparent: "surface--transparent";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    variant: {
+        default: "surface--default";
+        secondary: "surface--secondary";
+        tertiary: "surface--tertiary";
+        transparent: "surface--transparent";
+    };
+}, undefined>>;
+export type SurfaceVariants = VariantProps<typeof surfaceVariants>;
+//# sourceMappingURL=surface.styles.d.ts.map

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

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

package/dist/components/surface/surface.styles.js

@@ -0,0 +1,14 @@
+import { tv } from "tailwind-variants";
+//#region src/components/surface/surface.styles.ts
+const surfaceVariants = tv({
+	base: "surface",
+	defaultVariants: { variant: "default" },
+	variants: { variant: {
+		default: "surface--default",
+		secondary: "surface--secondary",
+		tertiary: "surface--tertiary",
+		transparent: "surface--transparent"
+	} }
+});
+//#endregion
+export { surfaceVariants };

package/dist/components/surface.css

@@ -0,0 +1,23 @@
+/* Surface component styles */
+
+/* Block */
+.surface {
+  @apply relative text-foreground;
+}
+
+/* Modifier - variant */
+.surface--transparent {
+  @apply bg-transparent;
+}
+
+.surface--default {
+  @apply bg-surface text-surface-foreground;
+}
+
+.surface--secondary {
+  @apply bg-surface-secondary text-surface-secondary-foreground;
+}
+
+.surface--tertiary {
+  @apply bg-surface-tertiary text-surface-tertiary-foreground;
+}

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

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

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

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

package/dist/components/switch/index.js

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

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

@@ -0,0 +1,58 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const switchVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    content: string;
+    control: string;
+    icon: string;
+    thumb: string;
+}, undefined, {
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    content: string;
+    control: string;
+    icon: string;
+    thumb: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    content: string;
+    control: string;
+    icon: string;
+    thumb: string;
+}>>;
+export type SwitchVariants = VariantProps<typeof switchVariants>;
+//# sourceMappingURL=switch.styles.d.ts.map

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

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

package/dist/components/switch/switch.styles.js

@@ -0,0 +1,19 @@
+import { tv } from "tailwind-variants";
+//#region src/components/switch/switch.styles.ts
+const switchVariants = tv({
+	defaultVariants: { size: "md" },
+	slots: {
+		base: "switch",
+		content: "switch__content",
+		control: "switch__control",
+		icon: "switch__icon",
+		thumb: "switch__thumb"
+	},
+	variants: { size: {
+		lg: { base: "switch--lg" },
+		md: { base: "switch--md" },
+		sm: { base: "switch--sm" }
+	} }
+});
+//#endregion
+export { switchVariants };

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

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

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

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

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

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