odj-svelte-ui 0.1.0 → 0.2.0

package/dist/forms/textarea/Textarea.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { type TextareaProps as Props, textarea } from ".";
 
-  let { header, footer, value = $bindable(), divClass, innerClass, headerClass, footerClass, disabled, class: className, cols, ...restProps }: Props = $props();
+  let { header, footer, value = $bindable(), divClass, innerClass, headerClass, footerClass, disabled, class: className, cols, autoexpand = false, maxRows = 15, ...restProps }: Props = $props();
 
   let hasHeader = !!header;
   let hasFooter = !!footer;
@@ -13,7 +13,63 @@
   }
 
   const { base, wrapper, innerWrapper, headerCls, footerCls } = $derived(textarea({ wrapped, hasHeader, hasFooter, cols: !!cols }));
-  // $inspect('wrapped: ', wrapped);
+  
+  function expandTextarea(this: HTMLTextAreaElement) {
+    if (!autoexpand) return;
+
+    // Get the element
+    const textarea = this;
+
+    // Set required styles for this to function properly.
+    textarea.style.setProperty('resize', 'none');
+    textarea.style.setProperty('min-height', '0');
+    textarea.style.setProperty('max-height', 'none');
+    textarea.style.setProperty('height', 'auto');
+
+    // Set rows attribute to number of lines in content
+
+    // Reset rows attribute to get accurate scrollHeight
+    textarea.setAttribute('rows', '1');
+
+    // Get the computed values object reference
+    const cs = getComputedStyle(textarea);
+
+    // Force content-box for size accurate line-height calculation
+    // Remove scrollbars, lock width (subtract inline padding and inline border widths)
+    // and remove inline padding and borders to keep width consistent (for text wrapping accuracy)
+    const inline_padding = parseFloat(cs['padding-left']) + parseFloat(cs['padding-right']);
+    const inline_border_width = parseFloat(cs['border-left-width']) + parseFloat(cs['border-right-width']);
+    textarea.style.setProperty('overflow', 'hidden', 'important');
+    textarea.style.setProperty('width', (parseFloat(cs['width']) - inline_padding - inline_border_width) + 'px');
+    textarea.style.setProperty('box-sizing', 'content-box');
+    textarea.style.setProperty('padding-inline', '0');
+    textarea.style.setProperty('border-width', '0');
+    
+    // Get the base line height, and top / bottom padding.
+    const block_padding = parseFloat(cs['padding-top']) + parseFloat(cs['padding-bottom']);
+    const line_height =
+      // If line-height is not explicitly set, use the computed height value (ignore padding due to content-box)
+      cs['line-height'] === 'normal' ? parseFloat(cs['height'])
+      // Otherwise (line-height is explicitly set), use the computed line-height value.
+      : parseFloat(cs['line-height']);
+
+    // Get the scroll height (rounding to be safe to ensure cross browser consistency)
+    const scroll_height = Math.round(textarea.scrollHeight);
+
+    // Undo overflow, width, border-width, box-sizing & inline padding overrides
+    textarea.style.removeProperty('width');
+    textarea.style.removeProperty('box-sizing');
+    textarea.style.removeProperty('padding-inline');
+    textarea.style.removeProperty('border-width');
+    textarea.style.removeProperty('overflow');
+
+    // Subtract block_padding from scroll_height and divide that by our line_height to get the row count.
+    // Round to nearest integer as it will always be within ~.1 of the correct whole number.
+    const rows = Math.round((scroll_height - block_padding) / line_height);
+
+    // Set the calculated rows attribute (limited by maxRows)
+    textarea.setAttribute("rows", "" + Math.min(rows, Math.abs(maxRows)));
+  }
 </script>
 
 <div class={wrapper({ class: divClass })}>
@@ -23,7 +79,7 @@
     </div>
   {/if}
   <div class={innerWrapper({ class: innerClass })}>
