@stubber/form-fields 1.0.2 → 1.0.4

package/dist/fields/components/Jsoneditor.svelte

@@ -6,6 +6,8 @@
   import { writable } from "svelte/store";
   import { JSONEditor } from "svelte-jsoneditor";
 
+  import { Label } from "@stubber/ui/label";
+
   export let field;
 
   const internal = writable();
@@ -82,126 +84,55 @@
     </label>
     <JSONEditor bind:content={$internal.content} {readOnly} bind:mode={$internal.mode} />
     {#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}
 
-<style>.jse-theme-dark {
-  --jse-theme: dark;
-
-  /* over all fonts, sizes, and colors */
-  --jse-theme-color: #2f6dd0;
-  --jse-theme-color-highlight: #467cd2;
-  --jse-background-color: #1e1e1e;
-  --jse-text-color: #d4d4d4;
-  --jse-text-color-inverse: #4d4d4d;
-
-  /* main, menu, modal */
-  --jse-main-border: 1px solid #4f4f4f;
-  --jse-menu-color: #fff;
-  --jse-modal-background: #2f2f2f;
-  --jse-modal-overlay-background: rgba(0, 0, 0, 0.5);
-  --jse-modal-code-background: #2f2f2f;
-
-  /* tooltip in text mode */
-  --jse-tooltip-color: var(--jse-text-color);
-  --jse-tooltip-background: #4b4b4b;
-  --jse-tooltip-border: 1px solid #737373;
-  --jse-tooltip-action-button-color: inherit;
-  --jse-tooltip-action-button-background: #737373;
-
-  /* panels: navigation bar, gutter, search box */
-  --jse-panel-background: #333333;
-  --jse-panel-background-border: 1px solid #464646;
-  --jse-panel-color: var(--jse-text-color);
-  --jse-panel-color-readonly: #737373;
-  --jse-panel-border: 1px solid #3c3c3c;
-  --jse-panel-button-color-highlight: #e5e5e5;
-  --jse-panel-button-background-highlight: #464646;
-
-  /* navigation-bar */
-  --jse-navigation-bar-background: #656565;
-  --jse-navigation-bar-background-highlight: #7e7e7e;
-  --jse-navigation-bar-dropdown-color: var(--jse-text-color);
-
-  /* context menu */
-  --jse-context-menu-background: #4b4b4b;
-  --jse-context-menu-background-highlight: #595959;
-  --jse-context-menu-separator-color: #595959;
-  --jse-context-menu-color: var(--jse-text-color);
-  --jse-context-menu-pointer-background: #737373;
-  --jse-context-menu-pointer-background-highlight: #818181;
-  --jse-context-menu-pointer-color: var(--jse-context-menu-color);
-
-  /* contents: json key and values */
-  --jse-key-color: #9cdcfe;
-  --jse-value-color: var(--jse-text-color);
-  --jse-value-color-number: #b5cea8;
-  --jse-value-color-boolean: #569cd6;
-  --jse-value-color-null: #569cd6;
-  --jse-value-color-string: #ce9178;
-  --jse-value-color-url: #ce9178;
-  --jse-delimiter-color: #949494;
-  --jse-edit-outline: 2px solid var(--jse-text-color);
-
-  /* contents: selected or hovered */
-  --jse-selection-background-color: #464646;
-  --jse-selection-background-inactive-color: #333333;
-  --jse-hover-background-color: #343434;
-  --jse-active-line-background-color: rgba(255, 255, 255, 0.06);
-  --jse-search-match-background-color: #343434;
-
-  /* contents: section of collapsed items in an array */
-  --jse-collapsed-items-background-color: #333333;
-  --jse-collapsed-items-selected-background-color: #565656;
-  --jse-collapsed-items-link-color: #b2b2b2;
-  --jse-collapsed-items-link-color-highlight: #ec8477;
-
-  /* contents: highlighting of search results */
-  --jse-search-match-color: #724c27;
-  --jse-search-match-outline: 1px solid #966535;
-  --jse-search-match-active-color: #9f6c39;
-  --jse-search-match-active-outline: 1px solid #bb7f43;
-
-  /* contents: inline tags inside the JSON document */
-  --jse-tag-background: #444444;
-  --jse-tag-color: #bdbdbd;
-
-  /* contents: table */
-  --jse-table-header-background: #333333;
-  --jse-table-header-background-highlight: #424242;
-  --jse-table-row-odd-background: rgba(255, 255, 255, 0.1);
-
-  /* controls in modals: inputs, buttons, and `a` */
-  --jse-input-background: #3d3d3d;
-  --jse-input-border: var(--jse-main-border);
-  --jse-button-background: #808080;
-  --jse-button-background-highlight: #7a7a7a;
-  --jse-button-color: #e0e0e0;
-  --jse-button-secondary-background: #494949;
-  --jse-button-secondary-background-highlight: #5d5d5d;
-  --jse-button-secondary-background-disabled: #9d9d9d;
-  --jse-button-secondary-color: var(--jse-text-color);
-  --jse-a-color: #55abff;
-  --jse-a-color-highlight: #4387c9;
-
-  /* svelte-select */
-  --jse-svelte-select-background: #3d3d3d;
-  --jse-svelte-select-border: 1px solid #4f4f4f;
-  --list-background: #3d3d3d;
-  --item-hover-bg: #505050;
-  --multi-item-bg: #5b5b5b;
-  --input-color: #d4d4d4;
-  --multi-clear-bg: #8a8a8a;
-  --multi-item-clear-icon-color: #d4d4d4;
-  --multi-item-outline: 1px solid #696969;
-  --list-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.4);
-
-  /* color picker */
-  --jse-color-picker-background: #656565;
-  --jse-color-picker-border-box-shadow: #8c8c8c 0 0 0 1px;
-}
-</style>
+<style>
+  /* :global(.jsoneditor),
+  :global(.jsoneditor div) {
+    border-bottom-right-radius: 10px !important;
+    border-bottom-left-radius: 10px !important;
+    
+  } */
+
+  :global(.jse-button.jse-group-button) {
+    border-radius: 6px !important;
+    color: #000000 !important;
+    height: 1.5rem !important;
+    width: 3rem !important;
+    border: 0px !important;
+    margin: 5px !important;
+    padding: 12px !important;
+  }
+
+  :global(.jse-button) {
+    border-radius: 6px !important;
+    color: #000000 !important;
+    background-color: #efeff0 !important;
+  }
+
+  :global(.jse-button.jse-selected) {
+    background-color: #ffffff !important;
+    color: #000000 !important;
+    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12), 0 3px 1px rgba(0, 0, 0, 0.04);
+  }
+
+  :global(.jse-menu) {
+    color: #000000 !important;
+    background-color: #efeff0 !important;
+    margin-top: 10px;
+    margin-bottom: 20px;
+    border-radius: 10px !important;
+  }
+
+  :global(.jse-contents) {
+    background-color: #efeff0 !important;
+    border-radius: 0px !important;
+  }
+
+  :global(.jse-navigation-bar) {
+    border-radius: 0px !important;
+  }
+</style>

