@ropav/styles 0.3.0

package/dist/components/toggle-button.css

@@ -0,0 +1,149 @@
+/* ==========================================================================
+   ToggleButton - Interactive toggle control for on/off states
+   ========================================================================== */
+
+/* Base styles */
+.toggle-button {
+  @apply relative isolate inline-flex h-10 w-fit origin-center items-center justify-center gap-2 rounded-3xl px-4 text-sm font-medium whitespace-nowrap outline-none select-none no-highlight md:h-9;
+
+  /**
+   * Transitions
+   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+   */
+  transition:
+    transform 250ms var(--ease-smooth),
+    background-color 100ms var(--ease-out),
+    box-shadow 100ms var(--ease-out);
+  @apply transform-gpu motion-reduce:transition-none;
+
+  /* Cursor */
+  cursor: var(--cursor-interactive);
+
+  /* Default tokens (unselected state) */
+  --toggle-button-bg: var(--default);
+  --toggle-button-bg-hover: var(--default-hover);
+  --toggle-button-bg-pressed: var(--default-hover);
+  --toggle-button-fg: currentColor;
+
+  /* Selected state tokens */
+  --toggle-button-bg-selected: var(--accent-soft);
+  --toggle-button-bg-selected-hover: var(--accent-soft-hover);
+  --toggle-button-bg-selected-pressed: var(--accent-soft-hover);
+  --toggle-button-fg-selected: var(--accent-soft-foreground);
+
+  background-color: var(--toggle-button-bg);
+  color: var(--toggle-button-fg);
+
+  /* Focus state */
+  &:focus-visible:not(:focus),
+  &[data-focus-visible="true"] {
+    @apply status-focused;
+  }
+
+  /* Disabled state */
+  &:disabled,
+  &[aria-disabled="true"] {
+    @apply status-disabled;
+  }
+
+  /* Hover */
+  @media (hover: hover) {
+    &:hover,
+    &[data-hovered="true"] {
+      background-color: var(--toggle-button-bg-hover);
+    }
+  }
+
+  /* Active / pressed */
+  &:active,
+  &[data-pressed="true"] {
+    background-color: var(--toggle-button-bg-pressed);
+    transform: scale(0.97);
+  }
+
+  /* Selected state */
+  &[data-selected="true"] {
+    background-color: var(--toggle-button-bg-selected);
+    color: var(--toggle-button-fg-selected);
+
+    @media (hover: hover) {
+      &:hover,
+      &[data-hovered="true"] {
+        background-color: var(--toggle-button-bg-selected-hover);
+      }
+    }
+
+    &:active,
+    &[data-pressed="true"] {
+      background-color: var(--toggle-button-bg-selected-pressed);
+    }
+  }
+
+  /* SVG icon styling */
+  & svg {
+    @apply pointer-events-none -mx-0.5 my-0.5 size-5 shrink-0 self-center sm:my-1 sm:size-4;
+  }
+}
+
+/* ==========================================================================
+   Size variants
+   ========================================================================== */
+
+.toggle-button--sm {
+  @apply h-9 px-3 md:h-8;
+
+  & svg {
+    @apply size-4;
+  }
+
+  &:active,
+  &[data-pressed="true"] {
+    transform: scale(0.98);
+  }
+}
+
+.toggle-button--md {
+  /* No styles as this is the default size */
+}
+
+.toggle-button--lg {
+  @apply h-11 text-base md:h-10;
+
+  &:active,
+  &[data-pressed="true"] {
+    transform: scale(0.96);
+  }
+}
+
+/* ==========================================================================
+   Variant styles
+   ========================================================================== */
+
+.toggle-button--default {
+  --toggle-button-bg: var(--default);
+  --toggle-button-bg-hover: var(--default-hover);
+  --toggle-button-bg-pressed: var(--default-hover);
+}
+
+.toggle-button--ghost {
+  --toggle-button-bg: transparent;
+  --toggle-button-bg-hover: var(--default);
+  --toggle-button-bg-pressed: var(--default);
+  --toggle-button-fg: var(--default-foreground);
+}
+
+/* ==========================================================================
+   Icon-only modifier
+   ========================================================================== */
+
+.toggle-button--icon-only {
+  @apply w-10 p-0 md:w-9;
+}
+
+.toggle-button--icon-only.toggle-button--sm {
+  @apply w-9 md:w-8;
+}
+
+.toggle-button--icon-only.toggle-button--lg {
+  @apply w-11 md:w-10;
+}

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

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

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

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

package/dist/components/toolbar/index.js

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

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

