@ropav/styles 0.5.0 → 0.7.0

package/dist/components/typography.css

@@ -1,41 +1,43 @@
-.typography {
+.rp-typography {
   @apply text-foreground;
 }
 
-.typography-prose {
+.rp-typography-prose {
   @apply text-foreground;
 }
 
-.typography-prose h1 {
+.rp-typography-prose h1 {
   @apply text-4xl font-semibold tracking-tight;
 }
 
-.typography-prose h2 {
+.rp-typography-prose h2 {
   @apply text-3xl font-semibold tracking-tight;
 }
 
-.typography-prose h3 {
+.rp-typography-prose h3 {
   @apply text-2xl font-semibold tracking-tight;
 }
 
-.typography-prose h4 {
+.rp-typography-prose h4 {
   @apply text-xl font-semibold tracking-tight;
 }
 
-.typography-prose h5 {
+.rp-typography-prose h5 {
   @apply text-lg font-semibold tracking-tight;
 }
 
-.typography-prose h6 {
+.rp-typography-prose h6 {
   @apply text-base font-semibold tracking-tight;
 }
 
-.typography-prose p {
+.rp-typography-prose p {
   @apply text-base leading-7;
 }
 
-.typography-prose code {
-  @apply rounded-md bg-default px-1.5 py-0.5 font-mono text-sm text-foreground;
+.rp-typography-prose code {
+  @apply bg-default px-1.5 py-0.5 font-mono text-sm text-foreground;
+
+  border-radius: min(32px, var(--component-radius));
 
   /* Code is marked out by a tinted background and nothing else, so forced colors leaves it
    * indistinguishable from the prose around it - the monospace face is all that is left. */
@@ -45,32 +47,34 @@
   }
 }
 
-.typography-prose a {
+.rp-typography-prose a {
   @apply font-medium text-link underline underline-offset-4;
 }
 
-.typography-prose blockquote {
+.rp-typography-prose blockquote {
   @apply mt-4 border-s-4 border-border ps-4 text-muted italic;
 }
 
-.typography-prose ul {
+.rp-typography-prose ul {
   @apply my-4 list-disc space-y-2 ps-6;
 }
 
-.typography-prose ol {
+.rp-typography-prose ol {
   @apply my-4 list-decimal space-y-2 ps-6;
 }
 
-.typography-prose li {
+.rp-typography-prose li {
   @apply text-base leading-7;
 }
 
-.typography-prose hr {
+.rp-typography-prose hr {
   @apply my-8 border-separator;
 }
 
-.typography-prose pre {
-  @apply my-4 overflow-x-auto rounded-xl bg-default p-4 font-mono text-sm leading-relaxed;
+.rp-typography-prose pre {
+  @apply my-4 overflow-x-auto bg-default p-4 font-mono text-sm leading-relaxed;
+
+  border-radius: min(32px, var(--component-radius));
 
   /* Code is marked out by a tinted background and nothing else, so forced colors leaves it
    * indistinguishable from the prose around it - the monospace face is all that is left. */
@@ -80,56 +84,60 @@
   }
 }
 
-.typography-prose strong {
+.rp-typography-prose strong {
   @apply font-semibold text-foreground;
 }
 
-.typography-prose em {
+.rp-typography-prose em {
   @apply italic;
 }
 
-.typography-prose img {
-  @apply my-4 rounded-xl;
+.rp-typography-prose img {
+  @apply my-4;
+
+  border-radius: min(32px, var(--component-radius));
 }
 
-.typography--h1 {
+.rp-typography--h1 {
   @apply text-4xl font-semibold tracking-tight;
 }
 
-.typography--h2 {
+.rp-typography--h2 {
   @apply text-3xl font-semibold tracking-tight;
 }
 
-.typography--h3 {
+.rp-typography--h3 {
   @apply text-2xl font-semibold tracking-tight;
 }
 
-.typography--h4 {
+.rp-typography--h4 {
   @apply text-xl font-semibold tracking-tight;
 }
 
-.typography--h5 {
+.rp-typography--h5 {
   @apply text-lg font-semibold tracking-tight;
 }
 
-.typography--h6 {
+.rp-typography--h6 {
   @apply text-base font-semibold tracking-tight;
 }
 
-.typography--body {
+.rp-typography--body {
   @apply text-base leading-7;
 }
 
-.typography--body-sm {
+.rp-typography--body-sm {
   @apply text-sm leading-6;
 }
 
-.typography--body-xs {
+.rp-typography--body-xs {
   @apply text-xs leading-5;
 }
 
-.typography--code {
-  @apply rounded-md bg-default px-1.5 py-0.5 font-mono text-sm text-foreground;
+.rp-typography--code {
+  @apply bg-default px-1.5 py-0.5 font-mono text-sm text-foreground;
+
+  border-radius: min(32px, var(--component-radius));
 
   /* Code is marked out by a tinted background and nothing else, so forced colors leaves it
    * indistinguishable from the prose around it - the monospace face is all that is left. */
@@ -139,46 +147,46 @@
   }
 }
 
-.typography--align-start {
+.rp-typography--align-start {
   @apply text-start;
 }
 
-.typography--align-center {
+.rp-typography--align-center {
   @apply text-center;
 }
 
-.typography--align-end {
+.rp-typography--align-end {
   @apply text-end;
 }
 
-.typography--align-justify {
+.rp-typography--align-justify {
   @apply text-justify;
 }
 
-.typography--color-default {
+.rp-typography--color-default {
   @apply text-foreground;
 }
 
-.typography--color-muted {
+.rp-typography--color-muted {
   @apply text-muted;
 }
 
-.typography--truncate {
+.rp-typography--truncate {
   @apply block truncate;
 }
 
-.typography--weight-normal {
+.rp-typography--weight-normal {
   @apply font-normal;
 }
 
-.typography--weight-medium {
+.rp-typography--weight-medium {
   @apply font-medium;
 }
 
-.typography--weight-semibold {
+.rp-typography--weight-semibold {
   @apply font-semibold;
 }
 
-.typography--weight-bold {
+.rp-typography--weight-bold {
   @apply font-bold;
 }

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

@@ -4,41 +4,17 @@
  * Only the scrollbar so far: a table and a listbox hide the native one and draw this in its place,
  * so a dragged thumb moves the rows and the scroll offset together.
  */
-export declare const virtualizerVariants: import("tailwind-variants").TVReturnType<{
-    [key: string]: {
-        [key: string]: {
-            scrollbar?: import("tailwind-variants").ClassValue;
-            scrollbarThumb?: import("tailwind-variants").ClassValue;
-            scrollbarTrack?: import("tailwind-variants").ClassValue;
-        } | import("tailwind-variants").ClassValue;
-    };
-} | {
-    [x: string]: {
-        [x: string]: {
-            scrollbar?: import("tailwind-variants").ClassValue;
-            scrollbarThumb?: import("tailwind-variants").ClassValue;
-            scrollbarTrack?: import("tailwind-variants").ClassValue;
-        } | import("tailwind-variants").ClassValue;
-    };
-} | {}, {
-    scrollbar: string;
-    scrollbarThumb: string;
-    scrollbarTrack: string;
-}, undefined, {
-    [key: string]: {
-        [key: string]: {
-            scrollbar?: import("tailwind-variants").ClassValue;
-            scrollbarThumb?: import("tailwind-variants").ClassValue;
-            scrollbarTrack?: import("tailwind-variants").ClassValue;
-        } | import("tailwind-variants").ClassValue;
-    };
-} | {}, {
-    scrollbar: string;
-    scrollbarThumb: string;
-    scrollbarTrack: string;
-}, import("tailwind-variants").TVReturnTypeLike<unknown, {
-    scrollbar: string;
-    scrollbarThumb: string;
-    scrollbarTrack: string;
-}>>;
+export declare const virtualizerVariants: (props?: ({
+    class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+} & object) | undefined) => {
+    scrollbar: (props?: ({
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    } & object) | undefined) => string;
+    scrollbarThumb: (props?: ({
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    } & object) | undefined) => string;
+    scrollbarTrack: (props?: ({
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    } & object) | undefined) => string;
+};
 //# sourceMappingURL=virtualizer.styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"virtualizer.styles.d.ts","sourceRoot":"","sources":["../../../src/components/virtualizer/virtualizer.styles.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAM9B,CAAC"}
+{"version":3,"file":"virtualizer.styles.d.ts","sourceRoot":"","sources":["../../../src/components/virtualizer/virtualizer.styles.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB;;;;;;;;;;;;CAM9B,CAAC"}

package/dist/components/virtualizer/virtualizer.styles.js

@@ -1,4 +1,4 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv.js";
 //#region src/components/virtualizer/virtualizer.styles.ts
 /**
 * The parts a windowed collection draws for itself, whichever collection it is.
@@ -7,9 +7,9 @@ import { tv } from "tailwind-variants";
 * so a dragged thumb moves the rows and the scroll offset together.
 */
 const virtualizerVariants = tv({ slots: {
-	scrollbar: "virtualizer__scrollbar",
-	scrollbarThumb: "virtualizer__scrollbar-thumb",
-	scrollbarTrack: "virtualizer__scrollbar-track"
+	scrollbar: "rp-virtualizer__scrollbar",
+	scrollbarThumb: "rp-virtualizer__scrollbar-thumb",
+	scrollbarTrack: "rp-virtualizer__scrollbar-track"
 } });
 //#endregion
 export { virtualizerVariants };

package/dist/components/virtualizer.css

@@ -12,11 +12,11 @@
 /* A box of no height stuck to the top and inline start of the viewport, so a track placed at its
  * edges sits at the viewport's edges however far the content has been scrolled along either axis.
  * The component gives it the viewport's width. */
-.virtualizer__scrollbar {
+.rp-virtualizer__scrollbar {
   @apply sticky start-0 top-0 z-2 h-0;
 }
 
-.virtualizer__scrollbar-track {
+.rp-virtualizer__scrollbar-track {
   @apply absolute touch-none select-none;
   background-color: var(--scrollbar-track);
 
@@ -33,9 +33,17 @@
   }
 }
 
-.virtualizer__scrollbar-thumb {
+.rp-virtualizer__scrollbar-thumb {
   @apply absolute rounded-full;
-  background-color: var(--scrollbar-thumb);
+
+  /* The thumb's fill, per state. Three states paint it and one declaration cannot tell them
+   * apart, so each reads its own. Both lit values are an alpha rather than a neutral, so the
+   * thumb stays visible over whatever the scroller happens to be showing. */
+  --virtualizer-scrollbar-thumb-bg: var(--scrollbar-thumb);
+  --virtualizer-scrollbar-thumb-bg-hover: color-mix(in oklch, var(--foreground) 25%, transparent);
+  --virtualizer-scrollbar-thumb-bg-pressed: color-mix(in oklch, var(--foreground) 35%, transparent);
+
+  background-color: var(--virtualizer-scrollbar-thumb-bg);
 
   &[data-orientation="vertical"] {
     inset-inline: 2px;
@@ -48,12 +56,12 @@
   @media (hover: hover) {
     &:hover,
     &[data-hovered="true"] {
-      background-color: color-mix(in oklch, var(--foreground) 25%, transparent);
+      background-color: var(--virtualizer-scrollbar-thumb-bg-hover);
     }
   }
 
   &[data-pressed="true"] {
-    background-color: color-mix(in oklch, var(--foreground) 35%, transparent);
+    background-color: var(--virtualizer-scrollbar-thumb-bg-pressed);
   }
 
   /* Forced Colors Mode replaces the translucent fill with the canvas, and the thumb vanishes. */

package/dist/core.css

@@ -0,0 +1,26 @@
+/* Everything the stylesheet layers on beyond Tailwind's own three parts. Imported by
+ * `index.css` and by `no-preflight.css`, and not an entry of its own — the two entries
+ * differ only in whether they pull in Tailwind's preflight. */
+
+@import "tw-animate-css";
+
+/* Base styles */
+@import "./base/base.css" layer(base);
+@import "./base/scrollbar.css" layer(base);
+
+/* Base component structures (unstyled) */
+@import "./components/index.css" layer(components);
+
+/* Maps the theme tokens onto Tailwind's namespaces - @see https://tailwindcss.com/docs/theme.
+ * Must stay unlayered: Tailwind only picks up `@theme` outside a cascade layer. */
+@import "./themes/shared/theme.css";
+
+/* Default theme. Declares its own `@layer theme`; the bundled alternatives in
+ * `themes/*.css` are opt-in and layer themselves the same way. */
+@import "./themes/default.css";
+
+/* Utilities */
+@import "./utilities/index.css";
+
+/* Variants */
+@import "./variants/index.css";

package/dist/index.css

@@ -2,27 +2,11 @@
 
 /* Ropav Styles - Layered Theme Architecture */
 
-/* Base layer - Tailwind CSS v4 */
-@import "tailwindcss";
-@import "tw-animate-css";
-
-/* Base styles */
-@import "./base/base.css" layer(base);
-@import "./base/scrollbar.css" layer(base);
-
-/* Base component structures (unstyled) */
-@import "./components/index.css" layer(components);
-
-/* Maps the theme tokens onto Tailwind's namespaces - @see https://tailwindcss.com/docs/theme.
- * Must stay unlayered: Tailwind only picks up `@theme` outside a cascade layer. */
-@import "./themes/shared/theme.css";
-
-/* Default theme. Declares its own `@layer theme`; the bundled alternatives in
- * `themes/*.css` are opt-in and layer themselves the same way. */
-@import "./themes/default.css";
-
-/* Utilities */
-@import "./utilities/index.css";
-
-/* Variants */
-@import "./variants/index.css";
+/* Base layer - Tailwind CSS v4, spelled out part by part rather than as
+ * `@import "tailwindcss"`, so `no-preflight.css` can drop the reset and keep the rest.
+ * The order matches what the bundled entry does, and both entries must keep it. */
+@import "tailwindcss/theme.css" layer(theme);
+@import "tailwindcss/preflight.css" layer(base);
+@import "tailwindcss/utilities.css" layer(utilities);
+
+@import "./core.css";

package/dist/index.d.ts

@@ -1,4 +1,5 @@
-export { tv, cn, type VariantProps } from "tailwind-variants";
+export type { VariantProps } from "./tv";
 export * from "./utils";
 export * from "./components";
+export * from "./themes";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAE,EAAE,EAAE,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAG9D,cAAc,SAAS,CAAC;AAGxB,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,YAAY,EAAE,YAAY,EAAE,MAAM,MAAM,CAAC;AAGzC,cAAc,SAAS,CAAC;AAGxB,cAAc,cAAc,CAAC;AAG7B,cAAc,UAAU,CAAC"}

package/dist/index.js

@@ -32,6 +32,7 @@ import { descriptionVariants } from "./components/description/description.styles
 import { drawerVariants } from "./components/drawer/drawer.styles.js";
 import { disclosureVariants } from "./components/disclosure/disclosure.styles.js";
 import { disclosureGroupVariants } from "./components/disclosure-group/disclosure-group.styles.js";
+import { dropZoneVariants } from "./components/drop-zone/drop-zone.styles.js";
 import { dropdownVariants } from "./components/dropdown/dropdown.styles.js";
 import { emptyStateVariants } from "./components/empty-state/empty-state.styles.js";
 import { errorMessageVariants } from "./components/error-message/error-message.styles.js";
@@ -86,5 +87,5 @@ import { toggleButtonGroupVariants } from "./components/toggle-button-group/togg
 import { toolbarVariants } from "./components/toolbar/toolbar.styles.js";
 import { tooltipVariants } from "./components/tooltip/tooltip.styles.js";
 import { virtualizerVariants } from "./components/virtualizer/virtualizer.styles.js";
-import { cn, tv } from "tailwind-variants";
-export { accordionVariants, alertDialogVariants, alertVariants, ariaDisabledClasses, autocompleteVariants, avatarVariants, badgeVariants, breadcrumbsVariants, buttonGroupVariants, buttonVariants, calendarVariants, calendarYearPickerVariants, cardVariants, checkboxGroupVariants, checkboxVariants, chipVariants, closeButtonVariants, cn, colorAreaVariants, colorFieldVariants, colorInputGroupVariants, colorPickerVariants, colorSliderVariants, colorSwatchPickerVariants, colorSwatchVariants, comboBoxVariants, dateFieldVariants, dateInputGroupVariants, datePickerVariants, dateRangePickerVariants, descriptionVariants, disabledClasses, disclosureGroupVariants, disclosureVariants, drawerVariants, dropdownVariants, emptyStateVariants, errorMessageVariants, fieldErrorVariants, fieldsetVariants, focusRingClasses, headerVariants, inputGroupVariants, inputOTPVariants, inputVariants, kbdVariants, labelVariants, linkVariants, listboxItemVariants, listboxSectionVariants, listboxVariants, menuItemVariants, menuSectionVariants, menuVariants, meterVariants, modalVariants, numberFieldVariants, paginationVariants, popoverVariants, progressBarVariants, progressCircleVariants, radioGroupVariants, radioVariants, rangeCalendarVariants, scrollShadowVariants, searchFieldVariants, segmentedControlVariants, selectVariants, separatorVariants, sidebarVariants, skeletonVariants, sliderVariants, spinnerVariants, splitterVariants, surfaceVariants, switchGroupVariants, switchVariants, tableVariants, tabsVariants, tagGroupVariants, tagVariants, textAreaVariants, textFieldVariants, timeFieldVariants, toastVariants, toggleButtonGroupVariants, toggleButtonVariants, toolbarVariants, tooltipVariants, tv, typographyVariants, virtualizerVariants };
+import { themeIds, themeLabels } from "./themes.js";
+export { accordionVariants, alertDialogVariants, alertVariants, ariaDisabledClasses, autocompleteVariants, avatarVariants, badgeVariants, breadcrumbsVariants, buttonGroupVariants, buttonVariants, calendarVariants, calendarYearPickerVariants, cardVariants, checkboxGroupVariants, checkboxVariants, chipVariants, closeButtonVariants, colorAreaVariants, colorFieldVariants, colorInputGroupVariants, colorPickerVariants, colorSliderVariants, colorSwatchPickerVariants, colorSwatchVariants, comboBoxVariants, dateFieldVariants, dateInputGroupVariants, datePickerVariants, dateRangePickerVariants, descriptionVariants, disabledClasses, disclosureGroupVariants, disclosureVariants, drawerVariants, dropZoneVariants, dropdownVariants, emptyStateVariants, errorMessageVariants, fieldErrorVariants, fieldsetVariants, focusRingClasses, headerVariants, inputGroupVariants, inputOTPVariants, inputVariants, kbdVariants, labelVariants, linkVariants, listboxItemVariants, listboxSectionVariants, listboxVariants, menuItemVariants, menuSectionVariants, menuVariants, meterVariants, modalVariants, numberFieldVariants, paginationVariants, popoverVariants, progressBarVariants, progressCircleVariants, radioGroupVariants, radioVariants, rangeCalendarVariants, scrollShadowVariants, searchFieldVariants, segmentedControlVariants, selectVariants, separatorVariants, sidebarVariants, skeletonVariants, sliderVariants, spinnerVariants, splitterVariants, surfaceVariants, switchGroupVariants, switchVariants, tableVariants, tabsVariants, tagGroupVariants, tagVariants, textAreaVariants, textFieldVariants, themeIds, themeLabels, timeFieldVariants, toastVariants, toggleButtonGroupVariants, toggleButtonVariants, toolbarVariants, tooltipVariants, typographyVariants, virtualizerVariants };

package/dist/no-preflight.css

@@ -0,0 +1,8 @@
+@layer theme, base, components, utilities;
+
+/* `index.css` without Tailwind's preflight, for an app that already resets - one running
+ * its own Tailwind build, or carrying a reset of its own. Identical in every other way. */
+@import "tailwindcss/theme.css" layer(theme);
+@import "tailwindcss/utilities.css" layer(utilities);
+
+@import "./core.css";