@masaraxui/styles 1.0.0

package/dist/components/autocomplete/autocomplete.styles.js

@@ -0,0 +1,36 @@
+import { tv } from 'tailwind-variants';
+
+const autocompleteVariants = tv({
+    defaultVariants: {
+        fullWidth: false,
+        variant: "primary",
+    },
+    slots: {
+        base: "autocomplete",
+        clearButton: "autocomplete__clear-button",
+        filter: "autocomplete__filter",
+        indicator: "autocomplete__indicator",
+        popover: "autocomplete__popover",
+        trigger: "autocomplete__trigger",
+        value: "autocomplete__value",
+    },
+    variants: {
+        fullWidth: {
+            false: {},
+            true: {
+                base: "autocomplete--full-width",
+                trigger: "autocomplete__trigger--full-width",
+            },
+        },
+        variant: {
+            primary: {
+                base: "autocomplete--primary",
+            },
+            secondary: {
+                base: "autocomplete--secondary",
+            },
+        },
+    },
+});
+
+export { autocompleteVariants };

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

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

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

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

package/dist/components/autocomplete/index.js

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

package/dist/components/autocomplete.css

@@ -0,0 +1,263 @@
+/* Autocomplete styles */
+.autocomplete {
+  @apply flex flex-col gap-1;
+}
+
+.autocomplete__trigger {
+  @apply relative isolate inline-flex min-h-9 rounded-field border bg-field px-3 py-2 text-sm text-field-foreground shadow-field outline-none select-none no-highlight;
+
+  /**
+   * Transitions
+   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+   */
+  transition:
+    background-color 150ms var(--ease-smooth),
+    border-color 150ms var(--ease-smooth),
+    box-shadow 150ms var(--ease-out);
+  @apply motion-reduce:transition-none;
+
+  /* Cursor */
+  cursor: var(--cursor-interactive);
+
+  border-width: var(--border-width-field);
+  border-color: var(--color-field-border);
+
+  /* Add padding-right when indicator is present */
+  &:has(.autocomplete__indicator) {
+    @apply pr-7;
+  }
+
+  /* Hover state - exclude when clear button is hovered to prevent double hover effect */
+  @media (hover: hover) {
+    &:hover:not(:has(.autocomplete__clear-button:hover)),
+    &[data-hovered="true"]:not(:has(.autocomplete__clear-button:hover)) {
+      @apply bg-field-hover;
+      border-color: var(--color-field-border-hover);
+    }
+  }
+
+  /* Focus visible state */
+  &:focus-visible:not(:focus),
+  &[data-focus-visible="true"] {
+    @apply status-focused;
+    border-color: var(--color-field-border-focus);
+    background-color: var(--color-field-focus);
+  }
+
+  /* Focus state */
+  &:focus,
+  &[data-focus="true"] {
+  }
+
+  /* Invalid state */
+  .autocomplete[data-invalid="true"] &,
+  .autocomplete[aria-invalid="true"] & {
+    @apply status-invalid-field;
+    background-color: var(--color-field-focus);
+  }
+
+  /* Disabled state */
+  &:disabled,
+  &[data-disabled="true"],
+  &[aria-disabled="true"] {
+    @apply status-disabled;
+  }
+}
+
+/* Variant property definitions */
+.autocomplete--primary {
+  /* Default styles */
+}
+
+.autocomplete--secondary .autocomplete__trigger {
+  @apply shadow-none;
+  background-color: var(--autocomplete-trigger-bg);
+
+  --autocomplete-trigger-bg: var(--color-default);
+  --autocomplete-trigger-bg-hover: var(--color-default-hover);
+  --autocomplete-trigger-bg-focus: var(--color-default);
+
+  /* Exclude when clear button is hovered to prevent double hover effect */
+  @media (hover: hover) {
+    &:hover:not(:has(.autocomplete__clear-button:hover)),
+    &[data-hovered="true"]:not(:has(.autocomplete__clear-button:hover)) {
+      background-color: var(--autocomplete-trigger-bg-hover);
+    }
+  }
+
+  &:focus-visible:not(:focus),
+  &[data-focus-visible="true"] {
+    background-color: var(--autocomplete-trigger-bg-focus);
+  }
+
+  &:focus,
+  &[data-focus="true"] {
+  }
+}
+
+.autocomplete__value {
+  @apply flex-1 text-left text-base wrap-break-word text-current sm:text-sm;
+
+  &[data-placeholder="true"] {
+    @apply text-field-placeholder;
+  }
+
+  /* Removes the list-box-item indicator element from the autocomplete value*/
+  [data-slot="list-box-item-indicator"] {
+    @apply hidden;
+  }
+}
+
+.autocomplete__indicator {
+  @apply absolute inset-y-0 right-2 my-auto flex shrink-0 items-center justify-center text-field-placeholder transition duration-150;
+
+  /* Cursor */
+  cursor: var(--cursor-interactive);
+
+  &[data-open="true"] {
+    @apply rotate-180;
+  }
+
+  &[data-slot="autocomplete-default-indicator"] {
+    @apply size-4;
+  }
+}
+
+/* Similar to popover content styles */
+.autocomplete__popover {
+  @apply min-w-(--trigger-width) origin-(--trigger-anchor-point) scroll-py-1 overflow-y-auto overscroll-contain rounded-3xl bg-overlay p-0 pt-2 text-sm;
+  box-shadow: var(--shadow-overlay);
+
+  /* Focus state */
+  &:focus-visible:not(:focus),
+  &[data-focus-visible="true"] {
+    @apply outline-none;
+  }
+
+  /* Entering animations */
+  &[data-entering="true"] {
+    @apply animate-in duration-250 ease-out-fluid fade-in-0 zoom-in-95;
+
+    /* 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-out-quad zoom-out-95 fade-out;
+  }
+
+  &[data-exiting="true"],
+  &[data-entering="true"] {
+    @apply will-change-[opacity,transform];
+  }
+
+  /* Arrow styling */
+  & [data-slot="popover-overlay-arrow"] {
+    fill: var(--overlay);
+  }
+
+  /* Arrow rotation based on placement */
+  &[data-placement="bottom"] [data-slot="popover-overlay-arrow"] {
+    rotate: 180deg;
+  }
+
+  &[data-placement="left"] [data-slot="popover-overlay-arrow"] {
+    rotate: -90deg;
+  }
+
+  &[data-placement="right"] [data-slot="popover-overlay-arrow"] {
+    rotate: 90deg;
+  }
+
+  /* Listbox styles */
+  [data-slot="list-box"] {
+    @apply p-1.5 outline-none;
+  }
+
+  [data-slot="list-box-item"] {
+    @apply px-2.5;
+  }
+
+  /* As the popover closes fast in single-select mode, the default item indicator transition is not even visible - so we disable it only for single-select */
+  [data-slot="list-box"]:not([aria-multiselectable="true"]) [data-slot="list-box-item-indicator"],
+  [data-slot="list-box"]:not([aria-multiselectable="true"])
+    [data-slot="list-box-item-indicator"]
+    [data-slot="list-box-item-indicator--checkmark"] {
+    @apply transition-none;
+  }
+
+  /* Search Field styles */
+  [data-slot="search-field"] {
+    @apply px-3 py-1 outline-none;
+  }
+
+  /* Empty State */
+  [data-slot="empty-state"] {
+    @apply text-center text-sm text-overlay-foreground/60;
+  }
+}
+
+/* Full width modifier */
+.autocomplete--full-width {
+  @apply w-full;
+}
+
+.autocomplete__trigger--full-width {
+  @apply w-full;
+}
+
+/* Clear Button styles */
+.autocomplete__clear-button {
+  @apply relative isolate inline-flex h-6 w-6 shrink-0 origin-center items-center justify-center rounded-xl p-1 text-muted select-none no-highlight;
+  @apply mr-0 size-5 shrink-0 self-center bg-transparent;
+
+  /* Cursor */
+  cursor: var(--cursor-interactive);
+
+  @apply transform-gpu;
+
+  /* Transition only when visible - disappears immediately when cleared */
+  &:not([data-empty="true"]) {
+    transition: opacity 150ms var(--ease-smooth);
+    @apply motion-reduce:transition-none;
+  }
+
+  &[data-empty="true"] {
+    @apply pointer-events-none opacity-0;
+  }
+
+  [data-slot="autocomplete-clear-button-icon"] {
+    @apply size-3.5;
+  }
+
+  &:active,
+  &[data-pressed="true"] {
+  }
+
+  @media (hover: hover) {
+    &:hover,
+    &[data-hovered="true"] {
+      @apply bg-default-hover;
+    }
+  }
+
+  &:active,
+  &[data-pressed="true"] {
+    transform: scale(0.93);
+  }
+}

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 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;
+}