@arobo/styles 1.0.1 → 1.1.1

package/dist/components/toast.css

@@ -0,0 +1,214 @@
+/* Toast component styles */
+
+/* Toast Region - Container for all toasts */
+.toast-region {
+  @apply pointer-events-none fixed z-50 flex flex-col outline-none;
+
+  gap: var(--gap);
+}
+
+/* Placement variants - Bottom */
+.toast-region--bottom {
+  @apply bottom-4 left-1/2 -translate-x-1/2 flex-col-reverse;
+}
+
+.toast-region--bottom-start {
+  @apply bottom-4 left-4 flex-col-reverse;
+}
+
+.toast-region--bottom-end {
+  @apply right-4 bottom-4 flex-col-reverse;
+}
+
+/* Placement variants - Top */
+.toast-region--top {
+  @apply top-4 left-1/2 -translate-x-1/2;
+}
+
+.toast-region--top-start {
+  @apply top-4 left-4;
+}
+
+.toast-region--top-end {
+  @apply top-4 right-4;
+}
+
+.toast-region:focus-visible {
+  @apply outline-2 outline-offset-2 outline-focus;
+}
+
+/* Base toast styles */
+.toast {
+  @apply pointer-events-auto relative flex w-full min-w-[calc(100vw-2rem)] flex-row items-start justify-start gap-1.5 rounded-3xl bg-surface px-4 py-3 shadow-overlay sm:min-w-auto;
+}
+
+.toast:not([data-frontmost="true"]) {
+  @apply pointer-events-none;
+
+  .toast__close-button {
+    @apply pointer-events-none opacity-0;
+    tabindex: -1;
+    outline: none;
+  }
+
+  .toast__content {
+    @apply max-h-[20px] overflow-hidden;
+  }
+}
+
+.toast:focus-visible {
+  @apply outline-2 outline-offset-2 outline-focus;
+}
+
+/* Toast placements + view transitions */
+.toast--bottom,
+.toast--bottom-start,
+.toast--bottom-end {
+  view-transition-class: toast-bottom;
+}
+
+.toast--top,
+.toast--top-start,
+.toast--top-end {
+  view-transition-class: toast-top;
+}
+
+/* Toast content */
+.toast__content {
+  @apply flex h-full grow flex-col items-start;
+}
+
+/* Toast indicator */
+.toast__indicator {
+  @apply flex shrink-0 items-center justify-center p-1 text-overlay-foreground select-none;
+
+  [data-slot="toast-default-icon"] {
+    @apply box-content size-4;
+  }
+}
+
+/* Toast title */
+.toast__title {
+  @apply text-sm leading-5 font-medium text-overlay-foreground;
+}
+
+/* Toast description */
+.toast__description {
+  @apply text-sm text-muted;
+}
+
+/* Toast close button */
+.toast__close-button {
+  @apply absolute top-2.5 right-2.5 size-5 border-border bg-default opacity-100 sm:pointer-events-none sm:-top-1 sm:-right-1 sm:border sm:bg-overlay sm:opacity-0;
+
+  transition: opacity 150ms var(--ease-smooth);
+  @apply motion-reduce:transition-none;
+  /* Overrides close button default icon size from 16px to 12px */
+  [data-slot="close-button-icon"] {
+    @apply size-3.5 sm:size-3;
+  }
+
+  /* Overrides close button hover state */
+  @media (hover: hover) {
+    &:hover,
+    &[data-hovered="true"] {
+      @apply bg-default;
+    }
+  }
+}
+
+.toast:hover .toast__close-button {
+  @apply pointer-events-auto opacity-100;
+}
+
+/* Toast action button */
+.toast__action {
+  @apply mt-2 sm:mt-0;
+}
+
+/* Variant modifiers */
+.toast--accent .toast__title {
+  @apply text-accent;
+}
+
+.toast--success .toast__title {
+  @apply text-success;
+}
+
+.toast--success .toast__indicator {
+  @apply text-success;
+}
+
+.toast--warning .toast__title {
+  @apply text-warning;
+}
+
+.toast--warning .toast__indicator {
+  @apply text-warning;
+}
+
+.toast--danger .toast__title {
+  @apply text-danger;
+}
+
+.toast--danger .toast__indicator {
+  @apply text-danger;
+}
+
+/* View transition animations */
+::view-transition-group(.toast-bottom),
+::view-transition-group(.toast-top) {
+  will-change: translate, opacity;
+}
+
+/* Bottom */
+::view-transition-new(.toast-bottom):only-child {
+  animation: toast-slide-bottom-in 350ms;
+}
+
+::view-transition-old(.toast-bottom):only-child {
+  animation: toast-slide-bottom-out 350ms;
+  animation-fill-mode: forwards;
+}
+
+/* Top */
+::view-transition-new(.toast-top):only-child {
+  animation: toast-slide-top-in 350ms;
+}
+
+::view-transition-old(.toast-top):only-child {
+  animation: toast-slide-top-out 350ms;
+  animation-fill-mode: forwards;
+}
+
+/* Keyframes */
+
+/* Bottom */
+@keyframes toast-slide-bottom-in {
+  from {
+    translate: 0 100%;
+    opacity: 0;
+  }
+}
+
+@keyframes toast-slide-bottom-out {
+  to {
+    translate: 0 100%;
+    opacity: 0;
+  }
+}
+
+/* Top */
+@keyframes toast-slide-top-in {
+  from {
+    translate: 0 -100%;
+    opacity: 0;
+  }
+}
+
+@keyframes toast-slide-top-out {
+  to {
+    translate: 0 -100%;
+    opacity: 0;
+  }
+}

