@julianelda/domos 2.0.1 → 2.1.1

package/dist/button/button.svelte

@@ -1,16 +1,25 @@
 <script lang="ts">
+  import { clsx } from "clsx";
+  import { twMerge } from "tailwind-merge";
+
   import type { ButtonProps } from "./button.types.js";
 
-  const { children, variant = "primary", ...rest }: ButtonProps = $props();
+  const {
+    children,
+    class: className,
+    variant = "primary",
+    ...rest
+  }: ButtonProps = $props();
 </script>
 
 <button
   {...rest}
-  class={[
+  class={twMerge(
     "cursor-pointer appearance-none rounded-lg p-2 text-lg shadow-sm hover:border-primary-500 hover:bg-primary-500 focus:ring-primary-300 focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-primary-300 active:bg-primary-700 dark:hover:bg-primary-500",
     variant === "primary"
       ? "border-primary-700 bg-primary-700 text-ink-white"
       : "border border-ink-500 bg-card-background-light text-ink-black hover:text-white dark:bg-slate dark:text-ink-white",
-  ]}>
+    clsx(className),
+  )}>
   {@render children?.()}
 </button>

package/dist/card/card.svelte

@@ -1,8 +1,17 @@
 <script lang="ts">
-  const { children } = $props();
+  import { clsx } from "clsx";
+  import { twMerge } from "tailwind-merge";
+
+  import type { CardProps } from "./card.types.js";
+
+  const { children, class: className, ...rest }: CardProps = $props();
 </script>
 
 <div
-  class="rounded-md bg-card-background-light p-1 shadow-sm sm:p-4 dark:bg-card-background-dark">
+  {...rest}
+  class={twMerge(
+    "rounded-md bg-card-background-light p-1 shadow-sm sm:p-4 dark:bg-card-background-dark",
+    clsx(className),
+  )}>
   {@render children?.()}
 </div>

package/dist/card/card.svelte.d.ts

@@ -1,5 +1,4 @@
-declare const Card: import("svelte").Component<{
-    children: any;
-}, {}, "">;
+import type { CardProps } from "./card.types.ts";
+declare const Card: import("svelte").Component<CardProps, {}, "">;
 type Card = ReturnType<typeof Card>;
 export default Card;

package/dist/card/card.types.d.ts

@@ -0,0 +1,5 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+export interface CardProps extends HTMLAttributes<HTMLDivElement> {
+    children?: Snippet;
+}

package/dist/card/card.types.js

@@ -0,0 +1 @@
+export {};

package/dist/checkbox/checkbox.svelte

@@ -1,9 +1,17 @@
 <script lang="ts">
   import InputLabel from "../input-label/input-label.svelte";
+  import { clsx } from "clsx";
+  import { twMerge } from "tailwind-merge";
 
   import type { CheckboxProps } from "./checkbox.types.js";
 
-  const { hideLabel, id, label, ...rest }: CheckboxProps = $props();
+  const {
+    class: className,
+    hideLabel,
+    id,
+    label,
+    ...rest
+  }: CheckboxProps = $props();
 </script>
 
 <div class="relative flex items-start gap-1">
@@ -11,7 +19,10 @@
     <input
       {...rest}
       {id}
-      class="form-checkbox inline-block size-4 rounded-md border-0 bg-white p-1 text-primary-500 accent-primary-500 ring-1 ring-ink-500 ring-inset focus:border-primary-300 focus:ring-1 focus:ring-primary-300 focus:ring-inset dark:bg-ink-500"
+      class={twMerge(
+        "form-checkbox inline-block size-4 rounded-md border-0 bg-white p-1 text-primary-500 accent-primary-500 ring-1 ring-ink-500 ring-inset focus:border-primary-300 focus:ring-1 focus:ring-primary-300 focus:ring-inset dark:bg-ink-500",
+        clsx(className),
+      )}
       type="checkbox" />
   </div>
   <div class="leading-6">

package/dist/input/input.svelte

@@ -1,13 +1,21 @@
 <script lang="ts">
   import InputField from "../input-field/input-field.svelte";
   import InputLabel from "../input-label/input-label.svelte";
+  import { clsx } from "clsx";
+  import { twMerge } from "tailwind-merge";
 
   import type { InputProps } from "./input.types.js";
 
-  const { hideLabel, id, label, ...rest }: InputProps = $props();
+  const {
+    class: className,
+    hideLabel,
+    id,
+    label,
+    ...rest
+  }: InputProps = $props();
 </script>
 
-<div class="flex flex-1 flex-col gap-1">
+<div class={twMerge("flex flex-1 flex-col gap-1", clsx(className))}>
   <InputLabel
     {hideLabel}
     {id}

package/dist/input-button/input-button.svelte

@@ -1,11 +1,14 @@
 <script lang="ts">
   import InputField from "../input-field/input-field.svelte";
   import InputLabel from "../input-label/input-label.svelte";
+  import { clsx } from "clsx";
+  import { twMerge } from "tailwind-merge";
 
   import type { InputButtonProps } from "./input-button.types.js";
 
   const {
     buttonAriaLabel,
+    class: className,
     hideLabel,
     icon,
     id,
@@ -15,7 +18,7 @@
   }: InputButtonProps = $props();
 </script>
 
-<div class="flex flex-1 flex-col gap-1">
+<div class={twMerge("flex flex-1 flex-col gap-1", clsx(className))}>
   <InputLabel
     hideLabel={Boolean(hideLabel)}
     {id}

package/dist/input-field/input-field.svelte

@@ -1,8 +1,12 @@
 <script lang="ts">
+  import { clsx } from "clsx";
+  import { twMerge } from "tailwind-merge";
+
   import type { InputFieldProps } from "./input-field.types.js";
 
   const {
     borderless = false,
+    class: className,
     withIconLeft = false,
     ...rest
   }: InputFieldProps = $props();
