@masaraxui/styles 1.0.0

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

@@ -0,0 +1,178 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const badgeVariants: import("tailwind-variants").TVReturnType<{
+    color: {
+        accent: {
+            base: string;
+        };
+        danger: {
+            base: string;
+        };
+        default: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+    };
+    placement: {
+        "bottom-left": {
+            base: string;
+        };
+        "bottom-right": {
+            base: string;
+        };
+        "top-left": {
+            base: string;
+        };
+        "top-right": {
+            base: string;
+        };
+    };
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+    };
+    variant: {
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+        soft: {
+            base: string;
+        };
+    };
+}, {
+    anchor: string;
+    base: string;
+    label: string;
+}, undefined, {
+    color: {
+        accent: {
+            base: string;
+        };
+        danger: {
+            base: string;
+        };
+        default: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+    };
+    placement: {
+        "bottom-left": {
+            base: string;
+        };
+        "bottom-right": {
+            base: string;
+        };
+        "top-left": {
+            base: string;
+        };
+        "top-right": {
+            base: string;
+        };
+    };
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+    };
+    variant: {
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+        soft: {
+            base: string;
+        };
+    };
+}, {
+    anchor: string;
+    base: string;
+    label: string;
+}, import("tailwind-variants").TVReturnType<{
+    color: {
+        accent: {
+            base: string;
+        };
+        danger: {
+            base: string;
+        };
+        default: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+    };
+    placement: {
+        "bottom-left": {
+            base: string;
+        };
+        "bottom-right": {
+            base: string;
+        };
+        "top-left": {
+            base: string;
+        };
+        "top-right": {
+            base: string;
+        };
+    };
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+    };
+    variant: {
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+        soft: {
+            base: string;
+        };
+    };
+}, {
+    anchor: string;
+    base: string;
+    label: string;
+}, undefined, unknown, unknown, undefined>>;
+export type BadgeVariants = VariantProps<typeof badgeVariants>;
+//# sourceMappingURL=badge.styles.d.ts.map

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

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

package/dist/components/badge/badge.styles.js

@@ -0,0 +1,72 @@
+import { tv } from 'tailwind-variants';
+
+const badgeVariants = tv({
+    defaultVariants: {
+        color: "default",
+        placement: "top-right",
+        size: "md",
+        variant: "primary",
+    },
+    slots: {
+        anchor: "badge-anchor",
+        base: "badge",
+        label: "badge__label",
+    },
+    variants: {
+        color: {
+            accent: {
+                base: "badge--accent",
+            },
+            danger: {
+                base: "badge--danger",
+            },
+            default: {
+                base: "badge--default",
+            },
+            success: {
+                base: "badge--success",
+            },
+            warning: {
+                base: "badge--warning",
+            },
+        },
+        placement: {
+            "bottom-left": {
+                base: "badge--bottom-left",
+            },
+            "bottom-right": {
+                base: "badge--bottom-right",
+            },
+            "top-left": {
+                base: "badge--top-left",
+            },
+            "top-right": {
+                base: "badge--top-right",
+            },
+        },
+        size: {
+            lg: {
+                base: "badge--lg",
+            },
+            md: {
+                base: "badge--md",
+            },
+            sm: {
+                base: "badge--sm",
+            },
+        },
+        variant: {
+            primary: {
+                base: "badge--primary",
+            },
+            secondary: {
+                base: "badge--secondary",
+            },
+            soft: {
+                base: "badge--soft",
+            },
+        },
+    },
+});
+
+export { badgeVariants };

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

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

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

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

package/dist/components/badge/index.js

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

package/dist/components/badge.css