@@ -0,0 +1,29 @@
+import type { VariantProps } from "tailwind-variants";
+declare const toolbarVariants: import("tailwind-variants").TVReturnType<{
+    isAttached: {
+        true: "toolbar--attached";
+    };
+    orientation: {
+        horizontal: "toolbar--horizontal";
+        vertical: "toolbar--vertical";
+    };
+}, undefined, "toolbar", {
+    isAttached: {
+        true: "toolbar--attached";
+    };
+    orientation: {
+        horizontal: "toolbar--horizontal";
+        vertical: "toolbar--vertical";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    isAttached: {
+        true: "toolbar--attached";
+    };
+    orientation: {
+        horizontal: "toolbar--horizontal";
+        vertical: "toolbar--vertical";
+    };
+}, undefined>>;
+export { toolbarVariants };
+export type ToolbarVariants = VariantProps<typeof toolbarVariants>;
+//# sourceMappingURL=toolbar.styles.d.ts.map

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

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

package/dist/components/toolbar/toolbar.styles.js

@@ -0,0 +1,18 @@
+import { tv } from "tailwind-variants";
+//#region src/components/toolbar/toolbar.styles.ts
+const toolbarVariants = tv({
+	base: "toolbar",
+	defaultVariants: {
+		isAttached: false,
+		orientation: "horizontal"
+	},
+	variants: {
+		isAttached: { true: "toolbar--attached" },
+		orientation: {
+			horizontal: "toolbar--horizontal",
+			vertical: "toolbar--vertical"
+		}
+	}
+});
+//#endregion
+export { toolbarVariants };

package/dist/components/toolbar.css

@@ -0,0 +1,32 @@
+/* ==========================================================================
+   Toolbar - Container for interactive controls with arrow key navigation
+   ========================================================================== */
+
+/* Base styles */
+.toolbar {
+  @apply grid w-fit grid-flow-col items-center gap-2;
+
+  .separator--vertical {
+    @apply h-1/2 self-center;
+  }
+
+  .separator--horizontal {
+    @apply w-1/2 justify-center justify-self-center;
+  }
+}
+
+/* Orientation variants */
+.toolbar--horizontal {
+}
+
+.toolbar--vertical {
+  @apply grid-flow-row items-start justify-start;
+  .button-group {
+    @apply justify-start;
+  }
+}
+
+/* Attached variant */
+.toolbar--attached {
+  @apply rounded-3xl bg-surface p-1 shadow-overlay;
+}

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

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

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

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

package/dist/components/tooltip/index.js

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

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

@@ -0,0 +1,34 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const tooltipVariants: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: {
+            base?: import("tailwind-variants").ClassValue;
+            trigger?: import("tailwind-variants").ClassValue;
+        } | import("tailwind-variants").ClassValue;
+    };
+} | {
+    [x: string]: {
+        [x: string]: {
+            base?: import("tailwind-variants").ClassValue;
+            trigger?: import("tailwind-variants").ClassValue;
+        } | import("tailwind-variants").ClassValue;
+    };
+} | {}, {
+    base: string;
+    trigger: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: {
+            base?: import("tailwind-variants").ClassValue;
+            trigger?: import("tailwind-variants").ClassValue;
+        } | import("tailwind-variants").ClassValue;
+    };
+} | {}, {
+    base: string;
+    trigger: string;
+}, import("tailwind-variants").TVReturnTypeLike<unknown, {
+    base: string;
+    trigger: string;
+}>>;
+export type TooltipVariants = VariantProps<typeof tooltipVariants>;
+//# sourceMappingURL=tooltip.styles.d.ts.map

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

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

package/dist/components/tooltip/tooltip.styles.js

@@ -0,0 +1,8 @@
+import { tv } from "tailwind-variants";
+//#region src/components/tooltip/tooltip.styles.ts
+const tooltipVariants = tv({ slots: {
+	base: "tooltip",
+	trigger: "tooltip__trigger"
+} });
+//#endregion
+export { tooltipVariants };

package/dist/components/tooltip.css

@@ -0,0 +1,79 @@
+/* Tooltip component styles */
+
+/* Base tooltip styles */
+.tooltip {
+  @apply max-w-xs origin-(--trigger-anchor-point) bg-overlay p-2 text-xs break-all;
+  border-radius: min(32px, var(--radius-xl));
+  box-shadow: var(--shadow-overlay);
+
+  /* Entering animations */
+  &[data-entering="true"] {
+    @apply animate-in duration-150 ease-smooth fade-in-0 zoom-in-90;
+
+    /* Placement-specific translations */
+    &[data-placement="top"] {
+      @apply slide-in-from-bottom-1;
+    }
+
+    &[data-placement="bottom"] {
+      @apply slide-in-from-top-1;
+    }
+
+    &[data-placement="left"] {
+      @apply slide-in-from-right-1;
+    }
+
+    &[data-placement="right"] {
+      @apply slide-in-from-left-1;
+    }
+  }
+
+  /* Exiting animations */
+  &[data-exiting="true"] {
+    @apply animate-out duration-100 ease-smooth zoom-out-95 fade-out;
+  }
+
+  &[data-exiting="true"],
+  &[data-entering="true"] {
+    @apply transition-[opacity,transform] will-change-[opacity,transform];
+  }
+
+  /* Arrow styling */
+  & [data-slot="overlay-arrow"] {
+    @apply stroke-border/40;
+    fill: var(--overlay);
+  }
+
+  /* Arrow rotation based on placement */
+  &[data-placement="bottom"] [data-slot="overlay-arrow"] {
+    rotate: 180deg;
+  }
+
+  &[data-placement="left"] [data-slot="overlay-arrow"] {
+    rotate: -90deg;
+  }
+
+  &[data-placement="right"] [data-slot="overlay-arrow"] {
+    rotate: 90deg;
+  }
+}
+
+/* Tooltip trigger */
+.tooltip__trigger {
+  @apply inline-block;
+
+  /**
+   * Transitions
+   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+   */
+  transition:
+    color 150ms var(--ease-smooth),
+    background-color 150ms var(--ease-smooth),
+    box-shadow 150ms var(--ease-out);
+  @apply motion-reduce:transition-none;
+
+  &:focus-visible:not(:focus),
+  &[data-focus-visible="true"] {
+    @apply status-focused;
+  }
+}

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

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

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

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

