@opensaas/stack-ui 0.1.0 → 0.1.1

package/dist/components/fields/JsonField.js

@@ -0,0 +1,57 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useMemo } from 'react';
+import { Textarea } from '../../primitives/textarea.js';
+import { Label } from '../../primitives/label.js';
+import { cn } from '../../lib/utils.js';
+export function JsonField({ name, value, onChange, label, placeholder = 'Enter JSON data...', error, disabled, required, mode = 'edit', rows = 8, formatted = true, }) {
+    // Track the string being edited separately from the prop value
+    const [editingValue, setEditingValue] = useState(null);
+    const [parseError, setParseError] = useState();
+    // Compute the display value - either what's being edited or the prop value
+    const displayValue = useMemo(() => {
+        if (editingValue !== null) {
+            return editingValue;
+        }
+        try {
+            return value !== undefined && value !== null
+                ? JSON.stringify(value, null, formatted ? 2 : 0)
+                : '';
+        }
+        catch {
+            return '';
+        }
+    }, [value, formatted, editingValue]);
+    const handleChange = (text) => {
+        setEditingValue(text);
+        // Try to parse and update value
+        if (text.trim() === '') {
+            // Empty string - treat as null/undefined
+            onChange(undefined);
+            setParseError(undefined);
+            return;
+        }
+        try {
+            const parsed = JSON.parse(text);
+            onChange(parsed);
+            setParseError(undefined);
+        }
+        catch (e) {
+            // Invalid JSON - set error but don't update value
+            if (e instanceof Error) {
+                setParseError(`Invalid JSON: ${e.message}`);
+            }
+            else {
+                setParseError('Invalid JSON');
+            }
+        }
+    };
+    const handleBlur = () => {
+        // Clear editing state on blur
+        setEditingValue(null);
+    };
+    if (mode === 'read') {
+        return (_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-muted-foreground", children: label }), _jsx("pre", { className: "text-sm bg-muted rounded-md p-3 overflow-x-auto", children: displayValue || '-' })] }));
+    }
+    return (_jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { htmlFor: name, children: [label, required && _jsx("span", { className: "text-destructive ml-1", children: "*" })] }), _jsx(Textarea, { id: name, name: name, value: displayValue, onChange: (e) => handleChange(e.target.value), onBlur: handleBlur, placeholder: placeholder, disabled: disabled, required: required, rows: rows, className: cn('font-mono text-sm', (error || parseError) && 'border-destructive') }), parseError && _jsx("p", { className: "text-sm text-amber-600", children: parseError }), error && _jsx("p", { className: "text-sm text-destructive", children: error })] }));
+}

package/dist/components/fields/index.d.ts

@@ -5,9 +5,12 @@ export { SelectField } from './SelectField.js';
 export { TimestampField } from './TimestampField.js';
 export { PasswordField } from './PasswordField.js';
 export { RelationshipField } from './RelationshipField.js';
+export { JsonField } from './JsonField.js';
 export { ComboboxField } from './ComboboxField.js';
 export { RelationshipManager } from './RelationshipManager.js';
 export { FieldRenderer } from './FieldRenderer.js';
+export { FileField } from './FileField.js';
+export { ImageField } from './ImageField.js';
 export { fieldComponentRegistry, registerFieldComponent, getFieldComponent } from './registry.js';
 export type { TextFieldProps } from './TextField.js';
 export type { IntegerFieldProps } from './IntegerField.js';
@@ -16,8 +19,11 @@ export type { SelectFieldProps } from './SelectField.js';
 export type { TimestampFieldProps } from './TimestampField.js';
 export type { PasswordFieldProps } from './PasswordField.js';
 export type { RelationshipFieldProps } from './RelationshipField.js';
+export type { JsonFieldProps } from './JsonField.js';
 export type { ComboboxFieldProps } from './ComboboxField.js';
 export type { RelationshipManagerProps } from './RelationshipManager.js';
 export type { FieldRendererProps } from './FieldRenderer.js';
