@kanda-libs/ks-component-ts 0.2.477 → 0.2.478

package/dist/library.css

@@ -2572,6 +2572,10 @@ input[type="number"]::-webkit-inner-spin-button,
   padding: 10px;
 }
 
+.p-5 {
+  padding: 20px;
+}
+
 .p-8 {
   padding: 32px;
 }
@@ -2636,6 +2640,11 @@ input[type="number"]::-webkit-inner-spin-button,
   padding-right: 32px;
 }
 
+.px-1 {
+  padding-left: 4px;
+  padding-right: 4px;
+}
+
 .py-2\.5 {
   padding-top: 10px;
   padding-bottom: 10px;
@@ -2661,11 +2670,6 @@ input[type="number"]::-webkit-inner-spin-button,
   padding-right: 10px;
 }
 
-.px-5 {
-  padding-left: 20px;
-  padding-right: 20px;
-}
-
 .px-6 {
   padding-left: 24px;
   padding-right: 24px;
@@ -2686,11 +2690,6 @@ input[type="number"]::-webkit-inner-spin-button,
   padding-right: 6px;
 }
 
-.px-1 {
-  padding-left: 4px;
-  padding-right: 4px;
-}
-
 .py-8 {
   padding-top: 32px;
   padding-bottom: 32px;

package/package.json

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

package/src/components/FormTheme/index.tsx

@@ -10,13 +10,18 @@ export interface FormThemeProps {
 }
 
 const FormTheme: FunctionComponent<FormThemeProps> = function ({
-  variant,
+  variant = "default",
   children,
 }) {
   const theme = variant ? FORM_THEME_VARIANTS[variant] : DEFAULT_THEME;
 
   return (
-    <FormThemeContext.Provider value={theme}>
+    <FormThemeContext.Provider
+      value={{
+        ...theme,
+        variant,
+      }}
+    >
       {children}
     </FormThemeContext.Provider>
   );

package/src/field/components/PhoneNumberInput/PhoneNumberInputUncontrolled/PhoneNumberInputUncontrolled.tsx

@@ -55,4 +55,4 @@ const PhoneNumberInputUncontrolled: FunctionComponent<PhoneNumberInputUncontroll
     );
   };
 
-export default (PhoneNumberInputUncontrolled);
+export default PhoneNumberInputUncontrolled;

package/src/field/components/PhoneNumberInput/PhoneNumberInputUncontrolled/usePhoneNumberInputUncontrolled.ts

@@ -35,6 +35,7 @@ export default function usePhoneNumberInputUncontrolled({
     focusClasses,
     makeErrorClasses,
     skeletonClasses,
+    variant,
   } = useFormTheme();
 
   const classNames = useClasses(CLASS_NAMES, {
@@ -48,8 +49,11 @@ export default function usePhoneNumberInputUncontrolled({
       initialClassName,
     ],
     select: [baseClasses, paddingClasses, focusClasses, ".select"],
-    code: [paddingClasses, ".code"],
+    code: [paddingClasses, variant === "inline" ? ".inlineCode" : ".code"],
     phoneInput: [baseClasses, paddingClasses, focusClasses, ".phoneInput"],
+    selectWrapper: [
+      variant === "inline" ? ".selectWrapper.inline" : ".selectWrapper.default",
+    ],
   });
 
   const code = useWatch({ name: name as string, defaultValue });

package/src/field/components/PhoneNumberInput/constants.ts

@@ -1,11 +1,15 @@
 export const CLASS_NAMES = {
   container: "group invalid:text-neutral-400 overflow-hidden",
-  selectWrapper: "flex min-w-16 border-r border-neutral-300",
+  selectWrapper: {
+    default: "flex min-w-16 border-r border-neutral-300",
+    inline: "flex min-w-10 border-r border-neutral-300",
+  },
   select:
     "!text-style-g-em !text-neutral-600 appearance-none bg-select-chevron focus:bg-select-chevron-active bg-no-repeat bg-right-4 invalid:text-neutral-400 overflow-hidden !border-0 !bg-transparent",
   country:
     "!text-style-g-em !text-neutral-600 appearance-none invalid:text-neutral-400 overflow-hidden !border-0 !bg-transparent m-auto",
   code: "!pr-0 my-auto flex cursor-text",
+  inlineCode: "px-1 my-auto flex cursor-text",
   phoneInput: "!border-0 !bg-transparent",
 };