@nikala-ui/core 0.6.2 → 0.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nikala-ui/core",
-  "version": "0.6.2",
+  "version": "0.7.0",
   "description": "Core component definitions, design tokens, and registry for Nikala UI",
   "type": "module",
   "private": false,
@@ -16,9 +16,12 @@
   },
   "devDependencies": {
     "@kobalte/core": "^0.13.12",
+    "@types/fs-extra": "^11.0.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "corvu": "^0.7.2",
+    "fs-extra": "^11.4.0",
+    "picocolors": "^1.1.1",
     "solid-js": "^1.9.14",
     "tailwind-merge": "^3.6.0"
   }

package/registry/index.json

@@ -293,5 +293,29 @@
       "button",
       "dropdown-menu"
     ]
+  },
+  {
+    "name": "toast",
+    "title": "Toast / Sonner",
+    "description": "A succinct message displayed temporarily in a toast region, built on Kobalte primitives.",
+    "type": "registry:ui",
+    "dependencies": [
+      "clsx",
+      "tailwind-merge",
+      "class-variance-authority",
+      "lucide-solid",
+      "@kobalte/core"
+    ]
+  },
+  {
+    "name": "tooltip",
+    "title": "Tooltip",
+    "description": "A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it, built on Kobalte primitives.",
+    "type": "registry:ui",
+    "dependencies": [
+      "clsx",
+      "tailwind-merge",
+      "@kobalte/core"
+    ]
   }
 ]

package/registry/toast.json

@@ -0,0 +1,20 @@
+{
+  "name": "toast",
+  "title": "Toast / Sonner",
+  "description": "A succinct message displayed temporarily in a toast region, built on Kobalte primitives.",
+  "type": "registry:ui",
+  "dependencies": [
+    "clsx",
+    "tailwind-merge",
+    "class-variance-authority",
+    "lucide-solid",
+    "@kobalte/core"
+  ],
+  "files": [
+    {
+      "path": "ui/toast.tsx",
+      "content": "import { splitProps, type Component, type JSX, type ComponentProps } from \"solid-js\";\nimport { Toast as KobalteToast, toaster } from \"@kobalte/core/toast\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { X, CircleCheck, Info, CircleAlert, TriangleAlert } from \"lucide-solid\";\nimport { cn } from \"@/lib/cn\";\n\nexport const toastVariants = cva(\n  \"group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-lg border p-4 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--kb-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--kb-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[opened]:animate-in data-[closed]:animate-out data-[swipe=end]:animate-out data-[closed]:fade-out-80 data-[closed]:slide-out-to-right-full data-[opened]:slide-in-from-top-full data-[opened]:sm:slide-in-from-bottom-full\",\n  {\n    variants: {\n      variant: {\n        default: \"border-border bg-background text-foreground\",\n        success: \"border-emerald-500/20 bg-emerald-500/10 text-emerald-900 dark:text-emerald-200 border-emerald-500/30\",\n        destructive: \"border-destructive/30 bg-destructive/10 text-destructive dark:text-red-300\",\n        warning: \"border-amber-500/20 bg-amber-500/10 text-amber-900 dark:text-amber-200 border-amber-500/30\",\n        info: \"border-sky-500/20 bg-sky-500/10 text-sky-900 dark:text-sky-200 border-sky-500/30\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n);\n\nexport interface ToastProps\n  extends ComponentProps<typeof KobalteToast>,\n    VariantProps<typeof toastVariants> {\n  class?: string;\n}\n\nexport const Toast: Component<ToastProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"variant\"]);\n\n  return (\n    <KobalteToast\n      class={cn(toastVariants({ variant: local.variant }), local.class)}\n      {...rest}\n    />\n  );\n};\n\nexport const ToastTitle: Component<ComponentProps<typeof KobalteToast.Title>> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\"]);\n\n  return (\n    <KobalteToast.Title\n      class={cn(\"text-sm font-semibold [&+div]:text-xs\", local.class)}\n      {...rest}\n    />\n  );\n};\n\nexport const ToastDescription: Component<ComponentProps<typeof KobalteToast.Description>> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\"]);\n\n  return (\n    <KobalteToast.Description\n      class={cn(\"text-sm opacity-90\", local.class)}\n      {...rest}\n    />\n  );\n};\n\nexport const ToastCloseButton: Component<ComponentProps<typeof KobalteToast.CloseButton>> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"children\"]);\n\n  return (\n    <KobalteToast.CloseButton\n      class={cn(\n        \"absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100\",\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children || <X class=\"h-4 w-4\" />}\n    </KobalteToast.CloseButton>\n  );\n};\n\nexport const ToastRegion: Component<ComponentProps<typeof KobalteToast.Region>> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\"]);\n\n  return (\n    <KobalteToast.Region\n      class={cn(\n        \"fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]\",\n        local.class\n      )}\n      {...rest}\n    />\n  );\n};\n\nexport const ToastList: Component<ComponentProps<typeof KobalteToast.List>> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\"]);\n\n  return <KobalteToast.List class={cn(\"flex flex-col gap-2\", local.class)} {...rest} />;\n};\n\n/* --- Helper Function to Trigger Toast Notifications --- */\nexport interface ShowToastOptions {\n  title: string;\n  description?: string;\n  variant?: \"default\" | \"success\" | \"destructive\" | \"warning\" | \"info\";\n  duration?: number;\n}\n\nexport const showToast = (options: ShowToastOptions) => {\n  return toaster.show((props) => (\n    <Toast toastId={props.toastId} variant={options.variant || \"default\"}>\n      <div class=\"flex items-start gap-3\">\n        {options.variant === \"success\" && <CircleCheck class=\"h-5 w-5 text-emerald-500 shrink-0 mt-0.5\" />}\n        {options.variant === \"destructive\" && <CircleAlert class=\"h-5 w-5 text-red-500 shrink-0 mt-0.5\" />}\n        {options.variant === \"warning\" && <TriangleAlert class=\"h-5 w-5 text-amber-500 shrink-0 mt-0.5\" />}\n        {options.variant === \"info\" && <Info class=\"h-5 w-5 text-sky-500 shrink-0 mt-0.5\" />}\n        <div class=\"grid gap-1\">\n          <ToastTitle>{options.title}</ToastTitle>\n          {options.description && <ToastDescription>{options.description}</ToastDescription>}\n        </div>\n      </div>\n      <ToastCloseButton />\n    </Toast>\n  ));\n};",
+      "type": "registry:ui"
+    }
+  ]
+}

