@solidpb/ui-kit 0.1.0

package/dist/components/TextArea/TextArea.jsx

@@ -0,0 +1,40 @@
+import { createEffect, on, Show, splitProps, createMemo } from "solid-js";
+import { TextField } from "@kobalte/core/text-field";
+import { tv } from "tailwind-variants";
+import { debounce } from "../../methods/debounce";
+const root = tv({ base: "flex flex-col gap-1" });
+const textarea = tv({
+    base: "w-full resize-none rounded-sm outline-none px-2 py-1 min-h-[80px]",
+    variants: {
+        variant: {
+            bordered: "border-2 border-[var(--color-light-muted)] dark:border-[var(--color-dark-muted)]",
+            none: "",
+        },
+    },
+    defaultVariants: {
+        variant: "none",
+    },
+});
+export const TextArea = (props) => {
+    const [local, others] = splitProps(props, ["label", "class", "inputProps", "saveFunc", "variant"]);
+    let textareaRef;
+    const debouncedSave = createMemo(() => (local.saveFunc ? debounce(local.saveFunc) : undefined));
+    const handleChange = (v) => {
+        props.onChange?.(v);
+        debouncedSave()?.(v);
+    };
+    const autoResize = () => {
+        if (!textareaRef)
+            return;
+        textareaRef.style.height = "auto";
+        textareaRef.style.height = `${textareaRef.scrollHeight}px`;
+    };
+    createEffect(on(() => others.value, () => autoResize()));
+    return (<TextField class={root({ class: local.class })} {...others} onChange={handleChange}>
+      <Show when={local.label}>
+        <TextField.Label>{local.label}</TextField.Label>
+      </Show>
+      <TextField.TextArea ref={textareaRef} class={textarea({ variant: local.variant, class: local.inputProps?.class })} {...local.inputProps}/>
+    </TextField>);
+};
+export default TextArea;

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

@@ -0,0 +1 @@
+export * from "./TextArea";

package/dist/components/TextArea/index.js

@@ -0,0 +1 @@
+export * from "./TextArea";

package/dist/components/Toast/Toast.d.ts

@@ -0,0 +1,9 @@
+import { Component } from "solid-js";
+import { ToastRootProps } from "@kobalte/core/toast";
+interface Props extends ToastRootProps {
+    title: string;
+    msg: string;
+    variant?: "error" | "neutral";
+}
+export declare const Toast: Component<Props>;
+export default Toast;

package/dist/components/Toast/Toast.jsx

@@ -0,0 +1,36 @@
+import { createMemo, splitProps } from "solid-js";
+import { Toast as KToast } from "@kobalte/core/toast";
+import X from "lucide-solid/icons/x";
+import { tv } from "tailwind-variants";
+const toast = tv({
+    base: `flex flex-col items-center justify-between gap-1 border-1
+        rounded-md px-2 py-1 data-[opened]:animate-slideIn data-[closed]:animate-hide
+        data-[swipe=move]:translate-x-[var(--kb-toast-swipe-move-x)] data-[swipe=cancel]:translate-x-0
+        data-[swipe=cancel]:transition-transform data-[swipe=cancel]:duration-200 data-[swipe=cancel]:ease-out
+        data-[swipe=end]:animate-swipeOut shadow-md`,
+    variants: {
+        variant: {
+            error: "border-red-500",
+            neutral: "border-gray-500",
+        },
+    },
+    defaultVariants: {
+        variant: "neutral",
+    },
+});
+export const Toast = (props) => {
+    const [local, rootProps] = splitProps(props, ["msg", "title", "variant"]);
+    const classes = createMemo(() => toast({ variant: local.variant }));
+    return (<KToast {...rootProps} class={classes()}>
+      <div class={`flex items-start w-full`}>
+        <div>
+          <KToast.Title class="text-md truncate">{local.title}</KToast.Title>
+          <KToast.Description class="text-xs line-clamp-4">{local.msg}</KToast.Description>
+        </div>
+        <KToast.CloseButton class={`shrink-0 ml-auto`}>
+          <X size={16}/>
+        </KToast.CloseButton>
+      </div>
+    </KToast>);
+};
+export default Toast;

package/dist/components/Toast/Toaster.d.ts

@@ -0,0 +1,3 @@
+import { Component } from "solid-js";
+export declare const Toaster: Component;
+export default Toaster;

package/dist/components/Toast/Toaster.jsx

@@ -0,0 +1,11 @@
+import { Portal } from "solid-js/web";
+import { Toast } from "@kobalte/core/toast";
+export const Toaster = () => {
+    return (<Portal>
+      <Toast.Region>
+        <Toast.List class={`z-99999 top-0 right-0 flex flex-col p-(--viewport-padding) fixed gap-2 w-100
+            max-w-[100vw] m-0 outline-none list-none`}/>
+      </Toast.Region>
+    </Portal>);
+};
+export default Toaster;

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

@@ -0,0 +1,2 @@
+export { Toast } from "./Toast";
+export { Toaster } from "./Toaster";