package/dist/fields/components/Multicheckbox.svelte

@@ -5,6 +5,9 @@
   import { onMount } 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({
@@ -92,7 +95,7 @@
   <div class="flex flex-col w-full {!isValid ? `text-danger-500` : `text-surface-900`}">
     {#each items as item, index}
       <div class="flex space-x-3 relative mt-2">
-        <input
+        <Checkbox
           on:keydown={(e) => {
             if (e.key === "Enter") {
               e.preventDefault();
@@ -101,19 +104,17 @@
           type="checkbox"
           id="input_{state_key}_{index}"
           placeholder={label}
-          class="block w-5 h-5 rounded-md text-label focus:outline-primary-400"
           name={state_key}
           bind:checked={$internal.checks[index]}
         />
-        <label for="input_{state_key}" class="block text-label {hide_label ? 'hidden' : ''}">
+
+        <Label for="input_{state_key}" class=" {hide_label ? 'hidden' : ''}">
           {item._label}
-        </label>
+        </Label>
       </div>
     {/each}
     {#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/Note.svelte

@@ -5,6 +5,10 @@
   import { onMount } from "svelte";
   import { writable } from "svelte/store";
 
+  import { Textarea } from "@stubber/ui/textarea";
+  import { Label } from "@stubber/ui/label";
+  import { Button } from "@stubber/ui/button";
+
   export let field;
 
   const internal = writable();
@@ -63,11 +67,11 @@
 
 {#if $internal}
   <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=" {hide_label ? 'hidden' : ''}">
       {label}
-    </label>
-    <div class="relative mt-2 rounded-md">
-      <textarea
+    </Label>
+    <div class="relative mt-2">
+      <Textarea
         on:keydown={(e) => {
           if (e.key === "Enter") {
             e.stopPropagation();
@@ -76,17 +80,13 @@
         rows="3"
         id="input_{state_key}"
         placeholder={label}
-        class="block w-full text-field rounded-md border-0 py-2 pl-3 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="block w-full {!isValid ? 'ring-danger-500' : 'ring-surface-300 '} "
         name={state_key}
         bind:value={$internal.raw}
       />
     </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/Number.svelte

@@ -5,6 +5,8 @@
   import { onMount } from "svelte";
   import { writable } from "svelte/store";
 
+  import { Label } from "@stubber/ui/label";
+
   export let field;
 
   const internal = writable();
@@ -110,9 +112,7 @@
       />
     </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/Radio.svelte

@@ -5,6 +5,9 @@
   import { onMount } from "svelte";
   import { writable } from "svelte/store";
 
+  import * as RadioGroup from "@stubber/ui/radio-group";
+  import { Label } from "@stubber/ui/label";
+
   export let field;
 
   const internal = writable();
@@ -83,9 +86,9 @@
 
 {#if $internal}
   <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=" {hide_label ? 'hidden' : ''}">
       {label}
-    </label>
+    </Label>
     {#if items?.length}
       <fieldset
         class="flex flex-col border {!isValid
@@ -95,22 +98,20 @@
       >
         {#each items as item}
           <div class="py-1">
-            <input
-              id="input_{item._key}"
-              name={state_key}
-              bind:group={$internal.selected_item_key}
-              type="radio"
-              value={item._key}
-            />
-            <label for="input_{item._key}" class="text-field">{item._label}</label>
+            <RadioGroup.Root bind:value={$internal.selected_item_key} name={state_key}>
+              <div class="flex items-center space-x-2">
+                <RadioGroup.Item value={item._key} id="input_{item._key}" />
+                <Label for="input_{item._key}">{item._label}</Label>
+              </div>
+
+              <RadioGroup.Input name={state_key} />
+            </RadioGroup.Root>
           </div>
         {/each}
       </fieldset>
     {/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>
 {/if}

package/dist/fields/components/Scrollandreaddisplay.svelte

@@ -5,6 +5,9 @@
   import { onMount } from "svelte";
   import { writable } from "svelte/store";
 
+  import { Label } from "@stubber/ui/label";
+  import { Checkbox } from "@stubber/ui/checkbox";
+
   export let field;
 
   const internal = writable();
@@ -93,9 +96,11 @@
     <div
       class="{!$internal.scrolled_to_bottom
         ? 'opacity-20'
-        : ''} flex space-x-3 relative mt-2 {!isValid ? 'border-b border-warning-500' : ''}"
+        : ''} flex space-x-3 relative mt-2 items-center {!isValid
+        ? 'border-b border-warning-500'
+        : ''}"
     >
-      <input
+      <Checkbox
         disabled={!$internal.scrolled_to_bottom}
         on:keydown={(e) => {
           if (e.key === "Enter") {
@@ -105,18 +110,15 @@
         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}
       />
-      <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>
     {#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/Section.svelte

@@ -1,5 +1,6 @@
 <script>
-  import _ from "lodash-es";
+  import * as Accordion from "@stubber/ui/accordion";
+  import { Label } from "@stubber/ui/label";
   import Field from "../../Field.svelte";
   import * as utils from "../../utils/index.js";
 
@@ -15,6 +16,7 @@
   $: validationMessage = $field.state?.validation?.message;
   $: collapsible = $field.spec?.params?.collapsible ?? false;
   $: fields = utils.getFieldsToRender($field.spec?.fields);
+
   $: allChildrenConditionsChecked = Object.values($form?.state || {})
     ?.filter((s) => s && s.parent_field_state_key === state_key)
     ?.reduce((acc, child_state) => {
@@ -23,42 +25,63 @@
     }, true);
 
   $: section_class = $field.spec?.params?.section_class ?? "pl-4";
-  $: label_class = $field.spec?.params?.label_class ?? "font-semibold text-primary-700 text-sm";
+  $: label_class = $field.spec?.params?.label_class ?? "font-regular text-sm";
+
+  // Hook the Accordion's value up to collapse logic
+  let accordionValue = collapsed ? "" : "item-1";
 
-  function toggleCollapsed() {
-    collapsed = !collapsed;
+  function handleValueChange(value) {
+    console.log("Accordion value changed to:", value);
+    collapsed = value !== "item-1";
   }
+
+  // Debug: Track changes in your reactive variables.
+  $: console.log("allChildrenConditionsChecked =>", allChildrenConditionsChecked);
+  $: console.log("collapsed =>", collapsed);
+  $: console.log("accordionValue =>", accordionValue);
 </script>
 
-<div class={!allChildrenConditionsChecked ? "invisible absolute" : ""}>
-  <div class="flex flex-col w-full text-surface-900">
-    <button
-      disabled={!collapsible}
-      type="button"
-      class="{collapsible ? 'hover:bg-surface-100' : ''} flex items-center justify-between"
-      on:click={toggleCollapsed}
-    >
-      <label
-        for="input_{state_key}"
-        class="block text-label {label_class} {hide_label ? 'hidden' : ''}"
-      >
-        {label}
-      </label>
-      {#if collapsible}
-        <i class="fa-regular {collapsed ? 'fa-angle-down' : 'fa-angle-up'} text-surface-500 mr-2" />
-      {/if}
-    </button>
-    <div class={collapsed ? "absolute invisible" : section_class}>
-      {#if fields}
-        {#each fields as initial_field_spec (initial_field_spec.__key)}
-          <Field {form} {initial_field_spec} parent_field={field} />
-        {/each}
-      {/if}
-    </div>
-    {#if validationMessage}
-      <p class="text-label {!isValid ? `text-danger-500` : `text-success-500`}">
-        {validationMessage}
-      </p>
-    {/if}
-  </div>
+<div class="fade-container {!allChildrenConditionsChecked ? 'fade-hidden' : ''}">
+  <Accordion.Root
+    bind:value={accordionValue}
+    on:valueChange={handleValueChange}
+    type="single"
+    {collapsible}
+    class="flex flex-col w-full text-surface-900"
+  >
+    <Accordion.Item value="item-1">
+      <Accordion.Trigger class="flex items-center justify-between py-1">
+        <Label for="input_{state_key}" class="block {label_class} {hide_label ? 'hidden' : ''}">
+          {label}
+        </Label>
+      </Accordion.Trigger>
+      <Accordion.Content class="{section_class} -pl-4 pt-2">
+        {#if fields}
+          {#each fields as initial_field_spec (initial_field_spec.__key)}
+            <Field {form} {initial_field_spec} parent_field={field} />
+          {/each}
+        {/if}
+
+        {#if validationMessage}
+          <Label class={!isValid ? `text-danger-500` : `text-success-500`}
+            >{validationMessage}</Label
+          >
+        {/if}
+      </Accordion.Content>
+    </Accordion.Item>
+  </Accordion.Root>
 </div>
+
+<style>
+  /* 
+    1. .fade-container: By default visible, but transitions changes in opacity.
+    2. .fade-hidden: Sets opacity to 0, so it fades out over 0.3s.
+  */
+  .fade-container {
+    transition: opacity 0.5s ease-in-out;
+    opacity: 1; /* fully visible by default */
+  }
+  .fade-hidden {
+    opacity: 0; /* hidden via fade */
+  }
+</style>

package/dist/fields/components/Select.svelte

@@ -6,6 +6,8 @@
   import { writable } from "svelte/store";
   import * as utils from "../../utils/index.js";
 
+  import { Label } from "@stubber/ui/label";
+
   export let field;
 
   const internal = writable();
@@ -183,9 +185,12 @@
         type="select"
         id="input_{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'}"
         name={state_key}
         bind:value={filter_text}
         autocomplete="off"
@@ -197,22 +202,27 @@
     {#if is_focused}
       <div use:teleport class="z-10 w-full inset-y-[70px]">
         <ul
-          class="items 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 filteritems as item, index (item._key)}
-            <li
-              class="group {$internal.focused_index === index
-                ? 'bg-primary-400'
-                : ''} hover:bg-primary-400 focus-within:bg-primary-400 text-field cursor-default"
-            >
+            <li class="group {$internal.focused_index === index ? 'bg-primary-400' : ''} ">
               <button
                 type="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._key === $internal?.selected_item_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>
@@ -221,9 +231,7 @@
       </div>
     {/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>
 {/if}

package/dist/fields/components/Signature.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;
 
@@ -123,9 +126,9 @@
 
 {#if $internal}
   <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=" {hide_label ? 'hidden' : ''}">
       {label}
-    </label>
+    </Label>
     <div bind:this={canvasContainer}>
       <canvas
         bind:this={pad}
@@ -134,20 +137,12 @@
         width={canvasWidth}
         height={200}
       />
-      <div class="mt-0 text-sm">
-        <button
-          on:click={clear}
-          type="button"
-          class="text-surface-500 text-sm hover:text-surface-700"
-        >
-          Clear
-        </button>
+      <div class="mt-1">
+        <Button variant="ghost" on:click={clear} type="button">Clear</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}