@masaraxui/styles 1.0.0

package/dist/components/number-field.css

@@ -0,0 +1,190 @@
+/* Number field styles */
+.number-field {
+  @apply flex flex-col gap-1;
+
+  &[data-invalid="true"],
+  &[aria-invalid="true"] {
+    [data-slot="description"] {
+      @apply hidden;
+    }
+  }
+
+  [data-slot="label"] {
+    @apply w-fit;
+  }
+
+  [data-slot="description"] {
+    @apply px-1;
+  }
+}
+
+.number-field__group {
+  @apply grid h-9 items-center overflow-hidden rounded-field border bg-field text-sm text-field-foreground shadow-field outline-none;
+  border-width: var(--border-width-field);
+  border-color: var(--color-field-border);
+  grid-template-columns: 40px 1fr 40px;
+
+  /**
+   * 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;
+
+  /* Hover state */
+  @media (hover: hover) {
+    &:hover:not(:focus-within),
+    &[data-hovered="true"]:not([data-focus-within="true"]) {
+      @apply bg-field-hover;
+      border-color: var(--color-field-border-hover);
+    }
+  }
+
+  /* Focus within state */
+  &[data-focus-within="true"],
+  &:focus-within {
+    @apply status-focused-field;
+    border-color: var(--color-field-border-focus);
+    background-color: var(--color-field-focus);
+  }
+
+  /* Invalid state */
+  &[data-invalid="true"] {
+    @apply status-invalid-field;
+    background-color: var(--color-field-focus);
+    border-color: var(--color-field-border-invalid);
+  }
+
+  /* Disabled state */
+  &[data-disabled="true"],
+  &[aria-disabled="true"] {
+    @apply status-disabled;
+  }
+}
+
+.number-field__input {
+  @apply min-w-0 rounded-none border-0 bg-transparent px-3 py-2 text-base tabular-nums shadow-none outline-none sm:text-sm;
+
+  /* Remove border radius on left side when decrement button is present */
+  .number-field__group:has([slot="decrement"]) & {
+    @apply rounded-l-none;
+  }
+
+  /* Remove border radius on right side when increment button is present */
+  .number-field__group:has([slot="increment"]) & {
+    @apply rounded-r-none;
+  }
+
+  /* Focus state - handled by group */
+  &:focus,
+  &:focus-visible {
+    @apply outline-none;
+  }
+}
+
+.number-field__increment-button,
+.number-field__decrement-button {
+  @apply flex h-full w-10 items-center justify-center rounded-none bg-transparent text-field-foreground outline-none;
+  border-width: var(--border-width-field);
+  border-color: var(--color-field-border);
+  border-style: solid;
+
+  /**
+   * 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);
+  @apply motion-reduce:transition-none;
+
+  /* Cursor */
+  cursor: var(--cursor-interactive);
+
+  /* Hover state */
+  &:hover,
+  &[data-hovered="true"] {
+  }
+
+  /* Focus visible state */
+  &:focus-visible:not(:focus),
+  &[data-focus-visible="true"] {
+  }
+
+  /* Pressed state */
+  &:active,
+  &[data-pressed="true"] {
+    @apply bg-field-foreground/10;
+    transform: scale(0.97);
+  }
+
+  /* Disabled state */
+  &:disabled,
+  &[data-disabled="true"],
+  &[aria-disabled="true"] {
+    @apply status-disabled;
+  }
+
+  /* Icon styling */
+  [data-slot="number-field-increment-button-icon"],
+  [data-slot="number-field-decrement-button-icon"] {
+    @apply size-4;
+  }
+}
+
+.number-field__increment-button {
+  @apply rounded-l-none rounded-r-field border-l border-field-placeholder/15;
+}
+
+.number-field__decrement-button {
+  @apply rounded-l-field rounded-r-none border-r border-field-placeholder/15;
+}
+
+/* Variant property definitions */
+.number-field--primary {
+  /* Default styles */
+}
+
+.number-field--secondary .number-field__group {
+  @apply shadow-none;
+  background-color: var(--number-field-group-bg);
+
+  --number-field-group-bg: var(--color-default);
+  --number-field-group-bg-hover: var(--color-default-hover);
+  --number-field-group-bg-focus: var(--color-default);
+
+  @media (hover: hover) {
+    &:hover:not(:focus-within),
+    &[data-hovered="true"]:not([data-focus-within="true"]) {
+      background-color: var(--number-field-group-bg-hover);
+    }
+  }
+
+  &:focus-within,
+  &[data-focus-within="true"] {
+    background-color: var(--number-field-group-bg-focus);
+  }
+
+  /* Invalid state */
+  &[data-invalid="true"] {
+    @apply status-invalid-field;
+    border-color: var(--color-field-border-invalid);
+    background-color: var(--number-field-group-bg-focus);
+  }
+
+  [data-slot="number-field-input"] {
+    @apply bg-transparent;
+  }
+}
+
+/* Full width modifier */
+.number-field--full-width {
+  @apply w-full;
+}
+
+.number-field__group--full-width {
+  @apply w-full;
+}

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

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

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

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