package/dist/components/Toast/index.js

@@ -0,0 +1,2 @@
+export { Toast } from "./Toast";
+export { Toaster } from "./Toaster";

package/dist/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,8 @@
+import { Component, JSX } from "solid-js";
+interface TooltipProps {
+    content: JSX.Element;
+    children: JSX.Element;
+    class?: string;
+}
+export declare const Tooltip: Component<TooltipProps>;
+export default Tooltip;

package/dist/components/Tooltip/Tooltip.jsx

@@ -0,0 +1,12 @@
+import { Tooltip as KTooltip } from "@kobalte/core/tooltip";
+import { tv } from "tailwind-variants";
+const tooltip = tv({
+    base: "bg-[var(--color-light-surface)] dark:bg-[var(--color-dark-surface)] text-[var(--color-text-light-primary)] dark:text-[var(--color-text-dark-primary)] px-2 py-1 rounded shadow",
+});
+export const Tooltip = (props) => (<KTooltip>
+    <KTooltip.Trigger>{props.children}</KTooltip.Trigger>
+    <KTooltip.Portal>
+      <KTooltip.Content class={tooltip()}>{props.content}</KTooltip.Content>
+    </KTooltip.Portal>
+  </KTooltip>);
+export default Tooltip;

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

@@ -0,0 +1 @@
+export * from "./Tooltip";

package/dist/components/Tooltip/index.js

@@ -0,0 +1 @@
+export * from "./Tooltip";

package/dist/index.d.ts

@@ -0,0 +1,26 @@
+export * from "./components/Button";
+export * from "./components/Card";
+export * from "./components/Checkbox";
+export * from "./components/Container";
+export * from "./components/DateInput";
+export * from "./components/DropdownMenu";
+export * from "./components/FileInput";
+export * from "./components/Form";
+export * from "./components/Heading";
+export * from "./components/Image";
+export * from "./components/Input";
+export * from "./components/Link";
+export * from "./components/List";
+export * from "./components/Modal";
+export * from "./components/NumberInput";
+export * from "./components/RelationPicker";
+export * from "./components/SearchInput";
+export * from "./components/Select";
+export * from "./components/Switch";
+export * from "./components/Tabs";
+export * from "./components/Tag";
+export * from "./components/TagArea";
+export * from "./components/Text";
+export * from "./components/TextArea";
+export * from "./components/Tooltip";
+export * from "./methods/debounce";

package/dist/index.js

@@ -0,0 +1,26 @@
+export * from "./components/Button";
+export * from "./components/Card";
+export * from "./components/Checkbox";
+export * from "./components/Container";
+export * from "./components/DateInput";
+export * from "./components/DropdownMenu";
+export * from "./components/FileInput";
+export * from "./components/Form";
+export * from "./components/Heading";
+export * from "./components/Image";
+export * from "./components/Input";
+export * from "./components/Link";
+export * from "./components/List";
+export * from "./components/Modal";
+export * from "./components/NumberInput";
+export * from "./components/RelationPicker";
+export * from "./components/SearchInput";
+export * from "./components/Select";
+export * from "./components/Switch";
+export * from "./components/Tabs";
+export * from "./components/Tag";
+export * from "./components/TagArea";
+export * from "./components/Text";
+export * from "./components/TextArea";
+export * from "./components/Tooltip";
+export * from "./methods/debounce";

package/dist/methods/debounce.d.ts

@@ -0,0 +1 @@
+export declare function debounce<F extends (...args: any[]) => void>(fn: F, ms?: number): (...args: Parameters<F>) => void;

package/dist/methods/debounce.js

@@ -0,0 +1,7 @@
+export function debounce(fn, ms = 500) {
+    let timer;
+    return (...args) => {
+        clearTimeout(timer);
+        timer = setTimeout(() => fn(...args), ms);
+    };
+}

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@solidpb/ui-kit",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "devDependencies": {
+    "@storybook/addon-docs": "^9.1.10",
+    "@storybook/addon-themes": "^9.1.10",
+    "daisyui": "^5.5.14",
+    "storybook": "^9.1.10",
+    "storybook-solidjs-vite": "^9.0.3",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.0",
+    "vite-plugin-solid": "^2.11.10"
+  },
+  "dependencies": {
+    "@kobalte/core": "^0.13.11",
+    "@tailwindcss/vite": "^4.1.18",
+    "@tanstack/solid-table": "^8.21.3",
+    "@tanstack/solid-virtual": "^3.13.13",
+    "lucide-solid": "^0.562.0",
+    "solid-js": "^1.9.10",
+    "tailwind-merge": "^3.3.1",
+    "tailwind-variants": "^3.2.2",
+    "tailwindcss": "^4.1.11"
+  },
+  "scripts": {
+    "start": "vite",
+    "publish": "npm publish --access=public",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "build": "vite build && tsc -p tsconfig.json",
+    "prepublishOnly": "npm run build"
+  }
+}