-    <textarea bind:value {disabled} {...restProps} class={base({ className })}></textarea>
+    <textarea bind:value {disabled} {...restProps} class={base({ className })} oninput={expandTextarea}></textarea>
   </div>
   {#if footer}
     <div class={footerCls({ class: footerClass })}>

package/dist/forms/textarea/theme.js

@@ -1,7 +1,7 @@
 import { tv } from "tailwind-variants";
 export const textarea = tv({
     slots: {
-        base: "block text-sm bg-inherit dark:bg-inherit focus:outline-none disabled:cursor-not-allowed disabled:opacity-50",
+        base: "block text-sm bg-inherit dark:bg-inherit focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
         wrapper: "",
         innerWrapper: "",
         headerCls: "py-2 px-3 border-light-surface-200 dark:border-dark-surface-500",

package/dist/forms/textarea/type.d.ts

@@ -10,5 +10,7 @@ interface TextareaProps extends HTMLTextareaAttributes {
     headerClass?: string;
     footerClass?: string;
     cols?: number;
+    autoexpand?: boolean;
+    maxRows?: number;
 }
 export { type TextareaProps };

package/dist/forms/toggle/theme.js

@@ -1,9 +1,9 @@
 import { tv } from "tailwind-variants";
 export const toggle = tv({
     slots: {
-        span: "me-3 shrink-0 bg-gray-200 rounded-full peer-focus:ring-4 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:bg-white after:border-gray-300 after:border after:rounded-full after:transition-all dark:bg-gray-600 dark:border-gray-500 relative ",
+        span: "me-3 shrink-0 bg-gray-200 rounded-full peer-focus:ring-4 peer-checked:after:translate-x-full peer-checked:rtl:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:bg-white after:border-gray-300 after:border after:rounded-full after:transition-all dark:bg-gray-600 dark:border-gray-500 relative ",
         label: "flex items-center",
-        input: "w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2 rounded dark:bg-gray-700 dark:border-gray-600 sr-only peer"
+        input: "w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2 rounded-sm dark:bg-gray-700 dark:border-gray-600 sr-only peer"
     },
     variants: {
         disabled: {

package/dist/gallery/theme.d.ts

@@ -1,15 +1,15 @@
 declare const gallery: import("tailwind-variants").TVReturnType<{
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            div?: import("tailwind-merge").ClassNameValue;
-            image?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            div?: import("tailwind-variants").ClassValue;
+            image?: import("tailwind-variants").ClassValue;
         };
     };
 } | {
     [x: string]: {
-        [x: string]: import("tailwind-merge").ClassNameValue | {
-            div?: import("tailwind-merge").ClassNameValue;
-            image?: import("tailwind-merge").ClassNameValue;
+        [x: string]: import("tailwind-variants").ClassValue | {
+            div?: import("tailwind-variants").ClassValue;
+            image?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
@@ -17,16 +17,16 @@ declare const gallery: import("tailwind-variants").TVReturnType<{
     div: string;
 }, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            div?: import("tailwind-merge").ClassNameValue;
-            image?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            div?: import("tailwind-variants").ClassValue;
+            image?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}>, {
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            div?: import("tailwind-merge").ClassNameValue;
-            image?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            div?: import("tailwind-variants").ClassValue;
+            image?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
@@ -37,9 +37,9 @@ declare const gallery: import("tailwind-variants").TVReturnType<{
     div: string;
 }, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            div?: import("tailwind-merge").ClassNameValue;
-            image?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            div?: import("tailwind-variants").ClassValue;
+            image?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}>, unknown, unknown, undefined>>;

package/dist/indicator/theme.js

@@ -1,7 +1,7 @@
 import { tv } from "tailwind-variants";
 const indicator = tv({
     slots: {
-        base: "flex-shrink-0"
+        base: "shrink-0"
     },
     variants: {
         color: {
@@ -35,7 +35,7 @@ const indicator = tv({
             xl: { base: "w-6 h-6" }
         },
         cornerStyle: {
-            rounded: { base: "rounded" },
+            rounded: { base: "rounded-sm" },
             circular: { base: "rounded-full" }
         },
         border: {

package/dist/list-group/theme.js

@@ -44,7 +44,7 @@ export const listGroupItem = tv({
         {
             active: true,
             state: "normal",
-            class: "hover:bg-gray-100 hover:text-primary-700 dark:hover:bg-gray-600 dark:hover:text-white focus:z-40 focus:outline-none focus:ring-2 focus:ring-primary-700 focus:text-primary-700 dark:focus:ring-gray-500 dark:focus:text-white"
+            class: "hover:bg-gray-100 hover:text-primary-700 dark:hover:bg-gray-600 dark:hover:text-white focus:z-40 focus:outline-hidden focus:ring-2 focus:ring-primary-700 focus:text-primary-700 dark:focus:ring-gray-500 dark:focus:text-white"
         }
     ]
 });

package/dist/mega-menu/theme.js

@@ -2,7 +2,7 @@ import { tv } from "tailwind-variants";
 export const megamenu = tv({
     slots: {
         base: "w-full border rounded-lg",
-        div: "flex flex-col md:flex-row p-4 max-w-screen-md justify-center mx-auto mt-2",
+        div: "flex flex-col md:flex-row p-4 max-w-(--breakpoint-md) justify-center mx-auto mt-2",
         ul: "grid grid-flow-row gap-y-4 md:gap-x-0 auto-col-max auto-row-max grid-cols-2 md:grid-cols-3 text-sm font-medium",
         footerDiv: "md:w-1/3 mt-4 md:mt-0"
     },

package/dist/modal/theme.js

@@ -4,7 +4,7 @@ export const modal = tv({
         base: "fixed top-0 start-0 end-0 h-modal md:inset-0 md:h-full z-50 w-full p-4 flex pointer-events-none",
         div: "flex relative w-full max-h-full",
         content: "w-full text-light-surface-800 dark:text-dark-surface-300 bg-white dark:bg-dark-surface-800 pointer-events-auto",
-        backdrop: "fixed inset-0 z-50 bg-light-surface-900 bg-opacity-50 dark:bg-opacity-80 pointer-events-auto",
+        backdrop: "fixed inset-0 z-50 bg-light-surface-900/50 dark:bg-light-surface-900/80 pointer-events-auto",
         header: "flex justify-between items-center pt-4 px-4 rounded-t-xl",
         footer: "flex items-center p-4 space-x-3 rtl:space-x-reverse rounded-b-xl border-t border-light-surface-300 dark:border-dark-surface-600 ",
         body: "p-4 space-y-4 flex-1 overflow-y-auto overscroll-contain",
@@ -36,7 +36,7 @@ export const modal = tv({
             xl: { div: "max-w-7xl" }
         },
         backdrop: {
-            true: { backdrop: "bg-light-surface-900 dark:bg-dark-surface-900 bg-opacity-75" }
+            true: { backdrop: "bg-light-surface-900/75 dark:bg-dark-surface-900/75" }
         },
         rounded: {
             true: { content: "rounded-xl" }

package/dist/nav/theme.d.ts

@@ -345,16 +345,16 @@ export declare const navUl: import("tailwind-variants").TVReturnType<{
 }>, unknown, unknown, undefined>>;
 export declare const navbrand: import("tailwind-variants").TVReturnType<{
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            base?: import("tailwind-merge").ClassNameValue;
-            span?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            span?: import("tailwind-variants").ClassValue;
         };
     };
 } | {
     [x: string]: {
-        [x: string]: import("tailwind-merge").ClassNameValue | {
-            base?: import("tailwind-merge").ClassNameValue;
-            span?: import("tailwind-merge").ClassNameValue;
+        [x: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            span?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
@@ -362,16 +362,16 @@ export declare const navbrand: import("tailwind-variants").TVReturnType<{
     span: string;
 }, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            base?: import("tailwind-merge").ClassNameValue;
-            span?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            span?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}>, {
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            base?: import("tailwind-merge").ClassNameValue;
-            span?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            span?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
@@ -382,9 +382,9 @@ export declare const navbrand: import("tailwind-variants").TVReturnType<{
     span: string;
 }, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            base?: import("tailwind-merge").ClassNameValue;
-            span?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            span?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}>, unknown, unknown, undefined>>;
@@ -581,7 +581,7 @@ export declare const navhamburger: import("tailwind-variants").TVReturnType<{
         xl: string;
         xxl: string;
     };
-}, undefined, "inline-flex h-10 w-10 items-center justify-center rounded-lg p-2 text-sm text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600", import("tailwind-variants/dist/config").TVConfig<{
+}, undefined, "inline-flex h-10 w-10 items-center justify-center rounded-lg p-2 text-sm text-gray-500 hover:bg-gray-100 focus:outline-hidden focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600", import("tailwind-variants/dist/config").TVConfig<{
     breakPoint: {
         md: string;
         lg: string;
@@ -609,7 +609,7 @@ export declare const navhamburger: import("tailwind-variants").TVReturnType<{
         xl: string;
         xxl: string;
     };
-}, undefined, "inline-flex h-10 w-10 items-center justify-center rounded-lg p-2 text-sm text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600", import("tailwind-variants/dist/config").TVConfig<{
+}, undefined, "inline-flex h-10 w-10 items-center justify-center rounded-lg p-2 text-sm text-gray-500 hover:bg-gray-100 focus:outline-hidden focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600", import("tailwind-variants/dist/config").TVConfig<{
     breakPoint: {
         md: string;
         lg: string;

package/dist/nav/theme.js

@@ -3,10 +3,10 @@ export const navbar = tv({
     slots: {
         base: "bg-white dark:bg-gray-900 text-gray-700 dark:text-gray-200 border-gray-100 dark:border-gray-700 divide-gray-100 dark:divide-gray-700 px-2 sm:px-4 py-2.5 w-full",
         container: "mx-auto flex flex-wrap items-center justify-between",
-        toggleButton: "inline-flex h-10 w-10 items-center justify-center rounded-lg p-2 text-sm text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600",
+        toggleButton: "inline-flex h-10 w-10 items-center justify-center rounded-lg p-2 text-sm text-gray-500 hover:bg-gray-100 focus:outline-hidden focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600",
         menuContainer: "w-full",
-        activeLink: "block py-2 px-3 text-white bg-primary-700 rounded dark:text-white",
-        inactiveLink: "block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white"
+        activeLink: "block py-2 px-3 text-white bg-primary-700 rounded-sm dark:text-white",
+        inactiveLink: "block py-2 px-3 text-gray-900 rounded-sm hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white"
     },
     variants: {
         fluid: {
@@ -19,17 +19,17 @@ export const navbar = tv({
         },
         breakPoint: {
             md: {
-                container: "max-w-screen-xl",
+                container: "max-w-(--breakpoint-xl)",
                 toggleButton: "md:hidden",
                 menuContainer: "md:block md:w-auto"
             },
             lg: {
-                container: "max-w-screen-xl",
+                container: "max-w-(--breakpoint-xl)",
                 toggleButton: "lg:hidden",
                 menuContainer: "lg:block lg:w-auto"
             },
             xl: {
-                container: "max-w-screen-xl",
+                container: "max-w-(--breakpoint-xl)",
                 toggleButton: "xl:hidden",
                 menuContainer: "xl:block xl:w-auto"
             },
@@ -74,7 +74,7 @@ export const navbrand = tv({
 export const navLi = tv({
     slots: {
         base: "list-none",
-        link: "block py-2 pl-3 pr-4 text-gray-900 rounded hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white"
+        link: "block py-2 pl-3 pr-4 text-gray-900 rounded-sm hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white"
     },
     variants: {
         active: {
@@ -142,7 +142,7 @@ export const navcontainer = tv({
     }
 });
 export const navhamburger = tv({
-    base: "inline-flex h-10 w-10 items-center justify-center rounded-lg p-2 text-sm text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600",
+    base: "inline-flex h-10 w-10 items-center justify-center rounded-lg p-2 text-sm text-gray-500 hover:bg-gray-100 focus:outline-hidden focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600",
     variants: {
         breakPoint: {
             md: "md:hidden",

package/dist/pagination/theme.js

@@ -15,7 +15,7 @@ export const paginationItem = tv({
             false: "rounded-lg"
         },
         table: {
-            true: "rounded",
+            true: "rounded-sm",
             false: "border"
         }
     },

package/dist/rating/Review.svelte

@@ -64,7 +64,7 @@
             {review.title}
           </h4>
         </div>
-        <p class="inline-flex items-center rounded bg-primary-700 p-1.5 text-sm font-semibold text-white">
+        <p class="inline-flex items-center rounded-sm bg-primary-700 p-1.5 text-sm font-semibold text-white">
           {review.rating}
         </p>
       </div>

package/dist/rating/ScoreRating.svelte

@@ -32,7 +32,7 @@
             {label}
           </dt>
           <dd class="mb-3 flex items-center">
-            <div class="me-2 h-2.5 w-full rounded bg-gray-200 dark:bg-gray-700">
+            <div class="me-2 h-2.5 w-full rounded-sm bg-gray-200 dark:bg-gray-700">
               <div class={bar()} style="width: {rating * 10}%"></div>
             </div>
             <span class="text-sm font-medium text-gray-500 dark:text-gray-400">{rating}</span>
@@ -49,7 +49,7 @@
             {label}
           </dt>
           <dd class="mb-3 flex items-center">
-            <div class="me-2 h-2.5 w-full rounded bg-gray-200 dark:bg-gray-700">
+            <div class="me-2 h-2.5 w-full rounded-sm bg-gray-200 dark:bg-gray-700">
               <div class={bar()} style="width: {rating * 10}%"></div>
             </div>
             <span class="text-sm font-medium text-gray-500 dark:text-gray-400">{rating}</span>