package/dist/components/typography/index.js

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

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

@@ -0,0 +1,109 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const typographyVariants: import("tailwind-variants").TVReturnType<{
+    align: {
+        center: "typography--align-center";
+        end: "typography--align-end";
+        justify: "typography--align-justify";
+        start: "typography--align-start";
+    };
+    color: {
+        default: "typography--color-default";
+        muted: "typography--color-muted";
+    };
+    truncate: {
+        true: "typography--truncate";
+    };
+    type: {
+        body: "typography--body";
+        "body-sm": "typography--body-sm";
+        "body-xs": "typography--body-xs";
+        code: "typography--code";
+        h1: "typography--h1";
+        h2: "typography--h2";
+        h3: "typography--h3";
+        h4: "typography--h4";
+        h5: "typography--h5";
+        h6: "typography--h6";
+    };
+    weight: {
+        bold: "typography--weight-bold";
+        medium: "typography--weight-medium";
+        normal: "typography--weight-normal";
+        semibold: "typography--weight-semibold";
+    };
+}, {
+    base: string;
+    prose: string;
+}, undefined, {
+    align: {
+        center: "typography--align-center";
+        end: "typography--align-end";
+        justify: "typography--align-justify";
+        start: "typography--align-start";
+    };
+    color: {
+        default: "typography--color-default";
+        muted: "typography--color-muted";
+    };
+    truncate: {
+        true: "typography--truncate";
+    };
+    type: {
+        body: "typography--body";
+        "body-sm": "typography--body-sm";
+        "body-xs": "typography--body-xs";
+        code: "typography--code";
+        h1: "typography--h1";
+        h2: "typography--h2";
+        h3: "typography--h3";
+        h4: "typography--h4";
+        h5: "typography--h5";
+        h6: "typography--h6";
+    };
+    weight: {
+        bold: "typography--weight-bold";
+        medium: "typography--weight-medium";
+        normal: "typography--weight-normal";
+        semibold: "typography--weight-semibold";
+    };
+}, {
+    base: string;
+    prose: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    align: {
+        center: "typography--align-center";
+        end: "typography--align-end";
+        justify: "typography--align-justify";
+        start: "typography--align-start";
+    };
+    color: {
+        default: "typography--color-default";
+        muted: "typography--color-muted";
+    };
+    truncate: {
+        true: "typography--truncate";
+    };
+    type: {
+        body: "typography--body";
+        "body-sm": "typography--body-sm";
+        "body-xs": "typography--body-xs";
+        code: "typography--code";
+        h1: "typography--h1";
+        h2: "typography--h2";
+        h3: "typography--h3";
+        h4: "typography--h4";
+        h5: "typography--h5";
+        h6: "typography--h6";
+    };
+    weight: {
+        bold: "typography--weight-bold";
+        medium: "typography--weight-medium";
+        normal: "typography--weight-normal";
+        semibold: "typography--weight-semibold";
+    };
+}, {
+    base: string;
+    prose: string;
+}>>;
+export type TypographyVariants = VariantProps<typeof typographyVariants>;
+//# sourceMappingURL=typography.styles.d.ts.map

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

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

package/dist/components/typography/typography.styles.js

@@ -0,0 +1,46 @@
+import { tv } from "tailwind-variants";
+//#region src/components/typography/typography.styles.ts
+const typographyVariants = tv({
+	defaultVariants: {
+		align: "start",
+		color: "default",
+		type: "body"
+	},
+	slots: {
+		base: "typography",
+		prose: "typography-prose"
+	},
+	variants: {
+		align: {
+			center: "typography--align-center",
+			end: "typography--align-end",
+			justify: "typography--align-justify",
+			start: "typography--align-start"
+		},
+		color: {
+			default: "typography--color-default",
+			muted: "typography--color-muted"
+		},
+		truncate: { true: "typography--truncate" },
+		type: {
+			body: "typography--body",
+			"body-sm": "typography--body-sm",
+			"body-xs": "typography--body-xs",
+			code: "typography--code",
+			h1: "typography--h1",
+			h2: "typography--h2",
+			h3: "typography--h3",
+			h4: "typography--h4",
+			h5: "typography--h5",
+			h6: "typography--h6"
+		},
+		weight: {
+			bold: "typography--weight-bold",
+			medium: "typography--weight-medium",
+			normal: "typography--weight-normal",
+			semibold: "typography--weight-semibold"
+		}
+	}
+});
+//#endregion
+export { typographyVariants };