@ropav/styles 0.3.0

package/dist/components/textarea.css

@@ -0,0 +1,94 @@
+/* use textarea instead of text-area to avoid conflict with Tailwind `text-` prefix */
+.textarea {
+  @apply rounded-field border bg-field px-3 py-2 text-base text-field-foreground shadow-field outline-none placeholder:text-field-placeholder sm:text-sm;
+
+  min-height: 38px;
+
+  border-width: var(--border-width-field);
+  border-color: var(--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;
+
+  @media (hover: hover) {
+    &:hover:not(:focus):not(:focus-visible),
+    &[data-hovered="true"]:not([data-focused="true"]):not([data-focus-visible="true"]) {
+      @apply bg-field-hover;
+      border-color: var(--field-border-hover);
+    }
+  }
+
+  /* Focus state */
+  &:focus,
+  &[data-focused="true"] {
+    @apply status-focused-field;
+    border-color: var(--field-border-focus);
+    background-color: var(--field-focus);
+  }
+
+  /* Focus visible state */
+  &:focus-visible:not(:focus),
+  &[data-focus-visible="true"] {
+  }
+
+  &[data-invalid="true"] {
+    @apply status-invalid-field;
+    background-color: var(--field-focus);
+  }
+
+  /* Disabled state */
+  &:disabled,
+  &[data-disabled="true"],
+  &[aria-disabled="true"] {
+    @apply status-disabled;
+  }
+}
+
+/* Variant property definitions */
+.textarea--primary {
+  /* Default styles */
+}
+
+.textarea--secondary {
+  @apply shadow-none;
+  background-color: var(--textarea-bg);
+
+  --textarea-bg: var(--default);
+  --textarea-bg-hover: var(--default-hover);
+  --textarea-bg-focus: var(--default);
+
+  @media (hover: hover) {
+    &:hover:not(:focus):not(:focus-visible),
+    &[data-hovered="true"]:not([data-focused="true"]):not([data-focus-visible="true"]) {
+      background-color: var(--textarea-bg-hover);
+    }
+  }
+
+  &:focus,
+  &[data-focused="true"] {
+    background-color: var(--textarea-bg-focus);
+  }
+
+  /* Focus visible state */
+  &:focus-visible:not(:focus),
+  &[data-focus-visible="true"] {
+  }
+
+  /* Invalid state */
+  &[data-invalid="true"] {
+    @apply status-invalid-field;
+    background-color: var(--textarea-bg-focus);
+  }
+}
+
+/* Full width modifier */
+.textarea--full-width {
+  @apply w-full;
+}

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

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

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

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

package/dist/components/textfield/index.js

@@ -0,0 +1,2 @@
+import { textFieldVariants } from "./textfield.styles.js";
+export { textFieldVariants };

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

@@ -0,0 +1,19 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const textFieldVariants: import("tailwind-variants").TVReturnType<{
+    fullWidth: {
+        false: "";
+        true: "textfield--full-width";
+    };
+}, undefined, "textfield", {
+    fullWidth: {
+        false: "";
+        true: "textfield--full-width";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    fullWidth: {
+        false: "";
+        true: "textfield--full-width";
+    };
+}, undefined>>;
+export type TextFieldVariants = VariantProps<typeof textFieldVariants>;
+//# sourceMappingURL=textfield.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"textfield.styles.d.ts","sourceRoot":"","sources":["../../../src/components/textfield/textfield.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;cAW5B,CAAC;AAEH,MAAM,MAAM,iBAAiB,GAAG,YAAY,CAAC,OAAO,iBAAiB,CAAC,CAAC"}

package/dist/components/textfield/textfield.styles.js

@@ -0,0 +1,12 @@
+import { tv } from "tailwind-variants";
+//#region src/components/textfield/textfield.styles.ts
+const textFieldVariants = tv({
+	base: "textfield",
+	defaultVariants: { fullWidth: false },
+	variants: { fullWidth: {
+		false: "",
+		true: "textfield--full-width"
+	} }
+});
+//#endregion
+export { textFieldVariants };

package/dist/components/textfield.css

@@ -0,0 +1,23 @@
+/* Text field styles */
+/* use textfield instead of text-field to avoid conflict with Tailwind `text-` prefix */
+.textfield {
+  @apply flex flex-col gap-1;
+
+  &[data-invalid="true"],
+  &[aria-invalid="true"] {
+    [data-slot="description"] {
+      @apply hidden;
+    }
+  }
+}
+
+/* Full width modifier */
+.textfield--full-width {
+  @apply w-full;
+
+  /* Automatically make Input full width when TextField is full width */
+  [data-slot="input"],
+  [data-slot="textarea"] {
+    @apply w-full;
+  }
+}

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

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

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

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

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

@@ -0,0 +1,2 @@
+import { timeFieldVariants } from "./time-field.styles.js";
+export { timeFieldVariants };

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

@@ -0,0 +1,19 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const timeFieldVariants: import("tailwind-variants").TVReturnType<{
+    fullWidth: {
+        false: "";
+        true: "time-field--full-width";
+    };
+}, undefined, "time-field", {
+    fullWidth: {
+        false: "";
+        true: "time-field--full-width";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    fullWidth: {
+        false: "";
+        true: "time-field--full-width";
+    };
+}, undefined>>;
+export type TimeFieldVariants = VariantProps<typeof timeFieldVariants>;
+//# sourceMappingURL=time-field.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"time-field.styles.d.ts","sourceRoot":"","sources":["../../../src/components/time-field/time-field.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;cAW5B,CAAC;AAEH,MAAM,MAAM,iBAAiB,GAAG,YAAY,CAAC,OAAO,iBAAiB,CAAC,CAAC"}

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

@@ -0,0 +1,12 @@
+import { tv } from "tailwind-variants";
+//#region src/components/time-field/time-field.styles.ts
+const timeFieldVariants = tv({
+	base: "time-field",
+	defaultVariants: { fullWidth: false },
+	variants: { fullWidth: {
+		false: "",
+		true: "time-field--full-width"
+	} }
+});
+//#endregion
+export { timeFieldVariants };

package/dist/components/time-field.css

@@ -0,0 +1,20 @@
+/* Time field styles */
+.time-field {
+  @apply flex flex-col gap-1;
+
+  &[data-invalid="true"],
+  &[aria-invalid="true"] {
+    [data-slot="description"] {
+      @apply hidden;
+    }
+  }
+
+  [data-slot="label"] {
+    @apply w-fit;
+  }
+}
+
+/* Full width modifier */
+.time-field--full-width {
+  @apply w-full;
+}

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

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

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

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

package/dist/components/toast/index.js

@@ -0,0 +1,2 @@
+import { toastVariants } from "./toast.styles.js";
+export { toastVariants };

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

@@ -0,0 +1,163 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const toastVariants: import("tailwind-variants").TVReturnType<{
+    placement: {
+        bottom: {
+            region: string;
+            toast: string;
+        };
+        "bottom end": {
+            region: string;
+            toast: string;
+        };
+        "bottom start": {
+            region: string;
+            toast: string;
+        };
+        top: {
+            region: string;
+            toast: string;
+        };
+        "top end": {
+            region: string;
+            toast: string;
+        };
+        "top start": {
+            region: string;
+            toast: string;
+        };
+    };
+    variant: {
+        accent: {
+            toast: string;
+        };
+        danger: {
+            toast: string;
+        };
+        default: {
+            toast: string;
+        };
+        success: {
+            toast: string;
+        };
+        warning: {
+            toast: string;
+        };
+    };
+}, {
+    action: string;
+    close: string;
+    content: string;
+    description: string;
+    indicator: string;
+    region: string;
+    title: string;
+    toast: string;
+}, undefined, {
+    placement: {
+        bottom: {
+            region: string;
+            toast: string;
+        };
+        "bottom end": {
+            region: string;
+            toast: string;
+        };
+        "bottom start": {
+            region: string;
+            toast: string;
+        };
+        top: {
+            region: string;
+            toast: string;
+        };
+        "top end": {
+            region: string;
+            toast: string;
+        };
+        "top start": {
+            region: string;
+            toast: string;
+        };
+    };
+    variant: {
+        accent: {
+            toast: string;
+        };
+        danger: {
+            toast: string;
+        };
+        default: {
+            toast: string;
+        };
+        success: {
+            toast: string;
+        };
+        warning: {
+            toast: string;
+        };
+    };
+}, {
+    action: string;
+    close: string;
+    content: string;
+    description: string;
+    indicator: string;
+    region: string;
+    title: string;
+    toast: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    placement: {
+        bottom: {
+            region: string;
+            toast: string;
+        };
+        "bottom end": {
+            region: string;
+            toast: string;
+        };
+        "bottom start": {
+            region: string;
+            toast: string;
+        };
+        top: {
+            region: string;
+            toast: string;
+        };
+        "top end": {
+            region: string;
+            toast: string;
+        };
+        "top start": {
+            region: string;
+            toast: string;
+        };
+    };
+    variant: {
+        accent: {
+            toast: string;
+        };
+        danger: {
+            toast: string;
+        };
+        default: {
+            toast: string;
+        };
+        success: {
+            toast: string;
+        };
+        warning: {
+            toast: string;
+        };
+    };
+}, {
+    action: string;
+    close: string;
+    content: string;
+    description: string;
+    indicator: string;
+    region: string;
+    title: string;
+    toast: string;
+}>>;
+export type ToastVariants = VariantProps<typeof toastVariants>;
+//# sourceMappingURL=toast.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toast.styles.d.ts","sourceRoot":"","sources":["../../../src/components/toast/toast.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,aAAa;;QAiBpB,MAAM;YACJ,MAAM;YACN,KAAK;;QAEP,YAAY;YACV,MAAM;YACN,KAAK;;QAEP,cAAc;YACZ,MAAM;YACN,KAAK;;QAEP,GAAG;YACD,MAAM;YACN,KAAK;;QAEP,SAAS;YACP,MAAM;YACN,KAAK;;QAEP,WAAW;YACT,MAAM;YACN,KAAK;;;;QAIP,MAAM;YACJ,KAAK;;QAEP,MAAM;YACJ,KAAK;;QAEP,OAAO;YACL,KAAK;;QAEP,OAAO;YACL,KAAK;;QAEP,OAAO;YACL,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAIX,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC"}

package/dist/components/toast/toast.styles.js

@@ -0,0 +1,55 @@
+import { tv } from "tailwind-variants";
+//#region src/components/toast/toast.styles.ts
+const toastVariants = tv({
+	defaultVariants: {
+		placement: "bottom",
+		variant: "default"
+	},
+	slots: {
+		action: "toast__action",
+		close: "toast__close-button",
+		content: "toast__content",
+		description: "toast__description",
+		indicator: "toast__indicator",
+		region: "toast-region",
+		title: "toast__title",
+		toast: "toast"
+	},
+	variants: {
+		placement: {
+			bottom: {
+				region: "toast-region--bottom",
+				toast: "toast--bottom"
+			},
+			"bottom end": {
+				region: "toast-region--bottom-end",
+				toast: "toast--bottom-end"
+			},
+			"bottom start": {
+				region: "toast-region--bottom-start",
+				toast: "toast--bottom-start"
+			},
+			top: {
+				region: "toast-region--top",
+				toast: "toast--top"
+			},
+			"top end": {
+				region: "toast-region--top-end",
+				toast: "toast--top-end"
+			},
+			"top start": {
+				region: "toast-region--top-start",
+				toast: "toast--top-start"
+			}
+		},
+		variant: {
+			accent: { toast: "toast--accent" },
+			danger: { toast: "toast--danger" },
+			default: { toast: "toast--default" },
+			success: { toast: "toast--success" },
+			warning: { toast: "toast--warning" }
+		}
+	}
+});
+//#endregion
+export { toastVariants };