@@ -10,13 +14,14 @@
 
 <input
   {...rest}
-  class={[
+  class={twMerge(
     "form-input block w-full appearance-none border text-ink-black dark:text-app-text-dark",
     borderless === true
       ? "border-0 bg-transparent p-0 ring-0 outline-none focus:ring-0 focus:outline-none"
       : "border-ink-gray bg-white p-2 px-3 ring-inset focus:border-primary-300 focus:ring-1 focus:ring-primary-300 focus:ring-inset dark:bg-slate",
     withIconLeft === true ? "rounded-l-md" : "rounded-md",
-  ]} />
+    clsx(className),
+  )} />
 
 <style>
   input[type="number"]::-webkit-inner-spin-button,

package/dist/input-label/input-label.svelte

@@ -1,16 +1,26 @@
 <script lang="ts">
+  import { clsx } from "clsx";
+  import { twMerge } from "tailwind-merge";
+
   import type { InputLabelProps } from "./input-label.types.js";
 
   const {
+    class: className,
     hideLabel = false,
     id,
     label,
     value = "",
+    ...rest
   }: InputLabelProps = $props();
 </script>
 
 <label
-  class={["font-heading mr-auto font-bold", hideLabel && "sr-only"]}
+  {...rest}
+  class={twMerge(
+    "font-heading mr-auto font-bold",
+    hideLabel && "sr-only",
+    clsx(className),
+  )}
   for={id}>
   {label}
   {#if value !== ""}

package/dist/input-label/input-label.types.d.ts

@@ -1,4 +1,5 @@
-export interface InputLabelProps {
+import type { HTMLLabelAttributes } from "svelte/elements";
+export interface InputLabelProps extends HTMLLabelAttributes {
     hideLabel?: boolean;
     id: string;
     label: string;

package/dist/input-select/input-select.svelte

@@ -2,10 +2,16 @@
   import InputField from "../input-field/input-field.svelte";
   import InputLabel from "../input-label/input-label.svelte";
   import SelectField from "../select-field/select-field.svelte";
+  import { twMerge } from "tailwind-merge";
 
   import type { InputSelectProps } from "./input-select.types.js";
 
-  const { hideLabel, inputProps, selectProps }: InputSelectProps = $props();
+  const {
+    class: className,
+    hideLabel,
+    inputProps,
+    selectProps,
+  }: InputSelectProps = $props();
 
   const inputFieldProps = $derived.by(() => {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -20,7 +26,7 @@
   });
 </script>
 
-<div class="flex flex-1 flex-col gap-1">
+<div class={twMerge("flex flex-1 flex-col gap-1", className)}>
   <InputLabel
     {hideLabel}
     id={inputProps.id}

package/dist/input-select/input-select.types.d.ts

@@ -4,6 +4,7 @@ export interface InputSelectInputProps extends InputFieldProps {
     label: string;
 }
 export interface InputSelectProps {
+    class?: string;
     hideLabel?: boolean;
     inputProps: InputSelectInputProps;
     selectProps: InputSelectSelectProps;

package/dist/select/select.svelte

@@ -1,13 +1,21 @@
 <script lang="ts">
   import InputLabel from "../input-label/input-label.svelte";
   import SelectField from "../select-field/select-field.svelte";
+  import { clsx } from "clsx";
+  import { twMerge } from "tailwind-merge";
 
   import type { SelectProps } from "./select.types.js";
 
-  const { hideLabel, id, label, ...rest }: SelectProps = $props();
+  const {
+    class: className,
+    hideLabel,
+    id,
+    label,
+    ...rest
+  }: SelectProps = $props();
 </script>
 
-<div class="flex flex-1 flex-col gap-1">
+<div class={twMerge("flex flex-1 flex-col gap-1", clsx(className))}>
   <InputLabel
     {hideLabel}
     {id}

package/dist/select-field/select-field.svelte

@@ -1,8 +1,12 @@
 <script lang="ts">
+  import { clsx } from "clsx";
+  import { twMerge } from "tailwind-merge";
+
   import type { SelectFieldProps } from "./select-field.types.js";
 
   const {
     borderless = false,
+    class: className,
     inInputField = false,
     options,
     ...rest
@@ -11,7 +15,7 @@
 
 <select
   {...rest}
-  class={[
+  class={twMerge(
     "form-select w-full appearance-none rounded-md text-ink-black dark:bg-slate dark:text-ink-white",
     borderless === true
       ? "border-0 bg-transparent p-0 ring-0 outline-none focus:ring-0 focus:outline-none"
@@ -19,7 +23,8 @@
     inInputField === true
       ? "h-full rounded-l-none bg-transparent"
       : "block pl-3",
-  ]}>
+    clsx(className),
+  )}>
   {#each options as option (option.value)}
     <option value={option.value}>
       {option.label}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@julianelda/domos",
-  "version": "2.0.1",
+  "version": "2.1.1",
   "keywords": [
     "svelte"
   ],
@@ -49,7 +49,9 @@
   },
   "dependencies": {
     "@julianelda/chroma": "^1.0.0",
-    "@julianelda/stilo": "^1.0.2"
+    "@julianelda/stilo": "^1.0.2",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.6.0"
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",
@@ -63,7 +65,7 @@
     "@tailwindcss/forms": "^0.5.11",
     "@tailwindcss/typography": "^0.5.20",
     "eslint": "^10.5.0",
-    "eslint-plugin-oxlint": "^1.71.0",
+    "eslint-plugin-oxlint": "^1.76.0",
     "eslint-plugin-svelte": "^3.19.0",
     "publint": "^0.3.17",
     "svelte": "^5.56.4",