@stubber/form-fields 1.0.3 → 1.0.4

package/dist/fields/component_parts/arraybuilder/FieldWrapper.svelte

@@ -1,6 +1,8 @@
 <script>
   import _ from "lodash-es";
 
+  import { Button } from "@stubber/ui/button";
+
   // fieldWrapper
   export let field;
   export let fieldcomponent;
@@ -39,31 +41,34 @@
   }
 </script>
 
-<div class="flex items-stretch pb-6">
+<div class="flex items-center pb-6">
   <div class="relative flex-grow-0 mr-2">
-    <button
+    <Button
       on:click={() => reorder(false)}
-      type="button"
-      class="flex items-center justify-center text-xl w-8 border border-dashed bg-surface-0 border-surface-300 hover:bg-surface-500 hover:text-surface-0 active:bg-surface-500 active:text-surface-0 active:border-0 rounded-t text-surface-500 h-1/2"
+      variant="ghost"
+      size="icon"
+      class="flex items-center justify-center w-5 h-5 "
     >
-      <i class="fa-regular fa-angle-up" />
-    </button>
-    <button
+      <i class="fa-sharp fa-regular fa-angle-up text-base" />
+    </Button>
+    <Button
       on:click={() => reorder(true)}
-      type="button"
-      class="flex items-center justify-center text-xl w-8 border border-t-0 border-dashed bg-surface-0 border-surface-300 hover:bg-surface-500 hover:text-surface-0 active:bg-surface-500 active:text-surface-0 active:border-0 rounded-b text-surface-500 h-1/2"
+      variant="ghost"
+      size="icon"
+      class="flex items-center justify-center w-5 h-5"
     >
-      <i class="fa-regular fa-angle-down" />
-    </button>
+      <i class="fa-sharp fa-regular fa-angle-down text-base" />
+    </Button>
   </div>
   <div class="flex-grow">
     <svelte:component this={fieldcomponent} {...$$props} field_wrapper={null} />
   </div>
-  <button
+  <Button
     on:click={removeEntry}
-    type="button"
-    class="flex-grow-0 flex items-center justify-center text-xl w-8 ml-2 border border-dashed bg-surface-0 border-danger-300 hover:bg-danger-500 hover:text-surface-0 hover:border-0 active:bg-danger-500 active:text-surface-0 active:border-0 rounded text-danger-500"
+    variant="destructive"
+    size="icon"
+    class="flex-grow-0 flex items-center justify-center w-6 h-6 ml-2 "
   >
-    <i class="fa-regular fa-xmark" />
-  </button>
+    <i class="fa-regular fa-trash-alt text-xs" />
+  </Button>
 </div>

package/dist/fields/components/Arraybuilder.svelte

@@ -5,6 +5,9 @@
   import { onMount } from "svelte";
   import { deepEqual } from "fast-equals";
 
+  import { Button } from "@stubber/ui/button";
+  import { Label } from "@stubber/ui/label";
+
   export let form;
   export let field;
 