package/dist/components/toggle-button/index.d.ts

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

package/dist/components/toggle-button/index.d.ts.map

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

package/dist/components/toggle-button/index.js

@@ -0,0 +1 @@
+export { toggleButtonVariants } from './toggle-button.styles.js';

package/dist/components/toggle-button/toggle-button.styles.d.ts

@@ -0,0 +1,70 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const toggleButtonVariants: import("tailwind-variants").TVReturnType<{
+    fullWidth: {
+        false: string;
+        true: string;
+    };
+    isIconOnly: {
+        true: string;
+    };
+    size: {
+        lg: string;
+        md: string;
+        sm: string;
+    };
+    variant: {
+        danger: string;
+        "danger-soft": string;
+        ghost: string;
+        outline: string;
+        primary: string;
+        secondary: string;
+        tertiary: string;
+    };
+}, undefined, "toggle-button", {
+    fullWidth: {
+        false: string;
+        true: string;
+    };
+    isIconOnly: {
+        true: string;
+    };
+    size: {
+        lg: string;
+        md: string;
+        sm: string;
+    };
+    variant: {
+        danger: string;
+        "danger-soft": string;
+        ghost: string;
+        outline: string;
+        primary: string;
+        secondary: string;
+        tertiary: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    fullWidth: {
+        false: string;
+        true: string;
+    };
+    isIconOnly: {
+        true: string;
+    };
+    size: {
+        lg: string;
+        md: string;
+        sm: string;
+    };
+    variant: {
+        danger: string;
+        "danger-soft": string;
+        ghost: string;
+        outline: string;
+        primary: string;
+        secondary: string;
+        tertiary: string;
+    };
+}, undefined, "toggle-button", unknown, unknown, undefined>>;
+export type ToggleButtonVariants = VariantProps<typeof toggleButtonVariants>;
+//# sourceMappingURL=toggle-button.styles.d.ts.map

package/dist/components/toggle-button/toggle-button.styles.d.ts.map

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

package/dist/components/toggle-button/toggle-button.styles.js

@@ -0,0 +1,36 @@
+import { tv } from 'tailwind-variants';
+
+const toggleButtonVariants = tv({
+    base: "toggle-button",
+    defaultVariants: {
+        fullWidth: false,
+        isIconOnly: false,
+        size: "md",
+        variant: "primary",
+    },
+    variants: {
+        fullWidth: {
+            false: "",
+            true: "toggle-button--full-width",
+        },
+        isIconOnly: {
+            true: "toggle-button--icon-only",
+        },
+        size: {
+            lg: "toggle-button--lg",
+            md: "toggle-button--md",
+            sm: "toggle-button--sm",
+        },
+        variant: {
+            danger: "toggle-button--danger",
+            "danger-soft": "toggle-button--danger-soft",
+            ghost: "toggle-button--ghost",
+            outline: "toggle-button--outline",
+            primary: "toggle-button--primary",
+            secondary: "toggle-button--secondary",
+            tertiary: "toggle-button--tertiary",
+        },
+    },
+});
+
+export { toggleButtonVariants };

package/dist/components/toggle-button-group/index.d.ts

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

package/dist/components/toggle-button-group/index.d.ts.map

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

package/dist/components/toggle-button-group/index.js

@@ -0,0 +1 @@
+export { toggleButtonGroupVariants } from './toggle-button-group.styles.js';

package/dist/components/toggle-button-group/toggle-button-group.styles.d.ts

@@ -0,0 +1,70 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const toggleButtonGroupVariants: import("tailwind-variants").TVReturnType<{
+    fullWidth: {
+        false: string;
+        true: string;
+    };
+    isIconOnly: {
+        true: string;
+    };
+    size: {
+        lg: string;
+        md: string;
+        sm: string;
+    };
+    variant: {
+        danger: string;
+        "danger-soft": string;
+        ghost: string;
+        outline: string;
+        primary: string;
+        secondary: string;
+        tertiary: string;
+    };
+}, undefined, "toggle-button-group", {
+    fullWidth: {
+        false: string;
+        true: string;
+    };
+    isIconOnly: {
+        true: string;
+    };
+    size: {
+        lg: string;
+        md: string;
+        sm: string;
+    };
+    variant: {
+        danger: string;
+        "danger-soft": string;
+        ghost: string;
+        outline: string;
+        primary: string;
+        secondary: string;
+        tertiary: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    fullWidth: {
+        false: string;
+        true: string;
+    };
+    isIconOnly: {
+        true: string;
+    };
+    size: {
+        lg: string;
+        md: string;
+        sm: string;
+    };
+    variant: {
+        danger: string;
+        "danger-soft": string;
+        ghost: string;
+        outline: string;
+        primary: string;
+        secondary: string;
+        tertiary: string;
+    };
+}, undefined, "toggle-button-group", unknown, unknown, undefined>>;
+export type ToggleButtonGroupVariants = VariantProps<typeof toggleButtonGroupVariants>;
+//# sourceMappingURL=toggle-button-group.styles.d.ts.map

package/dist/components/toggle-button-group/toggle-button-group.styles.d.ts.map

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

package/dist/components/toggle-button-group/toggle-button-group.styles.js

@@ -0,0 +1,36 @@
+import { tv } from 'tailwind-variants';
+
+const toggleButtonGroupVariants = tv({
+    base: "toggle-button-group",
+    defaultVariants: {
+        fullWidth: false,
+        isIconOnly: false,
+        size: "md",
+        variant: "primary",
+    },
+    variants: {
+        fullWidth: {
+            false: "",
+            true: "toggle-button-group--full-width",
+        },
+        isIconOnly: {
+            true: "toggle-button-group--icon-only",
+        },
+        size: {
+            lg: "toggle-button-group--lg",
+            md: "toggle-button-group--md",
+            sm: "toggle-button-group--sm",
+        },
+        variant: {
+            danger: "toggle-button-group--danger",
+            "danger-soft": "toggle-button-group--danger-soft",
+            ghost: "toggle-button-group--ghost",
+            outline: "toggle-button-group--outline",
+            primary: "toggle-button-group--primary",
+            secondary: "toggle-button-group--secondary",
+            tertiary: "toggle-button-group--tertiary",
+        },
+    },
+});
+
+export { toggleButtonGroupVariants };

package/dist/components/toggle-button-group.css

@@ -0,0 +1,73 @@
+.toggle-button-group {
+    @apply relative isolate inline-flex h-10 w-fit origin-center items-center justify-center gap-2 rounded-md px-4 text-sm font-medium whitespace-nowrap will-change-transform outline-none select-none no-highlight md:h-9;
+    
+}
+
+/* Size variants */
+.toggle-button-group--sm {
+    @apply h-9 px-3 md:h-8;
+
+    & svg:not([data-slot="spinner"] svg, [data-slot="link-icon"] svg) {
+        @apply size-4;
+    }
+
+    &:active:not([aria-pressed="true"]):not([data-pressed="true"]) {
+        transform: scale(0.98);
+    }
+}
+
+    
+.toggle-button-group--lg {
+    @apply h-11 text-base md:h-10;
+
+    &[aria-checked="true"], &:active:not([aria-pressed="true"]):not([data-pressed="true"]) {
+        transform: scale(0.96);
+    }
+}
+
+.toggle-button-group--primary {
+    --button-bg: var(--color-accent-soft);
+    --button-bg-hover: var(--color-accent-soft-hover);
+    --button-bg-pressed: var(--color-accent);
+    --button-fg: var(--color-accent-foreground);
+    --button-fg-pressed: var(--color-accent-foreground);
+}
+
+.toggle-button-group--secondary {
+    --button-bg: var(--color-default-soft);
+    --button-bg-hover: var(--color-default-soft-hover);
+    --button-bg-pressed: var(--color-default);
+    --button-fg: var(--color-accent-soft-foreground);
+    --button-fg-pressed: var(--color-accent-soft-foreground);
+}
+
+.toggle-button-group--tertiary {
+    --button-bg: var(--color-default);
+    --button-bg-hover: var(--color-default-hover);
+    --button-bg-pressed: var(--color-default-hover);
+}
+
+.toggle-button-group--ghost,
+.toggle-button-group--outline {
+    --button-bg: transparent;
+    --button-bg-hover: var(--color-default-hover);
+    --button-bg-pressed: var(--color-accent-soft);
+    --button-fg: var(--color-default-foreground);
+    --button-fg-pressed: var(--color-accent);
+}
+
+.toggle-button-group--danger {
+    --button-bg: var(--color-danger-soft);
+    --button-bg-hover: var(--color-danger-soft-hover);
+    --button-bg-pressed: var(--color-danger);
+    --button-fg: var(--color-danger-foreground);
+    --button-fg-pressed: var(--color-danger-foreground);
+}
+
+.toggle-button-group--danger-soft {
+    --button-bg: var(--color-danger-soft);
+    --button-bg-hover: var(--color-danger-soft-hover);
+    --button-bg-pressed: var(--color-danger);
+    --button-fg: var(--color-danger-soft-foreground);
+    --button-fg-pressed: var(--color-danger-foreground);
+}

package/dist/components/toggle-button.css

@@ -0,0 +1,122 @@
+.toggle-button {
+    @apply relative isolate inline-flex h-10 w-fit origin-center items-center justify-center gap-2 rounded-md px-4 text-sm font-medium whitespace-nowrap will-change-transform outline-none select-none no-highlight md:h-9;
+
+    cursor: var(--cursor-interactive);
+
+    --button-bg: transparent;
+    --button-bg-hover: var(--button-bg);
+    --button-bg-pressed: var(--button-bg-hover);
+    --button-fg: currentColor;
+
+    background-color: var(--button-bg);
+    /* color: var(--button-fg); */
+
+    /* Focus state */
+    &:focus-visible:not(:focus),
+    &[data-focus-visible="true"] {
+        @apply status-focused;
+    }
+
+    &:disabled,
+    &[aria-disabled="true"] {
+        @apply status-disabled;
+    }
+
+    &[aria-pressed="true"],
+    &[data-pressed="true"],
+    &[aria-checked="true"] {
+        background-color: var(--button-bg-pressed, var(--color-accent));
+        color: var(--button-fg-pressed, var(--color-accent-foreground));
+        transform: none;
+    }
+
+    /* Pending state */
+    &[data-pending="true"] {
+        @apply status-pending;
+    }
+
+    &:active:not([aria-pressed="true"]):not([data-pressed="true"]) {
+        background-color: var(--button-bg-pressed);
+        transform: scale(0.97);
+    }
+
+    @media (hover: hover) {
+        &:hover:not([aria-pressed="true"]):not([data-pressed="true"]),
+        &[data-hovered="true"]:not([aria-pressed="true"]):not([data-pressed="true"]) {
+            /* background-color: var(--button-bg-hover); */
+        }
+    }
+
+    & svg:not([data-slot="spinner"] svg, [data-slot="link-icon"] 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:not([data-slot="spinner"] svg, [data-slot="link-icon"] svg) {
+        @apply size-4;
+    }
+
+    &:active:not([aria-pressed="true"]):not([data-pressed="true"]) {
+        transform: scale(0.98);
+    }
+}
+
+
+.toggle-button--lg {
+    @apply h-11 text-base md:h-10;
+
+    &:active:not([aria-pressed="true"]):not([data-pressed="true"]) {
+        transform: scale(0.96);
+    }
+}
+
+.toggle-button--primary {
+    --button-bg: var(--color-accent-soft);
+    --button-bg-hover: var(--color-accent-soft-hover);
+    --button-bg-pressed: var(--color-accent);
+    --button-fg: var(--color-accent-foreground);
+    --button-fg-pressed: var(--color-accent-foreground);
+}
+
+.toggle-button--secondary {
+    --button-bg: var(--color-default-soft);
+    --button-bg-hover: var(--color-default-soft-hover);
+    --button-bg-pressed: var(--color-default);
+    --button-fg: var(--color-accent-soft-foreground);
+    --button-fg-pressed: var(--color-accent-soft-foreground);
+}
+
+.toggle-button--tertiary {
+    --button-bg: var(--color-default);
+    --button-bg-hover: var(--color-default-hover);
+    --button-bg-pressed: var(--color-default-hover);
+}
+
+.toggle-button--ghost,
+.toggle-button--outline {
+    --button-bg: transparent;
+    --button-bg-hover: var(--color-default-hover);
+    --button-bg-pressed: var(--color-accent-soft);
+    --button-fg: var(--color-default-foreground);
+    --button-fg-pressed: var(--color-accent);
+}
+
+.toggle-button--danger {
+    --button-bg: var(--color-danger-soft);
+    --button-bg-hover: var(--color-danger-soft-hover);
+    --button-bg-pressed: var(--color-danger);
+    --button-fg: var(--color-danger-foreground);
+    --button-fg-pressed: var(--color-danger-foreground);
+}
+
+.toggle-button--danger-soft {
+    --button-bg: var(--color-danger-soft);
+    --button-bg-hover: var(--color-danger-soft-hover);
+    --button-bg-pressed: var(--color-danger);
+    --button-fg: var(--color-danger-soft-foreground);
+    --button-fg-pressed: var(--color-danger-foreground);
+}

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 @@
+export { tooltipVariants } from './tooltip.styles.js';

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]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            trigger?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            trigger?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    base: string;
+    trigger: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            trigger?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    base: string;
+    trigger: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    base: string;
+    trigger: string;
+}, undefined, unknown, unknown, undefined>>;
+export type TooltipVariants = VariantProps<typeof tooltipVariants>;
+//# sourceMappingURL=tooltip.styles.d.ts.map