@kalink-ui/seedly 0.31.0 → 0.32.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @kalink-ui/seedly
 
+## 0.32.1
+
+### Patch Changes
+
+- 9d3abfd: Add proper styling solution for Input component
+
+## 0.32.0
+
+### Minor Changes
+
+- 40a1dbe: Add proper styling solution for form field component
+
 ## 0.31.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kalink-ui/seedly",
-  "version": "0.31.0",
+  "version": "0.32.1",
   "description": "A set of components for building UIs with React and TypeScript",
   "sideEffects": false,
   "license": "MIT",

package/src/components/form-field/form-field-item.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { PolymorphicComponentProps } from '@kalink-ui/dibbly';
+import { clsx } from 'clsx';
 import { ElementType, useId } from 'react';
 
 import { useFormFieldContext } from './form-field-context';
@@ -20,7 +21,13 @@ export function FormFieldItem<TUse extends ElementType = 'div'>(
 
   return (
     <FormFieldItemContextProvider value={{ id }}>
-      <Comp className={formFieldStyle({ error: !!errors, disabled })} {...rest}>
+      <Comp
+        className={clsx(
+          formFieldStyle({ error: !!errors, disabled }),
+          className,
+        )}
+        {...rest}
+      >
         {children}
       </Comp>
     </FormFieldItemContextProvider>

package/src/components/input/input.css.ts

@@ -1,26 +1,30 @@
-import { style, globalStyle, createGlobalTheme } from '@vanilla-extract/css';
+import {
+  style,
+  globalStyle,
+  createThemeContract,
+  assignVars,
+  fallbackVar,
+} from '@vanilla-extract/css';
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
 
 import { sys, transition, typography } from '../../styles';
 import { components } from '../../styles/layers.css';
+import { formFieldVars } from '../form-field';
 
-export const inputVars = createGlobalTheme(':root', {
-  '@layer': components,
-
+export const inputVars = createThemeContract({
   color: {
-    foreground: 'inherit',
-    background: sys.color.background,
-    outline: sys.color.foreground,
-    error: 'red',
+    foreground: null,
+    background: null,
+    outline: null,
   },
 
   spacing: {
-    block: sys.spacing[2],
-    inline: sys.spacing[4],
+    block: null,
+    inline: null,
   },
 
   shape: {
-    corner: sys.shape.corner.none,
+    corner: null,
   },
 });
 
@@ -34,7 +38,7 @@ export const inputAppearance = recipe({
 
           color: inputVars.color.foreground,
 
-          backgroundColor: 'transparent',
+          backgroundColor: inputVars.color.background,
           borderRadius: inputVars.shape.corner,
 
           cursor: 'inherit',
@@ -63,17 +67,39 @@ export const inputAppearance = recipe({
 
             '&[aria-invalid], &:has([aria-invalid])': {
               vars: {
-                [inputVars.color.foreground]: 'red',
+                [inputVars.color.foreground]: fallbackVar(
+                  formFieldVars.color.foreground,
+                  'red',
+                ),
               },
             },
           },
 
           vars: {
-            [inputVars.color.foreground]: sys.color.foreground,
-            [inputVars.color.background]: sys.color.background,
-            [inputVars.color.outline]: inputVars.color.foreground,
-            [inputVars.spacing.block]: sys.spacing[2],
-            [inputVars.spacing.inline]: sys.spacing[4],
+            ...assignVars(inputVars.color, {
+              foreground: fallbackVar(
+                formFieldVars.color.foreground,
+                sys.color.foreground,
+              ),
+              background: fallbackVar(
+                formFieldVars.color.background,
+                sys.color.background,
+                'transparent',
+              ),
+              outline: fallbackVar(
+                formFieldVars.color.outline,
+                sys.color.foreground,
+              ),
+            }),
+
+            ...assignVars(inputVars.spacing, {
+              block: sys.spacing[2],
+              inline: sys.spacing[4],
+            }),
+
+            ...assignVars(inputVars.shape, {
+              corner: sys.shape.corner.none,
+            }),
           },
         },
       },
@@ -127,8 +153,10 @@ export const inputAppearance = recipe({
               fontSize: `max(16px, ${sys.typography.body.small.size})`,
 
               vars: {
-                [inputVars.spacing.block]: sys.spacing[1],
-                [inputVars.spacing.inline]: sys.spacing[1],
+                ...assignVars(inputVars.spacing, {
+                  block: sys.spacing[1],
+                  inline: sys.spacing[1],
+                }),
               },
             },
           },
@@ -146,8 +174,10 @@ export const inputAppearance = recipe({
               fontSize: `max(16px, ${sys.typography.body.medium.size})`,
 
               vars: {
-                [inputVars.spacing.block]: sys.spacing[2],
-                [inputVars.spacing.inline]: sys.spacing[2],
+                ...assignVars(inputVars.spacing, {
+                  block: sys.spacing[2],
+                  inline: sys.spacing[2],
+                }),
               },
             },
           },
@@ -165,8 +195,10 @@ export const inputAppearance = recipe({
               fontSize: `max(16px, ${sys.typography.body.large.size})`,
 
               vars: {
-                [inputVars.spacing.block]: sys.spacing[3],
-                [inputVars.spacing.inline]: sys.spacing[3],
+                ...assignVars(inputVars.spacing, {
+                  block: sys.spacing[3],
+                  inline: sys.spacing[3],
+                }),
               },
             },
           },
@@ -217,7 +249,6 @@ export const input = style({
       paddingBottom: 0,
 
       color: 'inherit',
-
       border: 'none',
       backgroundColor: 'transparent',
       cursor: 'inherit',

package/src/components/select/index.ts

@@ -3,3 +3,4 @@ export { Select } from './select';
 export { SelectItem } from './select-item';
 export { SelectRoot } from './select-root';
 export { SelectTrigger } from './select-trigger';
+export { selectStyle } from './select.css';

package/src/components/select/select.css.ts

@@ -0,0 +1,3 @@
+import { style } from '@vanilla-extract/css';
+
+export const selectStyle = style({});

package/src/components/select/select.tsx

@@ -1,4 +1,5 @@
 import { Value } from '@radix-ui/react-select';
+import { clsx } from 'clsx';
 import { ComponentPropsWithoutRef, ComponentPropsWithRef } from 'react';
 
 import {
@@ -14,6 +15,7 @@ import { InputAppearanceVariants } from '../input';
 import { SelectContent } from './select-content';
 import { SelectRoot } from './select-root';
 import { SelectTrigger } from './select-trigger';
+import { selectStyle } from './select.css';
 
 export type SelectProps = ComponentPropsWithoutRef<typeof SelectRoot> &
   Pick<ComponentPropsWithoutRef<typeof Value>, 'placeholder'> &
@@ -29,6 +31,7 @@ export type SelectProps = ComponentPropsWithoutRef<typeof SelectRoot> &
     hideLabel?: boolean;
     errors: string;
     hideErrorMessage?: boolean;
+    className?: string;
   };
 
 export function Select({
@@ -47,6 +50,7 @@ export function Select({
   required,
   size = 'md',
   ref,
+  className,
   ...props
 }: SelectProps) {
   return (
@@ -58,7 +62,7 @@ export function Select({
       disabled={disabled}
       hideLabel={hideLabel}
     >
-      <FormFieldItem>
+      <FormFieldItem className={clsx(selectStyle, className)}>
         <FormFieldLabel required={required} disabled={disabled} size={size}>
           {label}
         </FormFieldLabel>

package/src/components/text-field/index.ts

@@ -1 +1,2 @@
 export { TextField } from './text-field';
+export { textFieldStyle } from './text-field.css';

package/src/components/text-field/text-field.tsx

@@ -1,5 +1,7 @@
 'use client';
 
+import { clsx } from 'clsx';
+
 import {
   FormField,
   FormFieldControl,
@@ -10,6 +12,8 @@ import {
 } from '../form-field';
 import { Input, InputProps } from '../input';
 
+import { textFieldStyle } from './text-field.css';
+
 export type TextFieldProps = InputProps & {
   name: string;
   label: string;
@@ -30,6 +34,7 @@ export function TextField({
   required,
   hideErrorMessage = false,
   size = 'md',
+  className,
   ...rest
 }: TextFieldProps) {
   return (
@@ -41,7 +46,7 @@ export function TextField({
       disabled={disabled}
       hideLabel={hideLabel}
     >
-      <FormFieldItem>
+      <FormFieldItem className={clsx(textFieldStyle, className)}>
         <FormFieldLabel required={required} disabled={disabled} size={size}>
           {label}
         </FormFieldLabel>

package/src/components/textarea/index.ts

@@ -1 +1,2 @@
 export { Textarea } from './textarea';
+export { textareaStyle } from './textarea.css';

package/src/components/textarea/textarea.css.ts

@@ -2,6 +2,8 @@ import { style } from '@vanilla-extract/css';
 
 import { inputAppearance } from '../input';
 
+export const textareaStyle = style({});
+
 export const textarea = style([
   inputAppearance(),
   {

package/src/components/textarea/textarea.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { clsx } from 'clsx';
 import { TextareaHTMLAttributes } from 'react';
 
 import {
@@ -13,6 +14,7 @@ import {
 import { InputProps } from '../input';
 
 import { TextareaInput } from './textarea-input';
+import { textareaStyle } from './textarea.css';
 
 export type TextareaProps = TextareaHTMLAttributes<HTMLTextAreaElement> &
   InputProps & {
@@ -46,7 +48,7 @@ export function Textarea({
       disabled={disabled}
       hideLabel={hideLabel}
     >
-      <FormFieldItem>
+      <FormFieldItem className={clsx(textareaStyle, className)}>
         <FormFieldLabel disabled={disabled} required={required} size={size}>
           {label}
         </FormFieldLabel>