+export type { FileFieldProps } from './FileField.js';
+export type { ImageFieldProps } from './ImageField.js';
 export type { FieldComponent, FieldComponentProps } from './registry.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/fields/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/fields/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAClD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAGlD,OAAO,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAA;AAGjG,YAAY,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AACpD,YAAY,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAA;AAC1D,YAAY,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAA;AAC5D,YAAY,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAA;AACxD,YAAY,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAC9D,YAAY,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAA;AAC5D,YAAY,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAA;AACpE,YAAY,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAA;AAC5D,YAAY,EAAE,wBAAwB,EAAE,MAAM,0BAA0B,CAAA;AACxE,YAAY,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAA;AAC5D,YAAY,EAAE,cAAc,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/fields/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAC1D,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAClD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAG5C,OAAO,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAA;AAGjG,YAAY,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AACpD,YAAY,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAA;AAC1D,YAAY,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAA;AAC5D,YAAY,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAA;AACxD,YAAY,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAC9D,YAAY,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAA;AAC5D,YAAY,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAA;AACpE,YAAY,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AACpD,YAAY,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAA;AAC5D,YAAY,EAAE,wBAAwB,EAAE,MAAM,0BAA0B,CAAA;AACxE,YAAY,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAA;AAC5D,YAAY,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AACpD,YAAY,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AACtD,YAAY,EAAE,cAAc,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAA"}

package/dist/components/fields/index.js

@@ -6,8 +6,11 @@ export { SelectField } from './SelectField.js';
 export { TimestampField } from './TimestampField.js';
 export { PasswordField } from './PasswordField.js';
 export { RelationshipField } from './RelationshipField.js';
+export { JsonField } from './JsonField.js';
 export { ComboboxField } from './ComboboxField.js';
 export { RelationshipManager } from './RelationshipManager.js';
 export { FieldRenderer } from './FieldRenderer.js';
+export { FileField } from './FileField.js';
+export { ImageField } from './ImageField.js';
 // Registry for custom field types
 export { fieldComponentRegistry, registerFieldComponent, getFieldComponent } from './registry.js';

