@kalink-ui/seedly 0.31.0 → 0.32.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @kalink-ui/seedly
 
+## 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.0",
   "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/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>