package/dist/components/pagination/index.js

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

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

@@ -0,0 +1,61 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const paginationVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    content: string;
+    ellipsis: string;
+    item: string;
+    link: string;
+    summary: string;
+}, undefined, {
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    content: string;
+    ellipsis: string;
+    item: string;
+    link: string;
+    summary: string;
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    content: string;
+    ellipsis: string;
+    item: string;
+    link: string;
+    summary: string;
+}, undefined, unknown, unknown, undefined>>;
+export type PaginationVariants = VariantProps<typeof paginationVariants>;
+//# sourceMappingURL=pagination.styles.d.ts.map

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

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

package/dist/components/pagination/pagination.styles.js

@@ -0,0 +1,30 @@
+import { tv } from 'tailwind-variants';
+
+const paginationVariants = tv({
+    defaultVariants: {
+        size: "md",
+    },
+    slots: {
+        base: "pagination",
+        content: "pagination__content",
+        ellipsis: "pagination__ellipsis",
+        item: "pagination__item",
+        link: "pagination__link",
+        summary: "pagination__summary",
+    },
+    variants: {
+        size: {
+            lg: {
+                base: "pagination--lg",
+            },
+            md: {
+                base: "pagination--md",
+            },
+            sm: {
+                base: "pagination--sm",
+            },
+        },
+    },
+});
+
+export { paginationVariants };

package/dist/components/pagination.css

