@masaraxui/styles 1.0.0

package/dist/components/scroll-shadow/scroll-shadow.styles.d.ts

@@ -0,0 +1,70 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const scrollShadowVariants: import("tailwind-variants").TVReturnType<{
+    hideScrollBar: {
+        false: {};
+        true: {
+            base: string;
+        };
+    };
+    orientation: {
+        horizontal: {
+            base: string;
+        };
+        vertical: {
+            base: string;
+        };
+    };
+    variant: {
+        fade: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+}, undefined, {
+    hideScrollBar: {
+        false: {};
+        true: {
+            base: string;
+        };
+    };
+    orientation: {
+        horizontal: {
+            base: string;
+        };
+        vertical: {
+            base: string;
+        };
+    };
+    variant: {
+        fade: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+}, import("tailwind-variants").TVReturnType<{
+    hideScrollBar: {
+        false: {};
+        true: {
+            base: string;
+        };
+    };
+    orientation: {
+        horizontal: {
+            base: string;
+        };
+        vertical: {
+            base: string;
+        };
+    };
+    variant: {
+        fade: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+}, undefined, unknown, unknown, undefined>>;
+export type ScrollShadowVariants = VariantProps<typeof scrollShadowVariants>;
+//# sourceMappingURL=scroll-shadow.styles.d.ts.map

package/dist/components/scroll-shadow/scroll-shadow.styles.d.ts.map

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

package/dist/components/scroll-shadow/scroll-shadow.styles.js

@@ -0,0 +1,35 @@
+import { tv } from 'tailwind-variants';
+
+const scrollShadowVariants = tv({
+    defaultVariants: {
+        hideScrollBar: false,
+        orientation: "vertical",
+        variant: "fade",
+    },
+    slots: {
+        base: "scroll-shadow",
+    },
+    variants: {
+        hideScrollBar: {
+            false: {},
+            true: {
+                base: "scroll-shadow--hide-scrollbar",
+            },
+        },
+        orientation: {
+            horizontal: {
+                base: "scroll-shadow--horizontal",
+            },
+            vertical: {
+                base: "scroll-shadow--vertical",
+            },
+        },
+        variant: {
+            fade: {
+                base: "scroll-shadow--fade",
+            },
+        },
+    },
+});
+
+export { scrollShadowVariants };

package/dist/components/scroll-shadow.css

@@ -0,0 +1,77 @@
+/* Base scroll-shadow component */
+.scroll-shadow {
+  @apply relative;
+  --scroll-shadow-size: 40px;
+}
+
+/* Orientation: Vertical */
+.scroll-shadow--vertical {
+  @apply overflow-y-auto;
+}
+
+/* Orientation: Horizontal */
+.scroll-shadow--horizontal {
+  @apply overflow-x-auto;
+}
+
+/* Variant: Fade - Vertical */
+.scroll-shadow--fade.scroll-shadow--vertical {
+  &[data-top-scroll="true"] {
+    --scroll-linear-gradient: 0deg, #000 calc(100% - var(--scroll-shadow-size)), transparent;
+
+    mask-image: linear-gradient(var(--scroll-linear-gradient));
+    -webkit-mask-image: linear-gradient(var(--scroll-linear-gradient));
+  }
+
+  &[data-bottom-scroll="true"] {
+    --scroll-linear-gradient: 180deg, #000 calc(100% - var(--scroll-shadow-size)), transparent;
+
+    mask-image: linear-gradient(var(--scroll-linear-gradient));
+    -webkit-mask-image: linear-gradient(var(--scroll-linear-gradient));
+  }
+
+  &[data-top-bottom-scroll="true"] {
+    --scroll-linear-gradient:
+      #000, #000, transparent 0, #000 var(--scroll-shadow-size),
+      #000 calc(100% - var(--scroll-shadow-size)), transparent;
+
+    mask-image: linear-gradient(var(--scroll-linear-gradient));
+    -webkit-mask-image: linear-gradient(var(--scroll-linear-gradient));
+  }
+}
+
+/* Variant: Fade - Horizontal */
+.scroll-shadow--fade.scroll-shadow--horizontal {
+  &[data-left-scroll="true"] {
+    --scroll-linear-gradient: 270deg, #000 calc(100% - var(--scroll-shadow-size)), transparent;
+
+    mask-image: linear-gradient(var(--scroll-linear-gradient));
+    -webkit-mask-image: linear-gradient(var(--scroll-linear-gradient));
+  }
+
+  &[data-right-scroll="true"] {
+    --scroll-linear-gradient: 90deg, #000 calc(100% - var(--scroll-shadow-size)), transparent;
+
+    mask-image: linear-gradient(var(--scroll-linear-gradient));
+    -webkit-mask-image: linear-gradient(var(--scroll-linear-gradient));
+  }
+
+  &[data-left-right-scroll="true"] {
+    --scroll-linear-gradient:
+      to right, #000, #000, transparent 0, #000 var(--scroll-shadow-size),
+      #000 calc(100% - var(--scroll-shadow-size)), transparent;
+
+    mask-image: linear-gradient(var(--scroll-linear-gradient));
+    -webkit-mask-image: linear-gradient(var(--scroll-linear-gradient));
+  }
+}
+
+/* Hide scrollbar modifier */
+.scroll-shadow--hide-scrollbar {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+
+  &::-webkit-scrollbar {
+    @apply hidden;
+  }
+}

package/dist/components/search-field/index.d.ts

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

package/dist/components/search-field/index.d.ts.map

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

package/dist/components/search-field/index.js

@@ -0,0 +1 @@
+export { searchFieldVariants } from './search-field.styles.js';

package/dist/components/search-field/search-field.styles.d.ts

@@ -0,0 +1,70 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const searchFieldVariants: import("tailwind-variants").TVReturnType<{
+    fullWidth: {
+        false: {};
+        true: {
+            base: string;
+            group: string;
+        };
+    };
+    variant: {
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    clearButton: string;
+    group: string;
+    input: string;
+    searchIcon: string;
+}, undefined, {
+    fullWidth: {
+        false: {};
+        true: {
+            base: string;
+            group: string;
+        };
+    };
+    variant: {
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    clearButton: string;
+    group: string;
+    input: string;
+    searchIcon: string;
+}, import("tailwind-variants").TVReturnType<{
+    fullWidth: {
+        false: {};
+        true: {
+            base: string;
+            group: string;
+        };
+    };
+    variant: {
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    clearButton: string;
+    group: string;
+    input: string;
+    searchIcon: string;
+}, undefined, unknown, unknown, undefined>>;
+export type SearchFieldVariants = VariantProps<typeof searchFieldVariants>;
+//# sourceMappingURL=search-field.styles.d.ts.map

package/dist/components/search-field/search-field.styles.d.ts.map

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

package/dist/components/search-field/search-field.styles.js

@@ -0,0 +1,34 @@
+import { tv } from 'tailwind-variants';
+
+const searchFieldVariants = tv({
+    defaultVariants: {
+        fullWidth: false,
+        variant: "primary",
+    },
+    slots: {
+        base: "search-field",
+        clearButton: "search-field__clear-button",
+        group: "search-field__group",
+        input: "search-field__input",
+        searchIcon: "search-field__search-icon",
+    },
+    variants: {
+        fullWidth: {
+            false: {},
+            true: {
+                base: "search-field--full-width",
+                group: "search-field__group--full-width",
+            },
+        },
+        variant: {
+            primary: {
+                base: "search-field--primary",
+            },
+            secondary: {
+                base: "search-field--secondary",
+            },
+        },
+    },
+});
+
+export { searchFieldVariants };

package/dist/components/search-field.css

@@ -0,0 +1,156 @@
+/* Search field styles */
+.search-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;
+  }
+
+  &[data-empty="true"] {
+    [data-slot="search-field-clear-button"] {
+      @apply pointer-events-none opacity-0;
+    }
+  }
+}
+
+.search-field__group {
+  @apply relative inline-flex 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);
+
+  /**
+   * 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;
+  }
+
+  /* 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;
+  }
+}
+
+.search-field__input {
+  @apply flex-1 rounded-none border-0 bg-transparent px-3 py-2 text-base shadow-none outline-none sm:text-sm;
+
+  /* Hide browser default search clear button */
+  &::-webkit-search-cancel-button,
+  &::-webkit-search-decoration {
+    -webkit-appearance: none;
+    appearance: none;
+  }
+
+  /* Remove border radius on left side when search icon is present */
+  .search-field__group:has([data-slot="search-field-search-icon"]) & {
+    @apply rounded-l-none pl-2;
+  }
+
+  /* Remove border radius on right side when clear button is present */
+  .search-field__group:has([slot="clear"]) & {
+    @apply rounded-r-none pr-2;
+  }
+
+  /* Focus state - handled by group */
+  &:focus,
+  &:focus-visible {
+    @apply outline-none;
+  }
+}
+
+.search-field__search-icon {
+  @apply pointer-events-none shrink-0 text-field-placeholder;
+  @apply mr-0 ml-3 size-4;
+}
+
+.search-field__clear-button {
+  @apply mr-2 size-5 shrink-0;
+
+  /* Overrides close button default icon size from 16px to 12px */
+  [data-slot="close-button-icon"] {
+    @apply size-3;
+  }
+}
+
+/* Variant property definitions */
+.search-field--primary {
+  /* Default styles */
+}
+
+.search-field--secondary .search-field__group {
+  @apply shadow-none;
+  background-color: var(--search-field-group-bg);
+
+  --search-field-group-bg: var(--color-default);
+  --search-field-group-bg-hover: var(--color-default-hover);
+  --search-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(--search-field-group-bg-hover);
+    }
+  }
+
+  &:focus-within,
+  &[data-focus-within="true"] {
+    background-color: var(--search-field-group-bg-focus);
+  }
+
+  /* Invalid state */
+  &[data-invalid="true"] {
+    @apply status-invalid-field;
+    border-color: var(--color-field-border-invalid);
+    background-color: var(--search-field-group-bg-focus);
+  }
+
+  [data-slot="search-field-input"] {
+    @apply bg-transparent;
+  }
+}
+
+/* Full width modifier */
+.search-field--full-width {
+  @apply w-full;
+}
+
+.search-field__group--full-width {
+  @apply w-full;
+}

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

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

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

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

package/dist/components/select/index.js

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

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

@@ -0,0 +1,70 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const selectVariants: import("tailwind-variants").TVReturnType<{
+    fullWidth: {
+        false: {};
+        true: {
+            base: string;
+            trigger: string;
+        };
+    };
+    variant: {
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    indicator: string;
+    popover: string;
+    trigger: string;
+    value: string;
+}, undefined, {
+    fullWidth: {
+        false: {};
+        true: {
+            base: string;
+            trigger: string;
+        };
+    };
+    variant: {
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    indicator: string;
+    popover: string;
+    trigger: string;
+    value: string;
+}, import("tailwind-variants").TVReturnType<{
+    fullWidth: {
+        false: {};
+        true: {
+            base: string;
+            trigger: string;
+        };
+    };
+    variant: {
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    indicator: string;
+    popover: string;
+    trigger: string;
+    value: string;
+}, undefined, unknown, unknown, undefined>>;
+export type SelectVariants = VariantProps<typeof selectVariants>;
+//# sourceMappingURL=select.styles.d.ts.map

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

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

package/dist/components/select/select.styles.js

@@ -0,0 +1,34 @@
+import { tv } from 'tailwind-variants';
+
+const selectVariants = tv({
+    defaultVariants: {
+        fullWidth: false,
+        variant: "primary",
+    },
+    slots: {
+        base: "select",
+        indicator: "select__indicator",
+        popover: "select__popover",
+        trigger: "select__trigger",
+        value: "select__value",
+    },
+    variants: {
+        fullWidth: {
+            false: {},
+            true: {
+                base: "select--full-width",
+                trigger: "select__trigger--full-width",
+            },
+        },
+        variant: {
+            primary: {
+                base: "select--primary",
+            },
+            secondary: {
+                base: "select--secondary",
+            },
+        },
+    },
+});
+
+export { selectVariants };