@kalink-ui/seedly 0.30.1 → 0.32.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @kalink-ui/seedly
 
+## 0.32.0
+
+### Minor Changes
+
+- 40a1dbe: Add proper styling solution for form field component
+
+## 0.31.0
+
+### Minor Changes
+
+- 0afb723: feat(seedly/form-field): switch to theme contract and export vars
+  - Replace createGlobalTheme with createThemeContract + assignVars for FormField.
+  - Export formFieldVars from the FormField module's index for external theming.
+
 ## 0.30.1
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kalink-ui/seedly",
-  "version": "0.30.1",
+  "version": "0.32.0",
   "description": "A set of components for building UIs with React and TypeScript",
   "sideEffects": false,
   "license": "MIT",
@@ -43,8 +43,8 @@
     "vite": "^6.3.5",
     "vite-tsconfig-paths": "^5.1.4",
     "vitest": "^3.2.3",
-    "@kalink-ui/typescript-config": "0.4.0",
-    "@kalink-ui/eslint-config": "0.10.0"
+    "@kalink-ui/eslint-config": "0.10.0",
+    "@kalink-ui/typescript-config": "0.4.0"
   },
   "peerDependencies": {
     "@vanilla-extract/css": "^1.17.1",

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/form-field/form-field.css.ts

@@ -1,20 +1,18 @@
-import { createGlobalTheme, style } from '@vanilla-extract/css';
+import { assignVars, createThemeContract, style } from '@vanilla-extract/css';
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
 
 import { sys, typography } from '../../styles';
 import { components } from '../../styles/layers.css';
 
-export const formFieldVars = createGlobalTheme(':root', {
-  '@layer': components,
-
+export const formFieldVars = createThemeContract({
   spacing: {
-    vertical: sys.spacing[2],
+    vertical: null,
   },
 
   color: {
-    foreground: sys.color.foreground,
-    background: sys.color.background,
-    outline: sys.color.foreground,
+    foreground: null,
+    background: null,
+    outline: null,
   },
 });
 
@@ -31,6 +29,18 @@ export const formFieldStyle = recipe({
 
         color: formFieldVars.color.foreground,
 
+        vars: {
+          ...assignVars(formFieldVars.color, {
+            foreground: sys.color.foreground,
+            background: sys.color.background,
+            outline: sys.color.foreground,
+          }),
+
+          ...assignVars(formFieldVars.spacing, {
+            vertical: sys.spacing[2],
+          }),
+        },
+
         selectors: {
           '&:disabled, &:has(:disabled)': {
             cursor: 'not-allowed',

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

@@ -1,6 +1,6 @@
 export { useFormFieldContext } from './form-field-context';
 export { useFormFieldItemContext } from './form-field-item-context';
-export { formFieldStyle } from './form-field.css';
+export { formFieldStyle, formFieldVars } from './form-field.css';
 export { FormFieldControl } from './form-field-control';
 export { FormFieldDescription } from './form-field-description';
 export { FormFieldError } from './form-field-error';

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>