package/dist/components/fields/registry.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"registry.d.ts","sourceRoot":"","sources":["../../../src/components/fields/registry.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAS1C;;;GAGG;AACH,MAAM,MAAM,mBAAmB,GAAG;IAChC,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,OAAO,CAAA;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;IAClC,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACvB,CAAA;AAED;;;;;;GAMG;AACH,MAAM,MAAM,cAAc,GAAG,aAAa,CAAC,mBAAmB,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAA;AAEzF;;;;GAIG;AAEH,eAAO,MAAM,sBAAsB,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,GAAG,CAAC,CAQrE,CAAA;AAED;;;;;;GAMG;AACH,wBAAgB,sBAAsB,CACpC,SAAS,EAAE,MAAM,EAEjB,SAAS,EAAE,aAAa,CAAC,GAAG,CAAC,GAC5B,IAAI,CAEN;AAED;;;GAGG;AAEH,wBAAgB,iBAAiB,CAAC,SAAS,EAAE,MAAM,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,SAAS,CAEnF"}
+{"version":3,"file":"registry.d.ts","sourceRoot":"","sources":["../../../src/components/fields/registry.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAY1C;;;GAGG;AACH,MAAM,MAAM,mBAAmB,GAAG;IAChC,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,OAAO,CAAA;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;IAClC,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACvB,CAAA;AAED;;;;;;GAMG;AACH,MAAM,MAAM,cAAc,GAAG,aAAa,CAAC,mBAAmB,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAA;AAEzF;;;;GAIG;AAEH,eAAO,MAAM,sBAAsB,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,GAAG,CAAC,CAWrE,CAAA;AAED;;;;;;GAMG;AACH,wBAAgB,sBAAsB,CACpC,SAAS,EAAE,MAAM,EAEjB,SAAS,EAAE,aAAa,CAAC,GAAG,CAAC,GAC5B,IAAI,CAEN;AAED;;;GAGG;AAEH,wBAAgB,iBAAiB,CAAC,SAAS,EAAE,MAAM,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,SAAS,CAEnF"}

package/dist/components/fields/registry.js

@@ -5,6 +5,9 @@ import { SelectField } from './SelectField.js';
 import { TimestampField } from './TimestampField.js';
 import { PasswordField } from './PasswordField.js';
 import { RelationshipField } from './RelationshipField.js';
+import { JsonField } from './JsonField.js';
+import { FileField } from './FileField.js';
+import { ImageField } from './ImageField.js';
 /**
  * Registry mapping field types to their default UI components
  * This can be extended for custom field types
@@ -19,6 +22,9 @@ export const fieldComponentRegistry = {
     timestamp: TimestampField,
     password: PasswordField,
     relationship: RelationshipField,
+    json: JsonField,
+    file: FileField,
+    image: ImageField,
 };
 /**
  * Register a custom field component for a field type

package/dist/primitives/index.d.ts

@@ -1,5 +1,6 @@
 export { Button, buttonVariants, type ButtonProps } from './button.js';
 export { Input, type InputProps } from './input.js';
+export { Textarea, type TextareaProps } from './textarea.js';
 export { Label } from './label.js';
 export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } from './card.js';
 export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, } from './table.js';

package/dist/primitives/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/primitives/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,KAAK,WAAW,EAAE,MAAM,aAAa,CAAA;AACtE,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,YAAY,CAAA;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAClC,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACjG,OAAO,EACL,KAAK,EACL,WAAW,EACX,SAAS,EACT,WAAW,EACX,SAAS,EACT,QAAQ,EACR,SAAS,EACT,YAAY,GACb,MAAM,YAAY,CAAA;AACnB,OAAO,EACL,MAAM,EACN,YAAY,EACZ,aAAa,EACb,WAAW,EACX,aAAa,EACb,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,iBAAiB,GAClB,MAAM,aAAa,CAAA;AACpB,OAAO,EACL,MAAM,EACN,WAAW,EACX,WAAW,EACX,aAAa,EACb,aAAa,EACb,WAAW,EACX,UAAU,EACV,eAAe,EACf,oBAAoB,EACpB,sBAAsB,GACvB,MAAM,aAAa,CAAA;AACpB,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACxC,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA;AACtE,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,eAAe,CAAA;AAC5D,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAA;AACnE,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,sBAAsB,CAAA;AAC/E,OAAO,EACL,QAAQ,EACR,eAAe,EACf,eAAe,EACf,cAAc,EACd,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,iBAAiB,GAClB,MAAM,eAAe,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/primitives/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,KAAK,WAAW,EAAE,MAAM,aAAa,CAAA;AACtE,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,YAAY,CAAA;AACnD,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,eAAe,CAAA;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAClC,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACjG,OAAO,EACL,KAAK,EACL,WAAW,EACX,SAAS,EACT,WAAW,EACX,SAAS,EACT,QAAQ,EACR,SAAS,EACT,YAAY,GACb,MAAM,YAAY,CAAA;AACnB,OAAO,EACL,MAAM,EACN,YAAY,EACZ,aAAa,EACb,WAAW,EACX,aAAa,EACb,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,iBAAiB,GAClB,MAAM,aAAa,CAAA;AACpB,OAAO,EACL,MAAM,EACN,WAAW,EACX,WAAW,EACX,aAAa,EACb,aAAa,EACb,WAAW,EACX,UAAU,EACV,eAAe,EACf,oBAAoB,EACpB,sBAAsB,GACvB,MAAM,aAAa,CAAA;AACpB,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACxC,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA;AACtE,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,eAAe,CAAA;AAC5D,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAA;AACnE,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,sBAAsB,CAAA;AAC/E,OAAO,EACL,QAAQ,EACR,eAAe,EACf,eAAe,EACf,cAAc,EACd,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,iBAAiB,GAClB,MAAM,eAAe,CAAA"}

package/dist/primitives/index.js

@@ -1,6 +1,7 @@
 // Primitive components from shadcn/ui
 export { Button, buttonVariants } from './button.js';
 export { Input } from './input.js';
+export { Textarea } from './textarea.js';
 export { Label } from './label.js';
 export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } from './card.js';
 export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, } from './table.js';

package/dist/primitives/textarea.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+}
+declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
+export { Textarea };
+//# sourceMappingURL=textarea.d.ts.map

package/dist/primitives/textarea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../src/primitives/textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC;CAAG;AAE3F,QAAA,MAAM,QAAQ,2FAab,CAAA;AAGD,OAAO,EAAE,QAAQ,EAAE,CAAA"}

package/dist/primitives/textarea.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { cn } from '../lib/utils.js';
+const Textarea = React.forwardRef(({ className, ...props }, ref) => {
+    return (_jsx("textarea", { className: cn('flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm', className), ref: ref, ...props }));
+});
+Textarea.displayName = 'Textarea';
+export { Textarea };

package/dist/styles/globals.css

@@ -7,6 +7,8 @@
       "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
       "Courier New", monospace;
+    --color-amber-600: oklch(66.6% 0.179 58.318);
+    --color-green-600: oklch(62.7% 0.194 149.214);
     --color-gray-200: oklch(92.8% 0.006 264.531);
     --color-black: #000;
     --color-white: #fff;
@@ -274,6 +276,9 @@
   .top-1\/2 {
     top: calc(1/2 * 100%);
   }
+  .top-2 {
+    top: calc(var(--spacing) * 2);
+  }
   .top-4 {
     top: calc(var(--spacing) * 4);
   }
@@ -361,6 +366,9 @@
   .table {
     display: table;
   }
+  .h-3 {
+    height: calc(var(--spacing) * 3);
+  }
   .h-3\.5 {
     height: calc(var(--spacing) * 3.5);
   }
@@ -406,12 +414,18 @@
   .max-h-\[300px\] {
     max-height: 300px;
   }
+  .min-h-\[80px\] {
+    min-height: 80px;
+  }
   .min-h-screen {
     min-height: 100vh;
   }
   .w-2\/3 {
     width: calc(2/3 * 100%);
   }
+  .w-3 {
+    width: calc(var(--spacing) * 3);
+  }
   .w-3\.5 {
     width: calc(var(--spacing) * 3.5);
   }
@@ -499,6 +513,9 @@
     --tw-translate-y: -50%;
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .transform {
+    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
+  }
   .animate-pulse {
     animation: var(--animate-pulse);
   }
@@ -508,6 +525,9 @@
   .cursor-default {
     cursor: default;
   }
+  .cursor-not-allowed {
+    cursor: not-allowed;
+  }
   .cursor-pointer {
     cursor: pointer;
   }
@@ -707,6 +727,18 @@
   .border-input {
     border-color: light-dark(var(--color-input-light), var(--color-input-dark));
   }
+  .border-muted-foreground\/25 {
+    border-color: color-mix(in srgb, light-dark(
+    oklch(0.5 0.01 264),
+    oklch(0.6 0.01 264)
+  ) 25%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, light-dark(
+    var(--color-muted-foreground-light),
+    var(--color-muted-foreground-dark)
+  ) 25%, transparent);
+    }
+  }
   .border-primary {
     border-color: light-dark(var(--color-primary-light), var(--color-primary-dark));
   }
@@ -767,6 +799,12 @@
   .bg-primary {
     background-color: light-dark(var(--color-primary-light), var(--color-primary-dark));
   }
+  .bg-primary\/5 {
+    background-color: color-mix(in srgb, light-dark(oklch(0.68 0.19 210), oklch(0.72 0.2 210)) 5%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, light-dark(var(--color-primary-light), var(--color-primary-dark)) 5%, transparent);
+    }
+  }
   .bg-primary\/10 {
     background-color: color-mix(in srgb, light-dark(oklch(0.68 0.19 210), oklch(0.72 0.2 210)) 10%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -857,6 +895,9 @@
   .bg-clip-text {
     background-clip: text;
   }
+  .object-cover {
+    object-fit: cover;
+  }
   .p-0 {
     padding: calc(var(--spacing) * 0);
   }
@@ -947,6 +988,9 @@
   .align-middle {
     vertical-align: middle;
   }
+  .font-mono {
+    font-family: var(--font-mono);
+  }
   .text-2xl {
     font-size: var(--text-2xl);
     line-height: var(--tw-leading, var(--text-2xl--line-height));
@@ -1016,6 +1060,9 @@
     var(--color-accent-foreground-dark)
   );
   }
+  .text-amber-600 {
+    color: var(--color-amber-600);
+  }
   .text-card-foreground {
     color: light-dark(
     var(--color-card-foreground-light),
@@ -1037,6 +1084,9 @@
   .text-foreground {
     color: light-dark(var(--color-foreground-light), var(--color-foreground-dark));
   }
+  .text-green-600 {
+    color: var(--color-green-600);
+  }
   .text-muted-foreground {
     color: light-dark(
     var(--color-muted-foreground-light),
@@ -1124,6 +1174,10 @@
     outline-style: var(--tw-outline-style);
     outline-width: 1px;
   }
+  .blur {
+    --tw-blur: blur(8px);
+    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+  }
   .filter {
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
   }
@@ -1288,6 +1342,16 @@
       }
     }
   }
+  .hover\:bg-primary\/5 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, light-dark(oklch(0.68 0.19 210), oklch(0.72 0.2 210)) 5%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, light-dark(var(--color-primary-light), var(--color-primary-dark)) 5%, transparent);
+        }
+      }
+    }
+  }
   .hover\:bg-primary\/90 {
     &:hover {
       @media (hover: hover) {
@@ -1629,6 +1693,26 @@ body {
   inherits: false;
   initial-value: 0;
 }
+@property --tw-rotate-x {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-rotate-y {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-rotate-z {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-skew-x {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-skew-y {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-space-y-reverse {
   syntax: "*";
   inherits: false;
@@ -1846,6 +1930,11 @@ body {
       --tw-translate-x: 0;
       --tw-translate-y: 0;
       --tw-translate-z: 0;
+      --tw-rotate-x: initial;
+      --tw-rotate-y: initial;
+      --tw-rotate-z: initial;
+      --tw-skew-x: initial;
+      --tw-skew-y: initial;
       --tw-space-y-reverse: 0;
       --tw-space-x-reverse: 0;
       --tw-divide-y-reverse: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opensaas/stack-ui",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Composable React UI components for OpenSaas Stack",
   "type": "module",
   "main": "./dist/index.js",
@@ -45,7 +45,7 @@
     "next": "^15.0.0 || ^16.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@opensaas/stack-core": "0.1.0"
+    "@opensaas/stack-core": "0.1.1"
   },
   "dependencies": {
     "@radix-ui/react-checkbox": "^1.3.3",
@@ -59,6 +59,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
+    "lucide-react": "^0.552.0",
     "react-hook-form": "^7.54.2",
     "tailwind-merge": "^3.3.1"
   },
@@ -71,13 +72,14 @@
     "@types/react": "^19.2.2",
     "@types/react-dom": "^19.2.2",
     "@vitejs/plugin-react": "^5.0.0",
+    "@vitest/coverage-v8": "^4.0.4",
     "happy-dom": "^20.0.0",
     "postcss": "^8.4.49",
     "postcss-cli": "^11.0.0",
     "tailwindcss": "^4.0.0",
     "typescript": "^5.9.3",
     "vitest": "^4.0.0",
-    "@opensaas/stack-core": "0.1.0"
+    "@opensaas/stack-core": "0.1.1"
   },
   "scripts": {
     "build": "tsc && npm run build:css",

package/src/components/ItemFormClient.tsx

@@ -65,6 +65,7 @@ export function ItemFormClient({
       try {
         // Transform relationship fields to Prisma format
         // Filter out password fields with isSet objects (unchanged passwords)
+        // File/Image fields: pass File objects through (Next.js will serialize them)
         const transformedData: Record<string, unknown> = {}
         for (const [fieldName, value] of Object.entries(formData)) {
           const fieldConfig = fields[fieldName]
@@ -93,7 +94,8 @@ export function ItemFormClient({
               }
             }
           } else {
-            // Non-relationship field: pass through
+            // Non-relationship field: pass through (including File objects for file/image fields)
+            // File objects will be serialized by Next.js server action
             transformedData[fieldName] = value
           }
         }

package/src/components/fields/FileField.tsx

@@ -0,0 +1,223 @@
+'use client'
+
+import React, { useCallback, useState } from 'react'
+import type { FileMetadata } from '@opensaas/stack-core'
+import { Button } from '../../primitives/button.js'
+import { Input } from '../../primitives/input.js'
+import { Label } from '../../primitives/label.js'
+import { Upload, X, File, Check } from 'lucide-react'
+
+export interface FileFieldProps {
+  name: string
+  value: File | FileMetadata | null
+  onChange: (value: File | FileMetadata | null) => void
+  label?: string
+  error?: string
+  disabled?: boolean
+  required?: boolean
+  mode?: 'read' | 'edit'
+  helpText?: string
+  placeholder?: string
+}
+
+/**
+ * File upload field with drag-and-drop support
+ *
+ * Stores File objects in form state. The actual upload happens server-side
+ * during form submission via field hooks.
+ */
+export function FileField({
+  name,
+  value,
+  onChange,
+  label,
+  error,
+  disabled,
+  required,
+  mode = 'edit',
+  helpText,
+  placeholder = 'Choose a file or drag and drop',
+}: FileFieldProps) {
+  const [isDragOver, setIsDragOver] = useState(false)
+
+  const handleFileSelect = useCallback(
+    (file: File) => {
+      // Store File object in form state
+      // Upload will happen server-side during form submission
+      onChange(file)
+    },
+    [onChange],
+  )
+
+  const handleDragOver = useCallback((e: React.DragEvent) => {
+    e.preventDefault()
+    setIsDragOver(true)
+  }, [])
+
+  const handleDragLeave = useCallback((e: React.DragEvent) => {
+    e.preventDefault()
+    setIsDragOver(false)
+  }, [])
+
+  const handleDrop = useCallback(
+    (e: React.DragEvent) => {
+      e.preventDefault()
+      setIsDragOver(false)
+
+      if (disabled || mode === 'read') return
+
+      const files = Array.from(e.dataTransfer.files)
+      if (files.length > 0) {
+        handleFileSelect(files[0])
+      }
+    },
+    [disabled, mode, handleFileSelect],
+  )
+
+  const handleInputChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const files = Array.from(e.target.files || [])
+      if (files.length > 0) {
+        handleFileSelect(files[0])
+      }
+    },
+    [handleFileSelect],
+  )
+
+  const handleRemove = useCallback(() => {
+    onChange(null)
+  }, [onChange])
+
+  // Determine if value is File or FileMetadata
+  // Use duck typing instead of instanceof to support SSR
+  const isFile =
+    value &&
+    typeof value === 'object' &&
+    'arrayBuffer' in value &&
+    typeof (value as { arrayBuffer?: unknown }).arrayBuffer === 'function'
+  const isFileMetadata = value && !isFile && typeof value === 'object' && 'url' in value
+
+  // Read-only mode
+  if (mode === 'read') {
+    return (
+      <div className="space-y-2">
+        {label && (
+          <Label htmlFor={name}>
+            {label}
+            {required && <span className="text-destructive ml-1">*</span>}
+          </Label>
+        )}
+        {isFileMetadata ? (
+          <div className="flex items-center gap-2 p-3 border rounded-md bg-muted">
+            <File className="h-4 w-4" />
+            <div className="flex-1 min-w-0">
+              <p className="text-sm font-medium truncate">
+                {(value as FileMetadata).originalFilename}
+              </p>
+              <p className="text-xs text-muted-foreground">
+                {formatFileSize((value as FileMetadata).size)}
+              </p>
+            </div>
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              onClick={() => window.open((value as FileMetadata).url, '_blank')}
+            >
+              Download
+            </Button>
+          </div>
+        ) : (
+          <p className="text-sm text-muted-foreground">No file uploaded</p>
+        )}
+      </div>
+    )
+  }
+
+  // Edit mode
+  return (
+    <div className="space-y-2">
+      {label && (
+        <Label htmlFor={name}>
+          {label}
+          {required && <span className="text-destructive ml-1">*</span>}
+        </Label>
+      )}
+
+      {isFile || isFileMetadata ? (
+        // File selected/uploaded - show file info
+        <div className="flex items-center gap-2 p-3 border rounded-md">
+          <Check className="h-4 w-4 text-green-600" />
+          <div className="flex-1 min-w-0">
+            <p className="text-sm font-medium truncate">
+              {isFile ? (value as File).name : (value as FileMetadata).originalFilename}
+            </p>
+            <p className="text-xs text-muted-foreground">
+              {formatFileSize(isFile ? (value as File).size : (value as FileMetadata).size)}
+              {isFileMetadata && ` • ${(value as FileMetadata).mimeType}`}
+              {isFile && ' • Will upload on save'}
+            </p>
+          </div>
+          {isFileMetadata && (
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              onClick={() => window.open((value as FileMetadata).url, '_blank')}
+            >
+              View
+            </Button>
+          )}
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            onClick={handleRemove}
+            disabled={disabled}
+          >
+            <X className="h-4 w-4" />
+          </Button>
+        </div>
+      ) : (
+        // No file - show upload area
+        <>
+          <div
+            className={`
+              relative border-2 border-dashed rounded-md p-6
+              transition-colors cursor-pointer
+              ${isDragOver ? 'border-primary bg-primary/5' : 'border-muted-foreground/25'}
+              ${disabled ? 'opacity-50 cursor-not-allowed' : 'hover:border-primary hover:bg-primary/5'}
+            `}
+            onDragOver={handleDragOver}
+            onDragLeave={handleDragLeave}
+            onDrop={handleDrop}
+          >
+            <Input
+              id={name}
+              type="file"
+              onChange={handleInputChange}
+              disabled={disabled}
+              className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
+            />
+
+            <div className="flex flex-col items-center gap-2 text-center">
+              <Upload className="h-8 w-8 text-muted-foreground" />
+              <p className="text-sm font-medium">{placeholder}</p>
+              {helpText && <p className="text-xs text-muted-foreground">{helpText}</p>}
+            </div>
+          </div>
+        </>
+      )}
+
+      {error && <p className="text-sm text-destructive">{error}</p>}
+    </div>
+  )
+}
+
+function formatFileSize(bytes: number): string {
+  if (bytes === 0) return '0 Bytes'
+  const k = 1024
+  const sizes = ['Bytes', 'KB', 'MB', 'GB']
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+  return `${Math.round((bytes / Math.pow(k, i)) * 100) / 100} ${sizes[i]}`
+}