@ropav/styles 0.3.0

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

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

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

@@ -0,0 +1,9 @@
+import { tv } from "tailwind-variants";
+//#region src/components/disclosure-group/disclosure-group.styles.ts
+const disclosureGroupVariants = tv({
+	defaultVariants: {},
+	slots: { base: "disclosure-group" },
+	variants: {}
+});
+//#endregion
+export { disclosureGroupVariants };

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

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

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

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

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

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

package/dist/components/disclosure-group.css

@@ -0,0 +1,7 @@
+/* Base disclosure-group styles */
+.disclosure-group {
+  @apply w-full;
+
+  /* Performance optimization - contain layout changes */
+  contain: layout style;
+}

package/dist/components/disclosure.css

@@ -0,0 +1,63 @@
+/* Base disclosure styles */
+.disclosure {
+  @apply relative;
+}
+
+.accordion__heading {
+  @apply flex;
+}
+
+.disclosure__trigger {
+  cursor: var(--cursor-interactive);
+  @apply inline-block no-highlight;
+
+  /* Focus state */
+  &:focus-visible:not(:focus),
+  &[data-focus-visible="true"] {
+    @apply status-focused;
+  }
+
+  /* Disabled state */
+  &:disabled,
+  &[aria-disabled="true"] {
+    @apply status-disabled;
+  }
+}
+
+.disclosure__indicator {
+  @apply ms-auto size-4 shrink-0 text-inherit;
+
+  /**
+   * Transitions
+   */
+  @apply transition duration-250 motion-reduce:transition-none;
+
+  /* Expanded state for indicator rotation */
+  &[data-expanded="true"] {
+    @apply -rotate-180;
+  }
+}
+
+.disclosure__content {
+  opacity: 0;
+  height: var(--disclosure-panel-height);
+  overflow: clip;
+
+  /**
+   * Transitions
+   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+   */
+  transition:
+    height 200ms var(--ease-out-quad),
+    opacity 200ms var(--ease-out);
+  @apply motion-reduce:transition-none;
+
+  &[data-expanded="true"] {
+    will-change: height, opacity;
+    opacity: 1;
+  }
+}
+
+.disclosure__body {
+  @apply p-2;
+}

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

@@ -0,0 +1,127 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const drawerVariants: import("tailwind-variants").TVReturnType<{
+    placement: {
+        bottom: {
+            content: string;
+            dialog: string;
+        };
+        left: {
+            content: string;
+            dialog: string;
+        };
+        right: {
+            content: string;
+            dialog: string;
+        };
+        top: {
+            content: string;
+            dialog: string;
+        };
+    };
+    variant: {
+        blur: {
+            backdrop: string;
+        };
+        opaque: {
+            backdrop: string;
+        };
+        transparent: {
+            backdrop: string;
+        };
+    };
+}, {
+    backdrop: string;
+    body: string;
+    closeTrigger: string;
+    content: string;
+    dialog: string;
+    footer: string;
+    handle: string;
+    header: string;
+    heading: string;
+    trigger: string;
+}, undefined, {
+    placement: {
+        bottom: {
+            content: string;
+            dialog: string;
+        };
+        left: {
+            content: string;
+            dialog: string;
+        };
+        right: {
+            content: string;
+            dialog: string;
+        };
+        top: {
+            content: string;
+            dialog: string;
+        };
+    };
+    variant: {
+        blur: {
+            backdrop: string;
+        };
+        opaque: {
+            backdrop: string;
+        };
+        transparent: {
+            backdrop: string;
+        };
+    };
+}, {
+    backdrop: string;
+    body: string;
+    closeTrigger: string;
+    content: string;
+    dialog: string;
+    footer: string;
+    handle: string;
+    header: string;
+    heading: string;
+    trigger: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    placement: {
+        bottom: {
+            content: string;
+            dialog: string;
+        };
+        left: {
+            content: string;
+            dialog: string;
+        };
+        right: {
+            content: string;
+            dialog: string;
+        };
+        top: {
+            content: string;
+            dialog: string;
+        };
+    };
+    variant: {
+        blur: {
+            backdrop: string;
+        };
+        opaque: {
+            backdrop: string;
+        };
+        transparent: {
+            backdrop: string;
+        };
+    };
+}, {
+    backdrop: string;
+    body: string;
+    closeTrigger: string;
+    content: string;
+    dialog: string;
+    footer: string;
+    handle: string;
+    header: string;
+    heading: string;
+    trigger: string;
+}>>;
+export type DrawerVariants = VariantProps<typeof drawerVariants>;
+//# sourceMappingURL=drawer.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.styles.d.ts","sourceRoot":"","sources":["../../../src/components/drawer/drawer.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,cAAc;;QAmBrB,MAAM;YACJ,OAAO;YACP,MAAM;;QAER,IAAI;YACF,OAAO;YACP,MAAM;;QAER,KAAK;YACH,OAAO;YACP,MAAM;;QAER,GAAG;YACD,OAAO;YACP,MAAM;;;;QAIR,IAAI;YACF,QAAQ;;QAEV,MAAM;YACJ,QAAQ;;QAEV,WAAW;YACT,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAId,CAAC;AAEH,MAAM,MAAM,cAAc,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC"}