@@ -0,0 +1,166 @@
+/* ==========================================================================
+   Badge - Small informational badges for displaying labels, statuses, and categories.
+   ========================================================================== */
+
+/* Base styles */
+.badge {
+  @apply inline-flex shrink-0 items-center justify-center gap-0.5 font-medium;
+
+  /* Default size (matches --md) */
+  @apply min-h-7 min-w-7 rounded-3xl text-xs leading-[1.34];
+
+  /* Default tokens */
+  --badge-bg: var(--color-default);
+  --badge-fg: var(--color-default-foreground);
+  --badge-border: var(--color-background);
+
+  background-color: var(--badge-bg);
+  color: var(--badge-fg);
+  border: 1px solid var(--badge-border);
+}
+
+.badge__label {
+  @apply px-0.5;
+}
+
+.badge-anchor {
+  @apply relative inline-flex shrink-0;
+}
+
+/* ==========================================================================
+   Size variants
+   ========================================================================== */
+
+.badge--lg {
+  @apply min-h-8 min-w-8 rounded-2xl text-sm leading-[1.43];
+}
+
+.badge--md {
+  /* No styles as this is the default size */
+}
+
+.badge--sm {
+  @apply min-h-4 min-w-4 rounded-xl text-[10px] leading-[1.34];
+}
+
+/* ==========================================================================
+   Color variants - set foreground color
+   ========================================================================== */
+
+.badge--accent {
+  --badge-fg: var(--color-accent);
+}
+
+.badge--default {
+  --badge-fg: var(--color-default-foreground);
+}
+
+.badge--success {
+  --badge-fg: var(--color-success);
+}
+
+.badge--warning {
+  --badge-fg: var(--color-warning);
+}
+
+.badge--danger {
+  --badge-fg: var(--color-danger);
+}
+
+/* ==========================================================================
+   Variant styles
+   ========================================================================== */
+
+.badge--primary {
+  /* Solid background - compound variants below handle bg/fg per color */
+}
+
+.badge--secondary {
+  /* Default background with colored text - base behavior */
+}
+
+.badge--soft {
+  /* Soft/muted background - compound variants below handle bg/fg per color */
+}
+
+/* ==========================================================================
+   Placement variants
+   ========================================================================== */
+
+.badge--top-right {
+  @apply absolute top-0 right-0;
+  transform: translate(25%, -25%);
+}
+
+.badge--top-left {
+  @apply absolute top-0 left-0;
+  transform: translate(-25%, -25%);
+}
+
+.badge--bottom-right {
+  @apply absolute right-0 bottom-0;
+  transform: translate(25%, 25%);
+}
+
+.badge--bottom-left {
+  @apply absolute bottom-0 left-0;
+  transform: translate(-25%, 25%);
+}
+
+/* ==========================================================================
+   Compound variants - Primary (solid background)
+   ========================================================================== */
+
+.badge--primary.badge--accent {
+  --badge-bg: var(--color-accent);
+  --badge-fg: var(--color-accent-foreground);
+}
+
+.badge--primary.badge--default {
+  --badge-bg: var(--color-default);
+  --badge-fg: var(--color-default-foreground);
+}
+
+.badge--primary.badge--success {
+  --badge-bg: var(--color-success);
+  --badge-fg: var(--color-success-foreground);
+}
+
+.badge--primary.badge--warning {
+  --badge-bg: var(--color-warning);
+  --badge-fg: var(--color-warning-foreground);
+}
+
+.badge--primary.badge--danger {
+  --badge-bg: var(--color-danger);
+  --badge-fg: var(--color-danger-foreground);
+}
+
+/* ==========================================================================
+   Compound variants - Soft (muted background)
+   ========================================================================== */
+
+.badge--soft.badge--accent {
+  --badge-bg: var(--color-accent-soft);
+  --badge-fg: var(--color-accent-soft-foreground);
+}
+
+.badge--soft.badge--default {
+  --badge-bg: var(--color-default);
+  --badge-fg: var(--color-default-foreground);
+}
+
+.badge--soft.badge--success {
+  --badge-bg: var(--color-success-soft);
+  --badge-fg: var(--color-success-soft-foreground);
+}
+
+.badge--soft.badge--warning {
+  --badge-bg: var(--color-warning-soft);
+  --badge-fg: var(--color-warning-soft-foreground);
+}
+
+.badge--soft.badge--danger {
+  --badge-bg: var(--color-danger-soft);
+  --badge-fg: var(--color-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;
+            link?: import("tailwind-variants").ClassValue;
+            separator?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            item?: import("tailwind-variants").ClassValue;
+            link?: import("tailwind-variants").ClassValue;
+            separator?: 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;
+            link?: import("tailwind-variants").ClassValue;
+            separator?: 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"}

package/dist/components/breadcrumbs/index.js

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

package/dist/components/breadcrumbs.css

@@ -0,0 +1,28 @@
+/* Base breadcrumbs container */
+.breadcrumbs {
+  @apply flex items-center;
+
+  /* Breadcrumb link */
+  .breadcrumbs__link {
+    @apply relative px-0.5 text-sm leading-5 font-medium text-muted no-underline opacity-100;
+
+    &:hover,
+    &[data-hovered="true"] {
+      @apply underline;
+    }
+
+    &[data-current="true"] {
+      @apply text-link opacity-100;
+    }
+  }
+
+  /* Breadcrumb item wrapper */
+  .breadcrumbs__item {
+    @apply flex shrink-0 items-center justify-center gap-0.5 px-0.5;
+  }
+
+  /* Separator icon */
+  .breadcrumbs__separator {
+    @apply size-3 text-muted rtl:rotate-180;
+  }
+}

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

@@ -0,0 +1,70 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const buttonVariants: 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, "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, "button", unknown, unknown, undefined>>;
+export type ButtonVariants = VariantProps<typeof buttonVariants>;
+//# sourceMappingURL=button.styles.d.ts.map

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

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

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

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

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

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

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

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

package/dist/components/button/index.js

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