package/registry/tooltip.json

@@ -0,0 +1,18 @@
+{
+  "name": "tooltip",
+  "title": "Tooltip",
+  "description": "A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it, built on Kobalte primitives.",
+  "type": "registry:ui",
+  "dependencies": [
+    "clsx",
+    "tailwind-merge",
+    "@kobalte/core"
+  ],
+  "files": [
+    {
+      "path": "ui/tooltip.tsx",
+      "content": "import { splitProps, type Component, type ComponentProps } from \"solid-js\";\nimport { Tooltip as KobalteTooltip } from \"@kobalte/core/tooltip\";\nimport { cn } from \"@/lib/cn\";\n\nexport const Tooltip: Component<ComponentProps<typeof KobalteTooltip>> = (props) => {\n  return <KobalteTooltip gutter={4} {...props} />;\n};\n\nexport const TooltipTrigger = KobalteTooltip.Trigger;\n\nexport interface TooltipContentProps extends ComponentProps<typeof KobalteTooltip.Content> {\n  class?: string;\n}\n\nexport const TooltipContent: Component<TooltipContentProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\"]);\n\n  return (\n    <KobalteTooltip.Portal>\n      <KobalteTooltip.Content\n        class={cn(\n          \"z-50 overflow-hidden rounded-md border border-border bg-popover px-3 py-1.5 text-xs text-popover-foreground shadow-md transition-all animate-in fade-in-0 zoom-in-95 data-[closed]:animate-out data-[closed]:fade-out-0 data-[closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n          local.class\n        )}\n        {...rest}\n      />\n    </KobalteTooltip.Portal>\n  );\n};",
+      "type": "registry:ui"
+    }
+  ]
+}

package/src/registry/components/ui/toast.tsx