package/dist/components/drawer/drawer.styles.js

@@ -0,0 +1,47 @@
+import { tv } from "tailwind-variants";
+//#region src/components/drawer/drawer.styles.ts
+const drawerVariants = tv({
+	defaultVariants: {
+		placement: "bottom",
+		variant: "opaque"
+	},
+	slots: {
+		backdrop: "drawer__backdrop",
+		body: "drawer__body",
+		closeTrigger: "drawer__close-trigger",
+		content: "drawer__content",
+		dialog: "drawer__dialog",
+		footer: "drawer__footer",
+		handle: "drawer__handle",
+		header: "drawer__header",
+		heading: "drawer__heading",
+		trigger: "drawer__trigger"
+	},
+	variants: {
+		placement: {
+			bottom: {
+				content: "drawer__content--bottom",
+				dialog: "drawer__dialog--bottom"
+			},
+			left: {
+				content: "drawer__content--left",
+				dialog: "drawer__dialog--left"
+			},
+			right: {
+				content: "drawer__content--right",
+				dialog: "drawer__dialog--right"
+			},
+			top: {
+				content: "drawer__content--top",
+				dialog: "drawer__dialog--top"
+			}
+		},
+		variant: {
+			blur: { backdrop: "drawer__backdrop--blur" },
+			opaque: { backdrop: "drawer__backdrop--opaque" },
+			transparent: { backdrop: "drawer__backdrop--transparent" }
+		}
+	}
+});
+//#endregion
+export { drawerVariants };

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

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

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

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

package/dist/components/drawer/index.js

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

package/dist/components/drawer.css

