@stubber/form-fields 1.0.10 → 1.0.11

package/dist/fields/components/Contactselector.svelte

@@ -279,7 +279,7 @@
                flex h-7 w-full items-center justify-between rounded px-3 py-2
                text-sm focus:outline-none
                [&>span]:line-clamp-1 aria-[invalid]:border-destructive
-               placeholder:text-black
+               placeholder:text-muted-foreground
                {!isValid ? 'ring-danger-500' : 'ring-surface-300 focus:ring-transparent'}"
         bind:value={filter_text}
         autocomplete="off"

package/dist/fields/components/Currency.svelte

@@ -183,12 +183,13 @@
       {label}
     </Label>
     <div
-      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'} "
+      class="w-full flex items-center gap-2 border-input bg-white bg-opacity-[15] ring-offset-background placeholder:text-muted-foreground focus-within:ring-ring h-10 rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 {!isValid
+        ? 'focus-within:ring-danger-500'
+        : 'ring-surface-300'}"
+      style="box-shadow: inset 0px 16px 16px -16px rgba(0, 0, 0, 0.1333);"
     >
-      <div class="pointer-events-none flex items-center pl-3">
-        <span class="text-label text-surface-600">
+      <div class="pointer-events-none flex items-center pl-2">
+        <span class="text-sm text-surface-600">
           {getSymbolFromCurrency($internal?.currencycode)}
         </span>
       </div>
@@ -198,10 +199,10 @@
             e.preventDefault();
           }
         }}
+        class="w-full focus-within:outline-none"
         use:inputRegexMask={currencyRegex}
         id="input_{state_key}"
         placeholder={label}
-        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}

package/dist/fields/components/Dataindication.svelte

@@ -2,6 +2,7 @@
   import _ from "lodash-es";
 
   import { Label } from "@stubber/ui/label";
+  import { Input } from "@stubber/ui/input";
 
   export let field;
 
@@ -18,16 +19,8 @@
   <Label for="input_{state_key}" class="block {hide_label ? 'hidden' : ''}">
     {label}
   </Label>
-  <div class="relative mt-2 rounded-md">
-    <div
-      class="bg-gradient-to-b from-[#2727271F] to-[#27272719] shadow-select flex items-center h-7 w-full rounded px-3 py-2 text-sm focus:outline-none placeholder:text-black"
-    >
-      {#if value_is_string}
-        {value}
-      {:else}
-        <pre>{value}</pre>
-      {/if}
-    </div>
+  <div class="relative mt-2 rounded-md bg-surface-100 p-2">
+    <pre class="rounded-md">{value}</pre>
   </div>
 
   {#if validationMessage}

package/dist/fields/components/Date.svelte

@@ -80,9 +80,10 @@
         type="date"
         id="input_{state_key}"
         placeholder={label}
-        class="bg-gradient-to-b from-[#2727271F] to-[#27272719] shadow-select block h-7 w-full rounded px-3 py-2 text-sm focus:outline-none
-         placeholder:text-black
-         {!isValid ? 'ring-danger-500' : 'ring-surface-300 focus:ring-transparent'}"
+        class="block w-full border-input bg-white bg-opacity-[15] ring-0 ring-offset-background focus-visible:ring-ring h-10 rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50
+         {!isValid ? 'ring-danger-500' : 'ring-surface-300'}
+         {$internal?.raw ? 'text-surface-900' : 'text-muted-foreground'}"
+        style="box-shadow: inset 0px 16px 16px -16px rgba(0, 0, 0, 0.1333);"
         name={state_key}
         bind:value={$internal.raw}
       />

package/dist/fields/components/Datetime.svelte

@@ -80,9 +80,10 @@
         type="datetime-local"
         id="input_{state_key}"
         placeholder={label}
-        class="bg-gradient-to-b from-[#2727271F] to-[#27272719] shadow-select block h-7 w-full rounded px-3 py-2 text-sm focus:outline-none
-         placeholder:text-black
-         {!isValid ? 'ring-danger-500' : 'ring-surface-300 focus:ring-transparent'}"
+        class="block w-full border-input bg-white bg-opacity-[15] ring-0 ring-offset-background focus-visible:ring-ring h-10 rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50
+         {!isValid ? 'ring-danger-500' : 'ring-surface-300'}
+         {$internal?.raw ? 'text-surface-900' : 'text-muted-foreground'}"
+        style="box-shadow: inset 0px 16px 16px -16px rgba(0, 0, 0, 0.1333);"
         name={state_key}
         bind:value={$internal.raw}
       />

package/dist/fields/components/Email.svelte

@@ -111,9 +111,7 @@
         type="text"
         id="input_{state_key}"
         placeholder={label}
-        class="block w-full placeholder:opacity-30 {!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}
       />

package/dist/fields/components/Note.svelte

@@ -80,9 +80,7 @@
         rows="3"
         id="input_{state_key}"
         placeholder={label}
-        class="block w-full placeholder:opacity-30 {!isValid
-          ? 'ring-danger-500'
-          : 'ring-surface-300 '} "
+        class="block w-full {!isValid ? 'ring-danger-500' : 'ring-surface-300 '} "
         name={state_key}
         bind:value={$internal.raw}
       />

package/dist/fields/components/Number.svelte

@@ -102,7 +102,7 @@
         type="number"
         id="input_{state_key}"
         placeholder={label}
-        class="block w-full placeholder:opacity-30 {!isValid
+        class="block w-full {!isValid
           ? 'ring-danger-500'
           : 'ring-surface-300 focus:ring-primary-400'} "
         name={state_key}

