@kanda-libs/ks-component-ts 0.2.338 → 0.2.340

package/dist/library.css

@@ -1543,10 +1543,6 @@ input[type="number"]::-webkit-inner-spin-button,
   height: 32px;
 }
 
-.h-12 {
-  height: 48px;
-}
-
 .h-5\/6 {
   height: 83.333333%;
 }
@@ -1555,6 +1551,10 @@ input[type="number"]::-webkit-inner-spin-button,
   height: 320px;
 }
 
+.h-12 {
+  height: 48px;
+}
+
 .h-52 {
   height: 208px;
 }
@@ -1619,6 +1619,26 @@ input[type="number"]::-webkit-inner-spin-button,
   min-height: 120px;
 }
 
+.min-h-12 {
+  min-height: 48px;
+}
+
+.min-h-6 {
+  min-height: 24px;
+}
+
+.min-h-5 {
+  min-height: 20px;
+}
+
+.min-h-7 {
+  min-height: 28px;
+}
+
+.min-h-4 {
+  min-height: 16px;
+}
+
 .min-h-20 {
   min-height: 80px;
 }
@@ -1796,6 +1816,14 @@ input[type="number"]::-webkit-inner-spin-button,
   min-width: 24px;
 }
 
+.min-w-7 {
+  min-width: 28px;
+}
+
+.min-w-4 {
+  min-width: 16px;
+}
+
 .min-w-36 {
   min-width: 144px;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kanda-libs/ks-component-ts",
-  "version": "0.2.338",
+  "version": "0.2.340",
   "description": "Kanda form component library",
   "main": "dist/index.esm.js",
   "module": "dist/index.esm.js",

package/src/components/FormTheme/constants.ts

@@ -24,6 +24,30 @@ export const DEFAULT_THEME = {
   },
 };
 
+export const BORDERED_THEME = {
+  fieldWrapper: "Default" as FieldWrapperType,
+  baseClasses:
+    "rounded-lg flex w-full bg-neutral-000 border border-neutral-300 caret-turquoise-300",
+  inputClasses:
+    "text-style-g text-neutral-900 placeholder-neutral-600 text-base md:text-sm",
+  focusClasses:
+    "border-solid border-transparent focus:outline-none focus:border-turquoise-300 focus:bg-neutral-000",
+  focusWithinClasses:
+    "border-solid border-transparent focus-within:outline-none focus-within:border-turquoise-300 focus-within:bg-neutral-000",
+  paddingClasses: "px-4 py-3.25",
+  skeletonClasses: "w-2/6",
+  placeholderClasses: "px-4 pt-1",
+  makeErrorClasses: (error?: string) =>
+    error ? "border-solid border border-red-200" : "",
+  wrapperClasses: {
+    baseContainer: "flex flex-col mb-6 text-left",
+    error: "mt-2 text-style-h text-red-200",
+    warning: "mt-2 text-style-h text-neutral-600",
+    label: "w-full text-style-h-em text-neutral-600 mb-2",
+    helperText: "whitespace-nowrap text-style-h text-neutral-500",
+  },
+};
+
 export const DEFAULT_WHITE_THEME = {
   fieldWrapper: "Default" as FieldWrapperType,
   baseClasses:
@@ -342,6 +366,7 @@ const PERCENTAGE_INCREMENT_THEME = {
 
 enum Variants {
   DEFAULT = "default",
+  BORDERED = "bordered",
   DEFAULT_WHITE = "default-white",
   CLEAN = "clean",
   NARROW = "narrow",
@@ -362,6 +387,7 @@ enum Variants {
 
 export const VARIANTS: StringIndexedObject<string> = {
   DEFAULT: Variants.DEFAULT,
+  BORDERED: Variants.BORDERED,
   DEFAULT_WHITE: Variants.DEFAULT_WHITE,
   CLEAN: Variants.CLEAN,
   NARROW: Variants.NARROW,
@@ -382,6 +408,7 @@ export const VARIANTS: StringIndexedObject<string> = {
 
 export const FORM_THEME_VARIANTS: StringIndexedObject<Theme> = {
   [VARIANTS.DEFAULT]: DEFAULT_THEME,
+  [VARIANTS.BORDERED]: BORDERED_THEME,
   [VARIANTS.DEFAULT_WHITE]: DEFAULT_WHITE_THEME,
   [VARIANTS.CLEAN]: CLEAN_THEME,
   [VARIANTS.NARROW]: NARROW_THEME,

package/src/field/components/FileInput/JobPdfFileCard/constants.ts

@@ -18,7 +18,7 @@ export const CLASS_NAMES = {
     progress:
       "absolute bg-turquoise-300 h-full opacity-10 z-0 transition-width transition-slowest ease",
     bottom:
-      "relative border border-t-0 rounded-b-xl border-neutral-200 bg-neutral-000 h-12 overflow-hidden",
+      "relative border border-t-0 rounded-b-xl border-neutral-200 bg-neutral-000 min-h-12 overflow-hidden",
     padding: "flex flex-row justify-between px-3 py-2.5",
   },
   small: {
@@ -29,7 +29,7 @@ export const CLASS_NAMES = {
     progress:
       "absolute bg-turquoise-300 h-full opacity-10 z-0 transition-width transition-slowest ease",
     bottom:
-      "relative border border-t-0 rounded-b-xl border-neutral-200 bg-neutral-000 h-12 overflow-hidden",
+      "relative border border-t-0 rounded-b-xl border-neutral-200 bg-neutral-000 min-h-12 overflow-hidden",
     padding: "flex flex-row justify-between px-3 py-2.5",
   },
 };
@@ -40,18 +40,19 @@ export const ICONS = {
       icon: "file",
       stroke: "turquoise-300",
       size: 24,
-      className: "mr-4",
+      className: "mr-4 min-w-6 min-h-6",
     },
     progress: {
       icon: "load",
       stroke: "neutral-500",
       size: 20,
-      className: "animate-spin ml-2 my-auto",
+      className: "animate-spin ml-2 my-auto min-w-5 min-h-5",
     },
     delete: {
       icon: "remove",
       stroke: "neutral-600",
       size: 28,
+      className: "min-w-7 min-h-7",
     },
   },
   small: {
@@ -59,18 +60,19 @@ export const ICONS = {
       icon: "file",
       stroke: "turquoise-300",
       size: 20,
-      className: "mr-3",
+      className: "mr-3 min-w-5 min-h-5",
     },
     progress: {
       icon: "load",
       stroke: "neutral-500",
       size: 16,
-      className: "animate-spin ml-2 my-auto",
+      className: "animate-spin ml-2 my-auto min-w-4 min-h-4",
     },
     delete: {
       icon: "remove",
       stroke: "neutral-600",
       size: 28,
+      className: "min-w-7 min-h-7",
     },
   },
 };