@arobo/styles 1.0.1 → 1.1.1

package/dist/components/alert-dialog.css

@@ -0,0 +1,311 @@
+/* -------------------------------------------------------------------------------------------------
+ * AlertDialog Component Styles
+ * Block: alert-dialog
+ * -----------------------------------------------------------------------------------------------*/
+
+/**
+ * Element: trigger - the element that opens the modal
+ */
+.alert-dialog__trigger {
+  @apply 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 dialog
+ */
+.alert-dialog__backdrop {
+  @apply fixed inset-0 z-50;
+  @apply flex flex-row items-center justify-center;
+  @apply h-(--visual-viewport-height) w-full;
+  @apply will-change-[opacity];
+
+  /* Entering animation */
+  &[data-entering="true"] {
+    @apply animate-in duration-150 ease-out fade-in-0;
+  }
+
+  /* Exiting animation */
+  &[data-exiting="true"] {
+    @apply animate-out duration-100 ease-out fade-out-0;
+  }
+
+  /**
+   * Reduce Animation
+   * CRITICAL: motion-reduce must be AFTER animate for correct override specificity
+   */
+  &[data-exiting="true"],
+  &[data-entering="true"] {
+    @apply motion-reduce:animate-none;
+  }
+}
+
+/**
+ * Modifier: backdrop--transparent
+ */
+.alert-dialog__backdrop--transparent {
+  @apply bg-transparent;
+}
+
+/**
+ * Modifier: backdrop--opaque
+ */
+.alert-dialog__backdrop--opaque {
+  @apply bg-black/50 dark:bg-black/60;
+}
+
+/**
+ * Modifier: backdrop--blur
+ */
+.alert-dialog__backdrop--blur {
+  @apply bg-black/50 backdrop-blur-md dark:bg-black/60;
+}
+
+/**
+ * Element: container - the positioning wrapper for the modal
+ */
+.alert-dialog__container {
+  @apply flex flex-col items-center;
+  @apply h-(--visual-viewport-height) w-full min-w-0 flex-1;
+  @apply p-4;
+  @apply sm:w-fit sm:p-10;
+  @apply will-change-[opacity,transform];
+  @apply pointer-events-none;
+
+  /* Entering animation */
+  &[data-entering="true"] {
+    @apply animate-in duration-250 ease-out-quad fade-in-0 zoom-in-105;
+
+    &[data-placement="auto"] {
+      @apply slide-in-from-bottom-1;
+      @apply sm:slide-in-from-bottom-0;
+    }
+
+    &[data-placement="top"] {
+      @apply slide-in-from-top-1;
+    }
+
+    &[data-placement="center"] {
+      @apply slide-in-from-top-0;
+    }
+
+    &[data-placement="bottom"] {
+      @apply slide-in-from-bottom-1;
+    }
+  }
+
+  /* Exiting animation */
+  &[data-exiting="true"] {
+    @apply animate-out duration-100 ease-out-quad fade-out-0 zoom-out-95;
+  }
+
+  /**
+   * Reduce Animation
+   * CRITICAL: motion-reduce must be AFTER animate for correct override specificity
+   */
+  &[data-exiting="true"],
+  &[data-entering="true"] {
+    @apply motion-reduce:animate-none;
+  }
+}
+
+/**
+ * Element: dialog - the content container for the modal
+ */
+.alert-dialog__dialog {
+  @apply relative;
+  @apply flex w-full flex-col;
+  @apply rounded-3xl bg-overlay shadow-overlay outline-none;
+  @apply p-6;
+  @apply overflow-hidden;
+  @apply pointer-events-auto;
+
+  &[data-placement="auto"] {
+    @apply mt-auto;
+    @apply sm:my-auto;
+  }
+
+  &[data-placement="center"] {
+    @apply my-auto;
+  }
+
+  &[data-placement="bottom"] {
+    @apply mt-auto;
+  }
+
+  &[data-placement="top"] {
+    @apply mt-0;
+  }
+}
+
+/**
+ * Modifier: dialog--xs
+ */
+.alert-dialog__dialog--xs {
+  @apply max-w-xs;
+}
+
+/**
+ * Modifier: dialog--sm
+ */
+.alert-dialog__dialog--sm {
+  @apply max-w-sm;
+}
+
+/**
+ * Modifier: dialog--md
+ */
+.alert-dialog__dialog--md {
+  @apply max-w-md;
+}
+
+/**
+ * Modifier: dialog--lg
+ */
+.alert-dialog__dialog--lg {
+  @apply max-w-lg;
+}
+
+/**
+ * Modifier: dialog--cover
+ */
+.alert-dialog__dialog--cover {
+  @apply h-full min-h-full w-full;
+}
+
+/**
+ * Element: header - the top section with the title
+ */
+.alert-dialog__header {
+  @apply flex flex-col gap-3;
+  @apply mb-0;
+
+  /* When header contains icon, use flex-col layout with gap */
+  & > .modal__icon {
+    @apply mb-0;
+  }
+}
+
+/**
+ * Element: heading - the main title text
+ */
+.alert-dialog__heading {
+  @apply align-middle;
+  @apply text-base font-medium text-foreground;
+}
+
+/**
+ * Element: icon - the optional icon indicator
+ */
+.alert-dialog__icon {
+  @apply flex items-center justify-center;
+  @apply size-10 shrink-0;
+  @apply rounded-full select-none;
+
+  [data-slot="alert-dialog-default-icon"] {
+    @apply box-content size-5;
+  }
+}
+
+/**
+ * Modifier: icon--default
+ */
+.alert-dialog__icon--default {
+  @apply bg-default text-foreground;
+}
+
+/**
+ * Modifier: icon--accent
+ */
+.alert-dialog__icon--accent {
+  @apply bg-accent-soft text-accent-soft-foreground;
+}
+
+/**
+ * Modifier: icon--success
+ */
+.alert-dialog__icon--success {
+  @apply bg-success-soft text-success-soft-foreground;
+}
+
+/**
+ * Modifier: icon--warning
+ */
+.alert-dialog__icon--warning {
+  @apply bg-warning-soft text-warning-soft-foreground;
+}
+
+/**
+ * Modifier: icon--danger
+ */
+.alert-dialog__icon--danger {
+  @apply bg-danger-soft text-danger-soft-foreground;
+}
+
+/**
+ * Element: body - the main content area
+ */
+.alert-dialog__body {
+  @apply min-h-0 flex-1;
+  @apply text-sm leading-[1.43] text-muted;
+  @apply my-0;
+  @apply overflow-y-auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+/**
+ * Element: footer - the bottom action section
+ */
+.alert-dialog__footer {
+  @apply flex flex-row items-center justify-end gap-2;
+  @apply mt-0;
+}
+
+/**
+ * Element: close-trigger - the optional x icon button to close the modal
+ */
+.alert-dialog__close-trigger {
+  @apply absolute top-4 right-4;
+}
+
+/**
+ * Elements Spacing
+ */
+.alert-dialog__header + .alert-dialog__body {
+  @apply mt-2;
+}
+
+.alert-dialog__header + .alert-dialog__footer {
+  @apply mt-5;
+}
+
+.alert-dialog__body + .alert-dialog__footer {
+  @apply mt-5;
+}

package/dist/components/alert.css

@@ -0,0 +1,68 @@
+/* Alert component styles */
+
+/* Base alert styles */
+.alert {
+  @apply flex w-full flex-row items-start justify-start gap-4 rounded-3xl bg-surface px-4 py-3 shadow-surface;
+}
+
+/* Alert elements */
+.alert__content {
+  @apply flex h-full grow flex-col items-start;
+}
+
+.alert__indicator {
+  @apply flex items-center justify-center p-1 select-none;
+
+  [data-slot="alert-default-icon"] {
+    @apply box-content size-4;
+  }
+}
+
+.alert__title {
+  @apply text-sm leading-6 font-medium;
+}
+
+.alert__description {
+  @apply text-sm text-muted;
+}
+
+/* Variant modifiers */
+.alert--default .alert__indicator {
+  @apply text-foreground;
+}
+
+.alert--default .alert__title {
+  @apply text-foreground;
+}
+
+.alert--accent .alert__indicator {
+  @apply text-accent;
+}
+
+.alert--accent .alert__title {
+  @apply text-accent;
+}
+
+.alert--success .alert__indicator {
+  @apply text-success;
+}
+
+.alert--success .alert__title {
+  @apply text-success;
+}
+
+.alert--warning .alert__indicator {
+  @apply text-warning;
+}
+
+.alert--warning .alert__title {
+  @apply text-warning;
+}
+
+.alert--danger .alert__indicator {
+  @apply text-danger;
+}
+
+.alert--danger .alert__title {
+  @apply text-danger;
+}

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

@@ -0,0 +1,121 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const avatarVariants: import("tailwind-variants").TVReturnType<{
+    color: {
+        accent: {
+            fallback: string;
+        };
+        danger: {
+            fallback: string;
+        };
+        default: {
+            fallback: string;
+        };
+        success: {
+            fallback: string;
+        };
+        warning: {
+            fallback: string;
+        };
+    };
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+    };
+    variant: {
+        default: {};
+        soft: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    fallback: string;
+    image: string;
+}, undefined, {
+    color: {
+        accent: {
+            fallback: string;
+        };
+        danger: {
+            fallback: string;
+        };
+        default: {
+            fallback: string;
+        };
+        success: {
+            fallback: string;
+        };
+        warning: {
+            fallback: string;
+        };
+    };
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+    };
+    variant: {
+        default: {};
+        soft: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    fallback: string;
+    image: string;
+}, import("tailwind-variants").TVReturnType<{
+    color: {
+        accent: {
+            fallback: string;
+        };
+        danger: {
+            fallback: string;
+        };
+        default: {
+            fallback: string;
+        };
+        success: {
+            fallback: string;
+        };
+        warning: {
+            fallback: string;
+        };
+    };
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+    };
+    variant: {
+        default: {};
+        soft: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    fallback: string;
+    image: string;
+}, undefined, unknown, unknown, undefined>>;
+export type AvatarVariants = VariantProps<typeof avatarVariants>;
+//# sourceMappingURL=avatar.styles.d.ts.map

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

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

package/dist/components/avatar/avatar.styles.js

@@ -0,0 +1,51 @@
+import { tv } from 'tailwind-variants';
+
+const avatarVariants = tv({
+    defaultVariants: {
+        color: "default",
+        size: "md",
+    },
+    slots: {
+        base: "avatar",
+        fallback: "avatar__fallback",
+        image: "avatar__image",
+    },
+    variants: {
+        color: {
+            accent: {
+                fallback: "avatar__fallback--accent",
+            },
+            danger: {
+                fallback: "avatar__fallback--danger",
+            },
+            default: {
+                fallback: "avatar__fallback--default",
+            },
+            success: {
+                fallback: "avatar__fallback--success",
+            },
+            warning: {
+                fallback: "avatar__fallback--warning",
+            },
+        },
+        size: {
+            lg: {
+                base: "avatar--lg",
+            },
+            md: {
+                base: "avatar--md",
+            },
+            sm: {
+                base: "avatar--sm",
+            },
+        },
+        variant: {
+            default: {},
+            soft: {
+                base: "avatar--soft",
+            },
+        },
+    },
+});
+
+export { avatarVariants };

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

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

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

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

package/dist/components/avatar/index.js

@@ -0,0 +1 @@
+export { avatarVariants } from './avatar.styles.js';

package/dist/components/avatar.css

@@ -0,0 +1,78 @@
+/* Base avatar styles */
+.avatar {
+  @apply relative flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-full bg-default;
+}
+
+/* Avatar fallback element */
+.avatar__fallback {
+  @apply flex size-full items-center justify-center rounded-full bg-default text-sm font-medium;
+}
+
+/* Avatar image element */
+.avatar__image {
+  @apply absolute inset-0 aspect-square size-full;
+
+  /**
+   * Transitions
+   */
+  @apply transition-opacity duration-250 motion-reduce:transition-none;
+}
+
+/* Size modifiers */
+.avatar--sm {
+  @apply size-8;
+}
+
+.avatar--md {
+  /* No styles as this is the default size */
+}
+
+.avatar--lg {
+  @apply size-12;
+
+  .avatar__fallback {
+    @apply text-base;
+  }
+}
+
+/* Color modifiers for fallback */
+.avatar__fallback--accent {
+  @apply text-accent;
+}
+
+.avatar__fallback--default {
+  @apply text-default-foreground;
+}
+
+.avatar__fallback--success {
+  @apply text-success;
+}
+
+.avatar__fallback--warning {
+  @apply text-warning;
+}
+
+.avatar__fallback--danger {
+  @apply text-danger;
+}
+
+/* Variant modifiers */
+.avatar--soft {
+  @apply bg-transparent;
+}
+
+.avatar--soft .avatar__fallback--accent {
+  @apply bg-accent-soft text-accent-soft-foreground;
+}
+
+.avatar--soft .avatar__fallback--success {
+  @apply bg-success-soft text-success-soft-foreground;
+}
+
+.avatar--soft .avatar__fallback--warning {
+  @apply bg-warning-soft text-warning-soft-foreground;
+}
+
+.avatar--soft .avatar__fallback--danger {
+  @apply bg-danger-soft text-danger-soft-foreground;
+}

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

@@ -0,0 +1,46 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const breadcrumbsVariants: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            item?: import("tailwind-variants").ClassValue;
+            separator?: import("tailwind-variants").ClassValue;
+            link?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            item?: import("tailwind-variants").ClassValue;
+            separator?: import("tailwind-variants").ClassValue;
+            link?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    base: string;
+    item: string;
+    link: string;
+    separator: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            item?: import("tailwind-variants").ClassValue;
+            separator?: import("tailwind-variants").ClassValue;
+            link?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    base: string;
+    item: string;
+    link: string;
+    separator: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    base: string;
+    item: string;
+    link: string;
+    separator: string;
+}, undefined, unknown, unknown, undefined>>;
+export type BreadcrumbsVariants = VariantProps<typeof breadcrumbsVariants>;
+//# sourceMappingURL=breadcrumbs.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumbs.styles.d.ts","sourceRoot":"","sources":["../../../src/components/breadcrumbs/breadcrumbs.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,mBAAmB,CAAC;AAIpD,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAO9B,CAAC;AAEH,MAAM,MAAM,mBAAmB,GAAG,YAAY,CAAC,OAAO,mBAAmB,CAAC,CAAC"}

package/dist/components/breadcrumbs/breadcrumbs.styles.js

@@ -0,0 +1,12 @@
+import { tv } from 'tailwind-variants';
+
+const breadcrumbsVariants = tv({
+    slots: {
+        base: "breadcrumbs",
+        item: "breadcrumbs__item",
+        link: "breadcrumbs__link",
+        separator: "breadcrumbs__separator",
+    },
+});
+
+export { breadcrumbsVariants };

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

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

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

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