package/dist/fields/components/Qrcodescanner.svelte

@@ -7,7 +7,7 @@
   import { fade } from "svelte/transition";
   import { Html5Qrcode } from "html5-qrcode";
   import { Button } from "@stubber/ui/button";
-
+  import { Input } from "@stubber/ui/input";
   import { Label } from "@stubber/ui/label";
 
   export let field;
@@ -170,20 +170,20 @@
     <div class="relative mt-2 rounded-md">
       <div class="flex items-center space-x-3">
         {#if $internal.raw}
-          <input
+          <Input
             readonly
             type="text"
             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"
             name={state_key}
             value={$internal.raw}
           />
         {/if}
         <div class="shrink-0">
-          <Button icon="camera" label="Scan code" on:click={openScannerModal} />
+          <Button on:click={openScannerModal}>
+            <i class="fa-solid fa-qrcode" />
+            Scan Code
+          </Button>
         </div>
       </div>
     </div>

package/dist/fields/components/Select.svelte

@@ -190,7 +190,7 @@
                flex h-7 w-full items-center justify-between rounded px-3 py-2
                text-sm focus:outline-none
                [&>span]:line-clamp-1 aria-[invalid]:border-destructive
-               placeholder:text-black
+               placeholder:text-muted-foreground
                {!isValid ? 'ring-danger-500' : 'ring-surface-300 focus:ring-transparent'}"
         name={state_key}
         bind:value={filter_text}

package/dist/fields/components/Selectresource.svelte

@@ -236,7 +236,7 @@
                flex h-7 w-full items-center justify-between rounded px-3 py-2
                text-sm focus:outline-none
                [&>span]:line-clamp-1 aria-[invalid]:border-destructive
-               placeholder:text-black
+               placeholder:text-muted-foreground
                {!isValid ? 'ring-danger-500' : 'ring-surface-300 focus:ring-transparent'}"
         bind:value={filter_text}
         autocomplete="off"

package/dist/fields/components/SmartText.svelte

@@ -290,7 +290,7 @@
   .stubber-cm :global(.cm-editor.cm-focused) {
     outline: none;
     border-width: 1px;
-    border-color: var(--ring);
+    border-color: hsl(var(--input) / var(--tw-border-opacity, 1));
   }
 
   .stubber-cm.stubber-valid :global(.cm-editor.cm-focused) {
@@ -318,18 +318,10 @@
   }
 
   .stubber-cm :global(.cm-editor .cm-placeholder) {
-    color: var(--muted-foreground, rgb(165 169 173));
+    color: hsl(var(--muted-foreground) / var(--tw-text-opacity, 1));
   }
 
   .stubber-cm :global(.curly-braces-highlight) {
     color: rgb(9 103 210);
   }
-
-  /* CSS Custom Properties */
-  :root {
-    --ring: rgb(98, 98, 98);
-    --muted-foreground: rgb(165 169 173);
-    --input: 214.3 31.8% 91.4%;
-    --border: 214.3 31.8% 91.4%;
-  }
 </style>

package/dist/fields/components/Telephone.svelte

@@ -141,12 +141,10 @@
         bind:value={$internal.raw}
         type="tel"
         id="input_{state_key}"
-        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'}"
+        class="w-full pl-12 border-input bg-white bg-opacity-[15] ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring h-10 rounded-md border py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 {!isValid
+          ? 'ring-danger-500'
+          : 'ring-surface-300'}"
+        style="box-shadow: inset 0px 16px 16px -16px rgba(0, 0, 0, 0.1333);"
       />
     </div>
     {#if validationMessage}

package/dist/fields/components/Text.svelte

@@ -93,9 +93,7 @@
         type="text"
         id="input_{state_key}"
         placeholder={label}
-        class="block w-full placeholder:opacity-30 {!isValid
-          ? 'ring-danger-500'
-          : 'ring-surface-300 '} "
+        class="block w-full {!isValid ? 'ring-danger-500' : 'ring-surface-300 '}"
         name={state_key}
         bind:value={$internal.raw}
       />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stubber/form-fields",
-  "version": "1.0.10",
+  "version": "1.0.11",
   "description": "An automatic form builder based on field specifications",
   "keywords": [
     "components",