@solidpb/ui-kit 0.4.1 → 0.4.2

package/dist/components/Checkbox/Checkbox.jsx

@@ -25,6 +25,21 @@ const checkbox = tv({
         size: "sm",
     },
 });
+const label = tv({
+    base: "label text-xs",
+    variants: {
+        size: {
+            xs: "text-xs",
+            sm: "text-xs",
+            md: "text-xs",
+            lg: "text-sm",
+            xl: "text-sm",
+        },
+    },
+    defaultVariants: {
+        size: "sm",
+    },
+});
 export const Checkbox = (props) => {
     const [local, inputProps] = splitProps(props, ["label", "size", "appearance", "class", "onChange"]);
     return (<label class="flex items-center gap-3 w-fit">
@@ -36,7 +51,7 @@ export const Checkbox = (props) => {
             local.onChange?.(e.currentTarget.checked);
         }}/>
 
-      {local.label && <span class="select-none">{local.label}</span>}
+      {local.label && <span class={label({ size: local.size })}>{local.label}</span>}
     </label>);
 };
 export default Checkbox;

package/dist/components/Form.jsx

@@ -20,6 +20,7 @@ export function createForm() {
     const Form = (props) => {
         const [values, setValues] = createStore({ ...props.data });
         const setValue = (key, value) => {
+            console.log("Setting value", key, value);
             setValues(key, value);
         };
         const getValue = (key) => {

package/dist/components/RelationPicker.d.ts

@@ -18,6 +18,7 @@ export interface RelationPickerProps<T> {
     onTextInputChange?: (text: string) => void;
     defaultFilter?: (option: T[] | Exclude<NonNullable<T>, null>, filter: string) => boolean;
     onLinkClick?: (value: T) => void;
+    href?: string;
 }
 export declare const RelationPicker: <T>(props: RelationPickerProps<T>) => import("solid-js").JSX.Element;
 export default RelationPicker;

package/dist/components/RelationPicker.jsx

@@ -103,9 +103,9 @@ export const RelationPicker = (props) => {
                 tags: props.multi && Array.isArray(props.value) && props.value.length > 0,
             })}>
                 <Show when={props.multi} fallback={<>
-                      {!props.multi && values() && (<Button variant="ghost" appearance="primary" size="xs" modifier="square" onClick={() => props.onLinkClick?.(props.value)}>
+                      {!props.multi && values() && (props.href || props.onLinkClick) && (<a class="btn btn-ghost btn-primary btn-xs btn-square" href={props.href} onClick={() => props.onLinkClick?.(props.value)}>
                           <Link class="w-[1em] h-[1em]"/>
-                        </Button>)}
+                        </a>)}
                       <Combobox.Input onBlur={(e) => {
                     if (!props.value) {
                         e.currentTarget.value = "";

package/dist/components/Switch/Switch.jsx

@@ -25,6 +25,21 @@ const toggle = tv({
         size: "sm",
     },
 });
+const label = tv({
+    base: "label text-xs",
+    variants: {
+        size: {
+            xs: "text-xs",
+            sm: "text-xs",
+            md: "text-xs",
+            lg: "text-sm",
+            xl: "text-sm",
+        },
+    },
+    defaultVariants: {
+        size: "sm",
+    },
+});
 export const Switch = (props) => {
     const [local, inputProps] = splitProps(props, ["label", "size", "appearance", "class", "onChange"]);
     return (<label class="flex items-center gap-3 w-fit">
@@ -33,9 +48,9 @@ export const Switch = (props) => {
             appearance: local.appearance,
             class: local.class,
         })} onChange={(e) => {
-            local.onChange?.(Boolean(e.currentTarget.value));
+            local.onChange?.(e.currentTarget.checked);
         }}/>
-      {local.label && <span class="select-none">{local.label}</span>}
+      {local.label && <span class={label({ size: local.size })}>{local.label}</span>}
     </label>);
 };
 export default Switch;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidpb/ui-kit",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",