@@ -0,0 +1,147 @@
+/* ==========================================================================
+   Pagination - Page navigation component
+   ========================================================================== */
+
+/* Base styles */
+.pagination {
+  @apply flex w-full flex-col items-center justify-between gap-4 sm:flex-row;
+}
+
+/* Summary - left side info container */
+.pagination__summary {
+  @apply flex items-center gap-2 self-start text-sm text-muted sm:self-center;
+}
+
+/* Content - container for pagination items */
+.pagination__content {
+  @apply flex items-center gap-1 self-start sm:self-center;
+}
+
+/* Item - list item wrapper */
+.pagination__item {
+  @apply inline-flex;
+}
+
+/* Link - page number button (ghost button style) */
+.pagination__link {
+  @apply relative isolate inline-flex size-9 origin-center items-center justify-center rounded-3xl text-sm font-medium whitespace-nowrap outline-none select-none no-highlight md:size-8;
+
+  cursor: var(--cursor-interactive);
+
+  /**
+   * 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;
+
+  /* Ghost button tokens */
+  --pagination-link-bg: transparent;
+  --pagination-link-bg-hover: var(--color-default-hover);
+  --pagination-link-bg-pressed: var(--color-default-hover);
+  --pagination-link-fg: var(--color-default-foreground);
+
+  background-color: var(--pagination-link-bg);
+  color: var(--pagination-link-fg);
+
+  /* Focus state */
+  &:focus-visible,
+  &[data-focus-visible="true"] {
+    @apply status-focused;
+  }
+
+  /* Disabled state */
+  &:disabled,
+  &[aria-disabled="true"] {
+    @apply status-disabled;
+  }
+
+  /* Hover state */
+  @media (hover: hover) {
+    &:hover,
+    &[data-hovered="true"] {
+      background-color: var(--pagination-link-bg-hover);
+    }
+  }
+
+  /* Active / pressed */
+  &:active,
+  &[data-pressed="true"] {
+    background-color: var(--pagination-link-bg-pressed);
+    transform: scale(0.97);
+  }
+
+  /* Active page - tertiary button style */
+  &[data-active="true"] {
+    --pagination-link-bg: var(--color-default);
+    --pagination-link-bg-hover: var(--color-default-hover);
+    --pagination-link-bg-pressed: var(--color-default-hover);
+  }
+}
+
+/* Ellipsis */
+.pagination__ellipsis {
+  @apply inline-flex size-9 items-center justify-center text-sm text-muted select-none md:size-8;
+}
+
+/* Navigation buttons (Previous / Next) */
+.pagination__link--nav {
+  @apply w-auto gap-1.5 px-2.5;
+}
+
+/* ==========================================================================
+   Size variants
+   ========================================================================== */
+
+.pagination--sm {
+  .pagination__link {
+    @apply size-8 text-xs md:size-7;
+
+    &:active,
+    &[data-pressed="true"] {
+      transform: scale(0.98);
+    }
+  }
+
+  .pagination__link--nav {
+    @apply w-auto px-2;
+  }
+
+  .pagination__ellipsis {
+    @apply size-8 text-xs md:size-7;
+  }
+
+  .pagination__summary {
+    @apply text-xs;
+  }
+}
+
+.pagination--md {
+  /* No styles as this is the default size */
+}
+
+.pagination--lg {
+  .pagination__link {
+    @apply size-10 text-base md:size-9;
+
+    &:active,
+    &[data-pressed="true"] {
+      transform: scale(0.96);
+    }
+  }
+
+  .pagination__link--nav {
+    @apply w-auto px-3;
+  }
+
+  .pagination__ellipsis {
+    @apply size-10 text-base md:size-9;
+  }
+
+  .pagination__summary {
+    @apply text-base;
+  }
+}

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

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

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

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

package/dist/components/popover/index.js

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

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

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

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

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

package/dist/components/popover/popover.styles.js

@@ -0,0 +1,12 @@
+import { tv } from 'tailwind-variants';
+
+const popoverVariants = tv({
+    slots: {
+        base: "popover",
+        dialog: "popover__dialog",
+        heading: "popover__heading",
+        trigger: "popover__trigger",
+    },
+});
+
+export { popoverVariants };

package/dist/components/popover.css

@@ -0,0 +1,94 @@
+/* Popover component styles */
+
+/* Base popover styles */
+.popover {
+  @apply origin-(--trigger-anchor-point) rounded-3xl bg-overlay p-0 text-sm;
+  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 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;
+  }
+}
+
+/* Popover dialog */
+.popover__dialog {
+  @apply p-4 outline-none;
+}
+
+/* Popover heading */
+.popover__heading {
+  @apply font-medium;
+}
+
+/* Popover trigger */
+.popover__trigger {
+  /**
+   * 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;
+
+  cursor: var(--cursor-interactive);
+
+  /* Focus state */
+  &:focus-visible:not(:focus),
+  &[data-focus-visible="true"] {
+    @apply status-focused;
+  }
+
+  /* Disabled state */
+  &:disabled,
+  &[aria-disabled="true"] {
+    @apply status-disabled;
+  }
+}

package/dist/components/progress-bar/index.d.ts

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

package/dist/components/progress-bar/index.d.ts.map

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

package/dist/components/progress-bar/index.js

@@ -0,0 +1 @@
+export { progressBarVariants } from './progress-bar.styles.js';