@@ -73,9 +76,9 @@
 
 {#if new_entry}
   <div class="flex flex-col w-full text-surface-900">
-    <label for="input_{state_key}" class="block text-label {hide_label ? 'hidden' : ''}">
+    <Label for="input_{state_key}" class="block {hide_label ? 'hidden' : ''}">
       {label}
-    </label>
+    </Label>
     <div class="relative mt-2 rounded-md">
       {#if rendered_fields}
         {#each rendered_fields as initial_field_spec (initial_field_spec?.__key)}
@@ -83,19 +86,13 @@
         {/each}
       {/if}
       <div>
-        <button
-          type="button"
-          on:click={() => addEntry()}
-          class="text-xl w-8 h-8 border border-dashed bg-surface-0 border-primary-300 hover:bg-primary-500 hover:text-surface-0 hover:border-0 active:bg-primary-500 active:text-surface-0 active:border-0 rounded text-primary-500"
-        >
+        <Button type="button" size="icon" variant="outline" on:click={() => addEntry()} class="">
           <i class="fa-regular fa-plus" />
-        </button>
+        </Button>
       </div>
     </div>
     {#if validationMessage}
-      <p class="text-label {!isValid ? `text-danger-500` : `text-success-500`}">
-        {validationMessage}
-      </p>
+      <Label class={!isValid ? `text-danger-500` : `text-success-500`}>{validationMessage}</Label>
     {/if}
   </div>
 {/if}

package/dist/fields/components/Checkbox.svelte

@@ -5,6 +5,9 @@
   import { onMount, onDestroy } from "svelte";
   import { writable } from "svelte/store";
 
+  import { Checkbox } from "@stubber/ui/checkbox";
+  import { Label } from "@stubber/ui/label";
+
   export let field;
 
   const internal = writable();
@@ -74,10 +77,11 @@
 {#if $internal}
   <div class="flex flex-col w-full {!isValid ? `text-danger-500` : `text-surface-900`}">
     <div class="flex space-x-3 relative mt-2 items-center">
-      <label for="input_{state_key}" class="block text-label {hide_label ? 'hidden' : ''}">
+      <Label for="input_{state_key}" class="block {hide_label ? 'hidden' : ''}">
         {label}
-      </label>
-      <input
+      </Label>
+
+      <Checkbox
         on:keydown={(e) => {
           if (e.key === "Enter") {
             e.preventDefault();
@@ -86,15 +90,12 @@
         type="checkbox"
         id="input_{state_key}"
         placeholder={label}
-        class="block w-5 h-5 rounded-md text-label focus:outline-primary-400"
         name={state_key}
         bind:checked={$internal.checked}
       />
     </div>
     {#if validationMessage}
-      <p class="text-label {!isValid ? `text-danger-500` : `text-success-500`}">
-        {validationMessage}
-      </p>
+      <Label class={!isValid ? `text-danger-500` : `text-success-500`}>{validationMessage}</Label>
     {/if}
   </div>
 {/if}

package/dist/fields/components/CheckboxAutocomplete.svelte

@@ -3,6 +3,9 @@
   import Checkbox from "./Checkbox.svelte";
   import SmartText from "./SmartText.svelte";
   import * as utils from "../../utils/index.js";
+
+  import { Label } from "@stubber/ui/label";
+
   let clickOutside = utils.clickOutside;
 
   export let field;
@@ -76,7 +79,7 @@
                     select_option(option);
                   }}
                 />
-                <label for="fieldtype_radio_{option}">{option}</label>
+                <Label for="fieldtype_radio_{option}">{option}</Label>
               </div>
             {/each}
           </div>

package/dist/fields/components/Contactselector.svelte

@@ -6,6 +6,9 @@
   import { writable } from "svelte/store";
   import { syncStoreToStore } from "../../utils/syncing";
 
+  import { Label } from "@stubber/ui/label";
+  import { Button } from "@stubber/ui/button";
+
   export let form;
   export let field;
 
@@ -238,9 +241,9 @@
     }}
     class="relative flex flex-col w-full text-surface-900"
   >
-    <label for="input_{state_key}" class="block text-label {hide_label ? 'hidden' : ''}">
+    <Label for="input_{state_key}" class="block {hide_label ? 'hidden' : ''}">
       {label}
-    </label>
+    </Label>
     <div class="relative flex mt-2 rounded-md">
       <input
         on:keydown={(e) => {
@@ -271,9 +274,12 @@
         type="select"
         id="input_mask{state_key}"
         placeholder={label}
-        class="block w-full rounded-md border-0 py-1.5 pl-3 pr-9 text-field text-surface-900 ring-1 ring-inset {!isValid
-          ? 'ring-danger-500'
-          : 'ring-surface-300 focus:ring-primary-400'} focus:outline-none placeholder:text-surface-400 focus:ring-2 focus:ring-inset"
+        class="bg-gradient-to-b from-[#2727271F] to-[#27272719] shadow-select
+               flex h-7 w-full items-center justify-between rounded px-3 py-2
+               text-sm
+               [&>span]:line-clamp-1 aria-[invalid]:border-destructive
+               placeholder:text-black
+               {!isValid ? 'ring-danger-500' : 'ring-surface-300 focus:ring-primary-400'}"
         bind:value={filter_text}
         autocomplete="off"
       />
@@ -295,7 +301,9 @@
       <div use:teleport class="z-10 w-full absolute inset-y-[70px]">
         {#if items?.length > 0}
           <ul
-            class="block max-h-[200px] overflow-y-auto w-full bg-white shadow-lg rounded-md ring-1 ring-surface-300"
+            class="bg-popover text-popover-foreground relative min-w-[8rem]
+                   overflow-hidden rounded-md border shadow-md outline-none
+                   max-h-[200px] overflow-y-auto w-full p-1"
           >
             {#each items as item, index (item?._value?._key)}
               <li
@@ -305,7 +313,14 @@
               >
                 <button
                   on:click|preventDefault={() => setSelected(item)}
-                  class="selectitem text-surface-900 group-hover:text-white focus:text-white focus:outline-none px-4 py-1.5 w-full flex items-center"
+                  class="selectitem relative flex w-full cursor-default
+                           select-none items-center rounded-sm py-1 pl-8 pr-2
+                           text-sm outline-none hover:bg-accent
+                           hover:text-accent-foreground
+                           data-[highlighted]:bg-accent
+                           data-[highlighted]:text-accent-foreground
+                           data-[disabled]:pointer-events-none
+                           data-[disabled]:opacity-50"
                 >
                   {item._label}
                   {#if item.is_personal}
@@ -314,7 +329,7 @@
                     </div>
                   {/if}
                   {#if item?._value?._key == $internal?.selected_item?._value?._key}
-                    <i class="text-primary-400 ml-auto fa-regular fa-check" />
+                    <i class="absolute left-2 h-3.5 w-3.5 fa-regular fa-check" />
                   {/if}
                 </button>
               </li>
@@ -329,20 +344,18 @@
         {/if}
       </div>
     {/if}
-    <div class="mt-0 ml-auto">
-      <button
+    <div class="mt-1 ml-auto">
+      <Button
         on:click={toggleCreateNew}
-        type="button"
+        variant="ghost"
         class="text-surface-500 text-sm hover:text-surface-700"
       >
         <i class="fa-regular fa-plus" />
         Create new contact
-      </button>
+      </Button>
     </div>
     {#if validationMessage}
-      <p class="text-label {!isValid ? `text-danger-500` : `text-success-500`}">
-        {validationMessage}
-      </p>
+      <Label class={!isValid ? `text-danger-500` : `text-success-500`}>{validationMessage}</Label>
     {/if}
   </div>
 {/if}

package/dist/fields/components/Currency.svelte

@@ -8,6 +8,9 @@
   import getSymbolFromCurrency from "currency-symbol-map";
   import * as utils from "../../utils/index.js";
 
+  import { Button } from "@stubber/ui/button";
+  import { Label } from "@stubber/ui/label";
+
   export let field;
 
   let { clickOutside, inputRegexMask } = utils;
@@ -176,13 +179,13 @@
     }}
     class="flex flex-col w-full text-surface-900"
   >
-    <label for="input_{state_key}" class="block text-label {hide_label ? 'hidden' : ''}">
+    <Label for="input_{state_key}" class={hide_label ? "hidden" : ""}>
       {label}
-    </label>
+    </Label>
     <div
-      class="flex relative mt-2 rounded-md border-0 ring-1 {!isValid
+      class="bg-gradient-to-b from-[#2727271F] to-[#27272719] shadow-select ring-offset-background focus-visible:ring-ring aria-[invalid]:border-destructive flex h-7 w-full items-center justify-between rounded px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 relative {!isValid
         ? 'ring-danger-500'
-        : 'ring-surface-300 focus:ring-primary-400'} focus-within:ring-2"
+        : 'ring-surface-300 focus:ring-primary-400'} "
     >
       <div class="pointer-events-none flex items-center pl-3">
         <span class="text-label text-surface-600">
@@ -198,7 +201,7 @@
         use:inputRegexMask={currencyRegex}
         id="input_{state_key}"
         placeholder={label}
-        class="block w-full rounded-md py-2 px-3 focus:outline-none text-surface-900 placeholder:text-surface-400"
+        class="bg-transparent w-full focus:outline-none text-surface-900 placeholder:text-surface-400 ml-2"
         name={state_key}
         inputmode="decimal"
         bind:value={$internal.raw}
@@ -206,40 +209,44 @@
       />
       <!-- Here be selector stuff -->
       {#if currencyList && !currencyFixed}
-        <button
+        <Button
+          variant="ghost"
           type="button"
           on:click={toggleCurrencySelectorPopout}
-          class="w-20 pl-3 space-x-2 flex items-center bg-white hover:bg-surface-50 focus:outline-none focus:bg-surface-100 rounded-r-md"
+          class="w-20 pl-3 space-x-2 flex items-center"
         >
           <span class="text-field text-surface-700">{$internal?.currencycode}</span>
           <i
             class="text-surface-700 fa fa-solid fa-xs fa-caret-{show_currency_list ? 'up' : 'down'}"
           />
-        </button>
+        </Button>
       {/if}
       {#if show_currency_list && currencyList}
         <div class="z-10 absolute inset-y-[42px] right-0">
           <ul
-            class="items block max-h-[250px] overflow-y-auto w-[250px] md:w-[450px] bg-white shadow-lg ring-1 ring-surface-300"
+            class="items block max-h-[250px] overflow-y-auto w-[250px] md:w-[450px] bg-popover text-popover-foreground relative z-50 min-w-[8rem] overflow-hidden rounded border shadow-md outline-none p-1"
           >
             {#each currencyList as item}
               <!-- {#if currencyWhitelist.contains(item.value) && !currencyBlacklist.contains(item.value)} -->
               <li
                 class="{item.value == $internal?.currencycode
                   ? 'selecteditem'
-                  : ''} group hover:bg-surface-100 focus-within:bg-surface-100 text-field cursor-default"
+                  : ''} group relative flex w-full cursor-default select-none items-center rounded-sm py-1 pl-8 pr-2 text-sm outline-none
+                      hover:bg-accent hover:text-accent-foreground"
               >
+                <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+                  {#if item.value == $internal?.currencycode}
+                    <i class="fa-regular fa-check h-4 w-4" />
+                  {/if}
+                </span>
                 <button
                   on:click|preventDefault={() => setSelectedCurrency(item)}
                   on:focusout={(e) => handleFocusOut(e)}
-                  class="px-4 py-1 w-full flex items-center space-x-3 selectitem focus:outline-none"
+                  class=" w-full flex items-center space-x-3 selectitem focus:outline-none"
                 >
                   <span class="text-surface-900 text-field">{item.value}</span>
                   <span class="text-surface-700 text-field">{item.symbol}</span>
                   <span class="text-surface-500 text-field">{item.name}</span>
-                  {#if item.value == $internal?.currencycode}
-                    <i class="text-primary-400 ml-auto fa-regular fa-check" />
-                  {/if}
                 </button>
               </li>
               <!-- {/if} -->
@@ -250,9 +257,7 @@
       <!-- Here end selector stuff -->
     </div>
     {#if validationMessage}
-      <p class="text-label {!isValid ? `text-danger-500` : `text-success-500`}">
-        {validationMessage}
-      </p>
+      <Label class={!isValid ? `text-danger-500` : `text-success-500`}>{validationMessage}</Label>
     {/if}
   </div>
 {/if}

package/dist/fields/components/Fieldbuilder.svelte

@@ -9,6 +9,11 @@
   import FieldWrapper from "../component_parts/fieldbuilder/FieldWrapper.svelte";
   import * as utils from "../../utils/index.js";
 
+  import { Checkbox } from "@stubber/ui/checkbox";
+  import { Label } from "@stubber/ui/label";
+  import { Button } from "@stubber/ui/button";
+  import * as Accordion from "@stubber/ui/accordion";
+
   export let form;
   export let field;
 
@@ -209,20 +214,20 @@
 </script>
 
 <div class="flex flex-col w-full text-surface-900">
-  <label for="input_{state_key}" class="block text-label {hide_label ? 'hidden' : ''}">
+  <Label for="input_{state_key}" class="block text-label {hide_label ? 'hidden' : ''}">
     {label}
-  </label>
-  <div class="border">
-    <div class="bg-surface-50">
+  </Label>
+  <div class>
+    <div class="bg-white">
       {#if $field?.data?.base?.name}
         <div class="text-xs text-surface-700 p-1 border-b">
           {$field.data.base.name}
         </div>
       {/if}
-      <div class="flex items-center justify-start border-b bg-surface-50">
+      <div class="flex items-center justify-start">
         {#if !$field?.spec?.params?.hide_demo}
           <button type="button" on:click={() => (views.demo = !views.demo)}>
-            <div class="p-2 hover:bg-primary-100">
+            <div class="p-2 hover:bg-surface-100 rounded-sm">
               <div class="text-sm italic text-surface-500 flex justify-between items-center">
                 <i class="fa-regular fa-input-pipe {views.demo ? 'text-primary-500' : ''}" />
               </div>
@@ -230,21 +235,21 @@
           </button>
         {/if}
         <button type="button" on:click={() => (views.settings = !views.settings)}>
-          <div class="p-2 hover:bg-primary-100">
+          <div class="p-2 hover:bg-surface-100 rounded-sm">
             <div class="text-sm italic text-surface-500 flex justify-between items-center">
               <i class="fa-regular fa-gear {views.settings ? 'text-primary-500' : ''}" />
             </div>
           </div>
         </button>
         <button type="button" on:click={() => (views.demo_data = !views.demo_data)}>
-          <div class="p-2 hover:bg-primary-100">
+          <div class="p-2 hover:bg-surface-100 rounded-sm">
             <div class="text-sm italic text-surface-500 flex justify-between items-center">
               <i class="fa-regular fa-database {views.demo_data ? 'text-primary-500' : ''}" />
             </div>
           </div>
         </button>
         <button type="button" on:click={() => (views.advanced = !views.advanced)}>
-          <div class="p-2 hover:bg-primary-100">
+          <div class="p-2 hover:bg-surface-100 rounded-sm">
             <div class="text-sm italic text-surface-500 flex justify-between items-center">
               <i class="fa-regular fa-brackets-curly {views.advanced ? 'text-primary-500' : ''}" />
             </div>
@@ -333,8 +338,6 @@
     </div>
   </div>
   {#if validationMessage}
-    <p class="text-label {!isValid ? `text-danger-500` : `text-success-500`}">
-      {validationMessage}
-    </p>
+    <Label class={!isValid ? `text-danger-500` : `text-success-500`}>{validationMessage}</Label>
   {/if}
 </div>

package/dist/fields/components/Fieldsbuilder.svelte

@@ -6,6 +6,8 @@
   import { onMount } from "svelte";
   import { deepEqual } from "fast-equals";
 
+  import { Label } from "@stubber/ui/label";
+
   export let form;
   export let field;
 
@@ -115,8 +117,6 @@
     <Form bind:form={settings_form} {initial_form} {dependencies} />
   {/if}
   {#if validationMessage}
-    <p class="text-label {!isValid ? `text-danger-500` : `text-success-500`}">
-      {validationMessage}
-    </p>
+    <Label class={!isValid ? `text-danger-500` : `text-success-500`}>{validationMessage}</Label>
   {/if}
 </div>

package/dist/fields/components/File.svelte

@@ -6,6 +6,10 @@
   import { syncStoreToStore } from "../../utils/syncing";
   import { writable } from "svelte/store";
 
+  import { Input } from "@stubber/ui/input";
+  import { Label } from "@stubber/ui/label";
+  import { Button } from "@stubber/ui/button";
+
   export let form;
   export let field;
 
@@ -162,18 +166,18 @@
 </script>
 
 {#if $internal}
-  <label
+  <Label
     for="input_{state_key}"
     class="block text-label text-surface-900 {hide_label ? 'hidden' : ''}"
   >
     {label}
-  </label>
+  </Label>
   <div class="w-full flex flex-col {!isValid ? 'border-b border-warning-500' : ''}">
     <Dropzone on:drop={handleFilesSelect} disabled={limit_remaining <= 0}>
-      <div class="flex justify-center h-full flex-col text-center">
+      <div class="flex justify-center h-full flex-col text-center rounded-sm">
         <div>
-          <p class="text-field text-surface-800">Drop files to upload</p>
-          <p class="text-field text-surface-800">
+          <p class=" text-surface-800">Drop files to upload</p>
+          <p class=" text-surface-800">
             Or click <span
               class="text-primary-500 hover:text-primary-400 hover:underline cursor-pointer"
               >here</span
@@ -211,9 +215,11 @@
               {item?.file?.filename ?? item?.file?.name ?? item?.file?.path}
             </p>
           </div>
-          <button
+          <Button
             type="button"
-            class="shrink-0 ml-1 p-1 px-2 fa-solid fa-2xs fa-x bg-surface-0 rounded-full border border-surface-0 hover:border-warning-500 hover:text-warning-500"
+            variant="destructive"
+            size="icon"
+            class="shrink-0 ml-1 p-1 px-2 fa-solid fa-2xs fa-x  border-surface-0  "
             on:click={() => {
               removeFile(item);
             }}
@@ -223,8 +229,6 @@
     </div>
   </div>
   {#if validationMessage}
-    <p class="text-label {!isValid ? `text-danger-500` : `text-success-500`}">
-      {validationMessage}
-    </p>
+    <Label class={!isValid ? `text-danger-500` : `text-success-500`}>{validationMessage}</Label>
   {/if}
 {/if}

package/dist/fields/components/Heading.svelte

@@ -9,7 +9,7 @@
 
 <div class="flex flex-col w-full mb-2">
   {#if heading_text}
-    <h1 class="text-xl text-surface-700 mt-4">{heading_text}</h1>
+    <h1 class="text-xl text-black tracking-tight font-semibold mt-4">{heading_text}</h1>
   {/if}
   {#if subheading_text}
     <h2 class="text-sm text-surface-500 whitespace-pre-wrap">{subheading_text}</h2>