@@ -0,0 +1,124 @@
+import { splitProps, type Component, type JSX, type ComponentProps } from "solid-js";
+import { Toast as KobalteToast, toaster } from "@kobalte/core/toast";
+import { cva, type VariantProps } from "class-variance-authority";
+import { X, CircleCheck, Info, CircleAlert, TriangleAlert } from "lucide-solid";
+import { cn } from "@/lib/cn";
+
+export const toastVariants = cva(
+  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-lg border p-4 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--kb-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--kb-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[opened]:animate-in data-[closed]:animate-out data-[swipe=end]:animate-out data-[closed]:fade-out-80 data-[closed]:slide-out-to-right-full data-[opened]:slide-in-from-top-full data-[opened]:sm:slide-in-from-bottom-full",
+  {
+    variants: {
+      variant: {
+        default: "border-border bg-background text-foreground",
+        success: "border-emerald-500/20 bg-emerald-500/10 text-emerald-900 dark:text-emerald-200 border-emerald-500/30",
+        destructive: "border-destructive/30 bg-destructive/10 text-destructive dark:text-red-300",
+        warning: "border-amber-500/20 bg-amber-500/10 text-amber-900 dark:text-amber-200 border-amber-500/30",
+        info: "border-sky-500/20 bg-sky-500/10 text-sky-900 dark:text-sky-200 border-sky-500/30",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+export interface ToastProps
+  extends ComponentProps<typeof KobalteToast>,
+    VariantProps<typeof toastVariants> {
+  class?: string;
+}
+
+export const Toast: Component<ToastProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "variant"]);
+
+  return (
+    <KobalteToast
+      class={cn(toastVariants({ variant: local.variant }), local.class)}
+      {...rest}
+    />
+  );
+};
+
+export const ToastTitle: Component<ComponentProps<typeof KobalteToast.Title>> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+
+  return (
+    <KobalteToast.Title
+      class={cn("text-sm font-semibold [&+div]:text-xs", local.class)}
+      {...rest}
+    />
+  );
+};
+
+export const ToastDescription: Component<ComponentProps<typeof KobalteToast.Description>> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+
+  return (
+    <KobalteToast.Description
+      class={cn("text-sm opacity-90", local.class)}
+      {...rest}
+    />
+  );
+};
+
+export const ToastCloseButton: Component<ComponentProps<typeof KobalteToast.CloseButton>> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+
+  return (
+    <KobalteToast.CloseButton
+      class={cn(
+        "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100",
+        local.class
+      )}
+      {...rest}
+    >
+      {local.children || <X class="h-4 w-4" />}
+    </KobalteToast.CloseButton>
+  );
+};
+
+export const ToastRegion: Component<ComponentProps<typeof KobalteToast.Region>> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+
+  return (
+    <KobalteToast.Region
+      class={cn(
+        "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
+        local.class
+      )}
+      {...rest}
+    />
+  );
+};
+
+export const ToastList: Component<ComponentProps<typeof KobalteToast.List>> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+
+  return <KobalteToast.List class={cn("flex flex-col gap-2", local.class)} {...rest} />;
+};
+
+/* --- Helper Function to Trigger Toast Notifications --- */
+export interface ShowToastOptions {
+  title: string;
+  description?: string;
+  variant?: "default" | "success" | "destructive" | "warning" | "info";
+  duration?: number;
+}
+
+export const showToast = (options: ShowToastOptions) => {
+  return toaster.show((props) => (
+    <Toast toastId={props.toastId} variant={options.variant || "default"}>
+      <div class="flex items-start gap-3">
+        {options.variant === "success" && <CircleCheck class="h-5 w-5 text-emerald-500 shrink-0 mt-0.5" />}
+        {options.variant === "destructive" && <CircleAlert class="h-5 w-5 text-red-500 shrink-0 mt-0.5" />}
+        {options.variant === "warning" && <TriangleAlert class="h-5 w-5 text-amber-500 shrink-0 mt-0.5" />}
+        {options.variant === "info" && <Info class="h-5 w-5 text-sky-500 shrink-0 mt-0.5" />}
+        <div class="grid gap-1">
+          <ToastTitle>{options.title}</ToastTitle>
+          {options.description && <ToastDescription>{options.description}</ToastDescription>}
+        </div>
+      </div>
+      <ToastCloseButton />
+    </Toast>
+  ));
+};

package/src/registry/components/ui/tooltip.tsx

@@ -0,0 +1,29 @@
+import { splitProps, type Component, type ComponentProps } from "solid-js";
+import { Tooltip as KobalteTooltip } from "@kobalte/core/tooltip";
+import { cn } from "@/lib/cn";
+
+export const Tooltip: Component<ComponentProps<typeof KobalteTooltip>> = (props) => {
+  return <KobalteTooltip gutter={4} {...props} />;
+};
+
+export const TooltipTrigger = KobalteTooltip.Trigger;
+
+export interface TooltipContentProps extends ComponentProps<typeof KobalteTooltip.Content> {
+  class?: string;
+}
+
+export const TooltipContent: Component<TooltipContentProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+
+  return (
+    <KobalteTooltip.Portal>
+      <KobalteTooltip.Content
+        class={cn(
+          "z-50 overflow-hidden rounded-md border border-border bg-popover px-3 py-1.5 text-xs text-popover-foreground shadow-md transition-all animate-in fade-in-0 zoom-in-95 data-[closed]:animate-out data-[closed]:fade-out-0 data-[closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+          local.class
+        )}
+        {...rest}
+      />
+    </KobalteTooltip.Portal>
+  );
+};

package/src/registry/metadata.ts

@@ -149,4 +149,14 @@ export const COMPONENT_METADATA: Record<string, ComponentMeta> = {
     ],
     registryDependencies: ["kbd", "input-group", "list"],
   },
+  toast: {
+    title: "Toast / Sonner",
+    description: "A succinct message displayed temporarily in a toast region, built on Kobalte primitives.",
+    dependencies: ["clsx", "tailwind-merge", "class-variance-authority", "lucide-solid", "@kobalte/core"],
+  },
+  tooltip: {
+    title: "Tooltip",
+    description: "A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it, built on Kobalte primitives.",
+    dependencies: ["clsx", "tailwind-merge", "@kobalte/core"],
+  },
 };