@@ -0,0 +1,298 @@
+/* -------------------------------------------------------------------------------------------------
+ * Drawer Component Styles
+ * Block: drawer
+ * -----------------------------------------------------------------------------------------------*/
+
+/**
+ * Element: trigger - the element that opens the drawer
+ */
+.drawer__trigger {
+  @apply inline-block cursor-(--cursor-interactive);
+
+  /**
+   * Transitions
+   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+   */
+  transition:
+    transform 250ms var(--ease-out-quart),
+    background-color 150ms var(--ease-smooth),
+    box-shadow 150ms var(--ease-out);
+  @apply motion-reduce:transition-none;
+
+  /* Focus state */
+  &:focus-visible:not(:focus),
+  &[data-focus-visible="true"] {
+    @apply status-focused;
+  }
+
+  /* Disabled state */
+  &:disabled,
+  &[aria-disabled="true"] {
+    @apply status-disabled;
+  }
+
+  /* Active/pressed state */
+  &:active,
+  &[data-pressed="true"] {
+    transform: scale(0.97);
+  }
+}
+
+/**
+ * Element: backdrop - the overlay behind the drawer
+ */
+.drawer__backdrop {
+  @apply fixed inset-0 z-50;
+  @apply h-(--visual-viewport-height) w-full;
+  opacity: 1;
+  transition: opacity 250ms cubic-bezier(0.32, 0.72, 0, 1);
+
+  &[data-entering="true"] {
+    opacity: 0;
+  }
+
+  &[data-exiting="true"] {
+    opacity: 0;
+    transition-duration: 200ms;
+    transition-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
+  }
+
+  &[data-exiting="true"],
+  &[data-entering="true"] {
+    will-change: opacity;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+}
+
+/**
+ * Modifier: backdrop--transparent
+ */
+.drawer__backdrop--transparent {
+  @apply bg-transparent;
+}
+
+/**
+ * Modifier: backdrop--opaque
+ */
+.drawer__backdrop--opaque {
+  @apply bg-backdrop;
+}
+
+/**
+ * Modifier: backdrop--blur
+ */
+.drawer__backdrop--blur {
+  @apply bg-backdrop backdrop-blur-md;
+}
+
+/**
+ * Element: content - the positioning wrapper for the drawer panel
+ */
+.drawer__content {
+  @apply pointer-events-none;
+  @apply fixed inset-0 z-50 flex;
+  @apply h-(--visual-viewport-height) w-full min-w-0;
+}
+
+/**
+ * Modifier: content--bottom (default)
+ * Slides up from the bottom edge
+ */
+.drawer__content--bottom {
+  @apply items-end;
+}
+
+/**
+ * Modifier: content--top
+ * Slides down from the top edge
+ */
+.drawer__content--top {
+  @apply items-start;
+}
+
+/**
+ * Modifier: content--left
+ * Slides in from the left edge
+ */
+.drawer__content--left {
+  @apply justify-start;
+}
+
+/**
+ * Modifier: content--right
+ * Slides in from the right edge
+ */
+.drawer__content--right {
+  @apply justify-end;
+}
+
+/**
+ * Element: dialog - the drawer panel itself
+ */
+.drawer__dialog {
+  @apply relative;
+  @apply flex flex-col;
+  @apply bg-overlay shadow-overlay outline-none;
+  @apply p-6;
+  @apply pointer-events-auto;
+
+  --drawer-enter-duration: 250ms;
+  --drawer-exit-duration: 200ms;
+  --drawer-enter-ease: cubic-bezier(0.32, 0.72, 0, 1);
+  --drawer-exit-ease: cubic-bezier(0.32, 0.72, 0, 1);
+
+  will-change: translate;
+  transition: translate var(--drawer-enter-duration) var(--drawer-enter-ease);
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+
+  /* Bottom/top placement: full width, auto height */
+  &[data-placement="bottom"] {
+    @apply w-full;
+    @apply max-h-[85vh];
+    border-start-start-radius: min(32px, var(--radius-2xl));
+    border-start-end-radius: min(32px, var(--radius-2xl));
+  }
+
+  &[data-placement="top"] {
+    @apply w-full;
+    @apply max-h-[85vh];
+    border-end-start-radius: min(32px, var(--radius-2xl));
+    border-end-end-radius: min(32px, var(--radius-2xl));
+  }
+
+  /* Left/right placement: auto width, full height */
+  &[data-placement="left"] {
+    @apply h-full rounded-none;
+    @apply w-80 max-w-[85vw] sm:w-96;
+  }
+
+  &[data-placement="right"] {
+    @apply h-full rounded-none;
+    @apply w-80 max-w-[85vw] sm:w-96;
+  }
+}
+
+[data-exiting="true"] .drawer__dialog {
+  transition-duration: var(--drawer-exit-duration);
+  transition-timing-function: var(--drawer-exit-ease);
+}
+
+.drawer__content--left .drawer__dialog,
+.drawer__content--right .drawer__dialog,
+.drawer__content--top .drawer__dialog,
+.drawer__content--bottom .drawer__dialog {
+  translate: 0 0;
+}
+
+.drawer__content--left[data-entering="true"] .drawer__dialog,
+.drawer__content--left[data-exiting="true"] .drawer__dialog {
+  translate: -100% 0;
+}
+
+.drawer__content--right[data-entering="true"] .drawer__dialog,
+.drawer__content--right[data-exiting="true"] .drawer__dialog {
+  translate: 100% 0;
+}
+
+.drawer__content--top[data-entering="true"] .drawer__dialog,
+.drawer__content--top[data-exiting="true"] .drawer__dialog {
+  translate: 0 -100%;
+}
+
+.drawer__content--bottom[data-entering="true"] .drawer__dialog,
+.drawer__content--bottom[data-exiting="true"] .drawer__dialog {
+  translate: 0 100%;
+}
+
+.drawer__dialog--top {
+  @apply pb-2;
+  .drawer__handle {
+    @apply pb-0;
+  }
+}
+
+/**
+ * Element: header - the top section with the title
+ */
+.drawer__header {
+  @apply flex flex-col gap-3;
+  @apply mb-0;
+}
+
+/**
+ * Element: heading - the main title text
+ */
+.drawer__heading {
+  @apply align-middle;
+  @apply text-base font-medium text-foreground;
+}
+
+/**
+ * Element: body - the main content area
+ * touch-action: pan-y allows vertical scrolling while the dialog captures drag gestures
+ */
+.drawer__body {
+  @apply min-h-0 flex-1 scrollbar;
+  @apply text-sm leading-[1.43] text-muted;
+  @apply -m-[3px] my-0 p-[3px];
+  @apply overflow-y-auto overscroll-contain;
+  -webkit-overflow-scrolling: touch;
+}
+
+/**
+ * Element: footer - the bottom action section
+ */
+.drawer__footer {
+  @apply flex flex-row items-center justify-end gap-2;
+  @apply mt-0;
+}
+
+/**
+ * Element: handle - visual drag handle indicator
+ */
+.drawer__handle {
+  @apply flex items-center justify-center;
+  @apply pb-2;
+
+  /* The handle bar */
+  & > [data-slot="drawer-handle-bar"] {
+    @apply h-1 w-9 rounded-xs;
+    @apply bg-separator;
+  }
+}
+
+/**
+ * Element: close-trigger - the close button
+ */
+.drawer__close-trigger {
+  @apply absolute end-4 top-4;
+}
+
+/**
+ * Elements Spacing
+ */
+.drawer__header + .drawer__body {
+  @apply mt-2;
+}
+
+.drawer__header + .drawer__footer {
+  @apply mt-5;
+}
+
+.drawer__body + .drawer__footer {
+  @apply mt-5;
+}
+
+.drawer__handle + .drawer__header {
+  @apply mt-0;
+}
+
+.drawer__handle + .drawer__body {
+  @apply mt-0;
+}

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

@@ -0,0 +1,46 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const dropdownVariants: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: {
+            menu?: import("tailwind-variants").ClassValue;
+            popover?: import("tailwind-variants").ClassValue;
+            root?: import("tailwind-variants").ClassValue;
+            trigger?: import("tailwind-variants").ClassValue;
+        } | import("tailwind-variants").ClassValue;
+    };
+} | {
+    [x: string]: {
+        [x: string]: {
+            menu?: import("tailwind-variants").ClassValue;
+            popover?: import("tailwind-variants").ClassValue;
+            root?: import("tailwind-variants").ClassValue;
+            trigger?: import("tailwind-variants").ClassValue;
+        } | import("tailwind-variants").ClassValue;
+    };
+} | {}, {
+    menu: string;
+    popover: string;
+    root: string;
+    trigger: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: {
+            menu?: import("tailwind-variants").ClassValue;
+            popover?: import("tailwind-variants").ClassValue;
+            root?: import("tailwind-variants").ClassValue;
+            trigger?: import("tailwind-variants").ClassValue;
+        } | import("tailwind-variants").ClassValue;
+    };
+} | {}, {
+    menu: string;
+    popover: string;
+    root: string;
+    trigger: string;
+}, import("tailwind-variants").TVReturnTypeLike<unknown, {
+    menu: string;
+    popover: string;
+    root: string;
+    trigger: string;
+}>>;
+export type DropdownVariants = VariantProps<typeof dropdownVariants>;
+//# sourceMappingURL=dropdown.styles.d.ts.map

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

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

package/dist/components/dropdown/dropdown.styles.js

@@ -0,0 +1,10 @@
+import { tv } from "tailwind-variants";
+//#region src/components/dropdown/dropdown.styles.ts
+const dropdownVariants = tv({ slots: {
+	menu: "dropdown__menu",
+	popover: "dropdown__popover",
+	root: "dropdown",
+	trigger: "dropdown__trigger"
+} });
+//#endregion
+export { dropdownVariants };

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

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

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

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

package/dist/components/dropdown/index.js

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