@suryapamenang/ui 0.1.0

package/dist/primitives/toolbar.js

@@ -0,0 +1,110 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/** biome-ignore-all lint/a11y/useFocusableInteractive: from shadcn ui */
+/** biome-ignore-all lint/a11y/useSemanticElements: from shadcn ui */
+/** biome-ignore-all lint/a11y/useKeyWithClickEvents: from shadcn ui */
+import { cva } from "class-variance-authority";
+import { ChevronDown } from "lucide-react";
+import { Toolbar as ToolbarPrimitive, Tooltip as TooltipPrimitive, } from "radix-ui";
+import * as React from "react";
+import { cn } from "../lib/utils";
+import { DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuSeparator, } from "./dropdown-menu";
+import { Separator } from "./separator";
+import { Tooltip, TooltipTrigger } from "./tooltip";
+export function Toolbar({ className, ...props }) {
+    return (_jsx(ToolbarPrimitive.Root, { className: cn("relative flex items-center select-none", className), ...props }));
+}
+export function ToolbarToggleGroup({ className, ...props }) {
+    return (_jsx(ToolbarPrimitive.ToolbarToggleGroup, { className: cn("flex items-center", className), ...props }));
+}
+export function ToolbarLink({ className, ...props }) {
+    return (_jsx(ToolbarPrimitive.Link, { className: cn("font-medium underline underline-offset-4", className), ...props }));
+}
+export function ToolbarSeparator({ className, ...props }) {
+    return (_jsx(ToolbarPrimitive.Separator, { className: cn("mx-2 my-1 w-px shrink-0 bg-border", className), ...props }));
+}
+// From toggleVariants
+const toolbarButtonVariants = cva("inline-flex cursor-pointer items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-checked:bg-accent aria-checked:text-accent-foreground aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+    defaultVariants: {
+        size: "default",
+        variant: "default",
+    },
+    variants: {
+        size: {
+            default: "h-9 min-w-9 px-2",
+            lg: "h-10 min-w-10 px-2.5",
+            sm: "h-8 min-w-8 px-1.5",
+        },
+        variant: {
+            default: "bg-transparent",
+            outline: "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
+        },
+    },
+});
+const dropdownArrowVariants = cva(cn("inline-flex items-center justify-center rounded-r-md text-sm font-medium text-foreground transition-colors disabled:pointer-events-none disabled:opacity-50"), {
+    defaultVariants: {
+        size: "sm",
+        variant: "default",
+    },
+    variants: {
+        size: {
+            default: "h-9 w-6",
+            lg: "h-10 w-8",
+            sm: "h-8 w-4",
+        },
+        variant: {
+            default: "bg-transparent hover:bg-muted hover:text-muted-foreground aria-checked:bg-accent aria-checked:text-accent-foreground",
+            outline: "border border-l-0 border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
+        },
+    },
+});
+export const ToolbarButton = withTooltip(function ToolbarButton({ children, className, isDropdown, pressed, size = "sm", variant, ...props }) {
+    return typeof pressed === "boolean" ? (_jsx(ToolbarToggleGroup, { disabled: props.disabled, value: "single", type: "single", children: _jsx(ToolbarToggleItem, { className: cn(toolbarButtonVariants({
+                size,
+                variant,
+            }), isDropdown && "justify-between gap-1 pr-1", className), value: pressed ? "single" : "", ...props, children: isDropdown ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "flex flex-1 items-center gap-2 whitespace-nowrap", children: children }), _jsx("div", { children: _jsx(ChevronDown, { className: "size-3.5 text-muted-foreground", "data-icon": true }) })] })) : (children) }) })) : (_jsx(ToolbarPrimitive.Button, { className: cn(toolbarButtonVariants({
+            size,
+            variant,
+        }), isDropdown && "pr-1", className), ...props, children: children }));
+});
+export function ToolbarSplitButton({ className, ...props }) {
+    return (_jsx(ToolbarButton, { className: cn("group flex gap-0 px-0 hover:bg-transparent", className), ...props }));
+}
+export function ToolbarSplitButtonPrimary({ children, className, size = "sm", variant, ...props }) {
+    return (_jsx("span", { className: cn(toolbarButtonVariants({
+            size,
+            variant,
+        }), "rounded-r-none", "group-data-[pressed=true]:bg-accent group-data-[pressed=true]:text-accent-foreground", className), ...props, children: children }));
+}
+export function ToolbarSplitButtonSecondary({ className, size, variant, ...props }) {
+    return (_jsx("span", { className: cn(dropdownArrowVariants({
+            size,
+            variant,
+        }), "group-data-[pressed=true]:bg-accent group-data-[pressed=true]:text-accent-foreground", className), onClick: (e) => e.stopPropagation(), role: "button", ...props, children: _jsx(ChevronDown, { className: "size-3.5 text-muted-foreground", "data-icon": true }) }));
+}
+export function ToolbarToggleItem({ className, size = "sm", variant, ...props }) {
+    return (_jsx(ToolbarPrimitive.ToggleItem, { className: cn(toolbarButtonVariants({ size, variant }), className), ...props }));
+}
+export function ToolbarGroup({ children, className, }) {
+    return (_jsxs("div", { className: cn("group/toolbar-group", "relative hidden has-[button]:flex", className), children: [_jsx("div", { className: "flex items-center", children: children }), _jsx("div", { className: "mx-1.5 py-0.5 group-last/toolbar-group:hidden!", children: _jsx(Separator, { orientation: "vertical" }) })] }));
+}
+function withTooltip(Component) {
+    return function ExtendComponent({ tooltip, tooltipContentProps, tooltipProps, tooltipTriggerProps, ...props }) {
+        const [mounted, setMounted] = React.useState(false);
+        React.useEffect(() => {
+            setMounted(true);
+        }, []);
+        const component = _jsx(Component, { ...props });
+        if (tooltip && mounted) {
+            return (_jsxs(Tooltip, { ...tooltipProps, children: [_jsx(TooltipTrigger, { asChild: true, ...tooltipTriggerProps, children: component }), _jsx(TooltipContent, { ...tooltipContentProps, children: tooltip })] }));
+        }
+        return component;
+    };
+}
+function TooltipContent({ children, className, 
+// CHANGE
+sideOffset = 4, ...props }) {
+    return (_jsx(TooltipPrimitive.Portal, { children: _jsx(TooltipPrimitive.Content, { className: cn("z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md bg-primary px-3 py-1.5 text-xs text-balance text-primary-foreground", className), "data-slot": "tooltip-content", sideOffset: sideOffset, ...props, children: children }) }));
+}
+export function ToolbarMenuGroup({ children, className, label, ...props }) {
+    return (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, { className: cn("hidden", "mb-0 shrink-0 peer-has-[[role=menuitem]]/menu-group:block peer-has-[[role=menuitemradio]]/menu-group:block peer-has-[[role=option]]/menu-group:block") }), _jsxs(DropdownMenuRadioGroup, { ...props, className: cn("hidden", "peer/menu-group group/menu-group my-1.5 has-[[role=menuitem]]:block has-[[role=menuitemradio]]:block has-[[role=option]]:block", className), children: [label && (_jsx(DropdownMenuLabel, { className: "text-xs font-semibold text-muted-foreground select-none", children: label })), children] })] }));
+}

package/dist/primitives/tooltip.d.ts

@@ -0,0 +1,8 @@
+import { Tooltip as TooltipPrimitive } from "radix-ui";
+import type * as React from "react";
+declare function TooltipProvider({ delayDuration, ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>): React.JSX.Element;
+declare function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>): React.JSX.Element;
+declare function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>): React.JSX.Element;
+declare function TooltipContent({ className, sideOffset, children, ...props }: React.ComponentProps<typeof TooltipPrimitive.Content>): React.JSX.Element;
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
+//# sourceMappingURL=tooltip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../src/primitives/tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,UAAU,CAAC;AACvD,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAIpC,iBAAS,eAAe,CAAC,EACvB,aAAiB,EACjB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,QAAQ,CAAC,qBAQxD;AAED,iBAAS,OAAO,CAAC,EACf,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,qBAMpD;AAED,iBAAS,cAAc,CAAC,EACtB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,qBAEvD;AAED,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,UAAc,EACd,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,qBAiBvD;AAED,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,eAAe,EAAE,CAAC"}

package/dist/primitives/tooltip.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Tooltip as TooltipPrimitive } from "radix-ui";
+import { cn } from "../lib/utils";
+function TooltipProvider({ delayDuration = 0, ...props }) {
+    return (_jsx(TooltipPrimitive.Provider, { "data-slot": "tooltip-provider", delayDuration: delayDuration, ...props }));
+}
+function Tooltip({ ...props }) {
+    return (_jsx(TooltipProvider, { children: _jsx(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props }) }));
+}
+function TooltipTrigger({ ...props }) {
+    return _jsx(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
+}
+function TooltipContent({ className, sideOffset = 0, children, ...props }) {
+    return (_jsx(TooltipPrimitive.Portal, { children: _jsxs(TooltipPrimitive.Content, { "data-slot": "tooltip-content", sideOffset: sideOffset, className: cn("bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=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 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance", className), ...props, children: [children, _jsx(TooltipPrimitive.Arrow, { className: "bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })] }) }));
+}
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/package.json

@@ -0,0 +1,88 @@
+{
+  "name": "@suryapamenang/ui",
+  "version": "0.1.0",
+  "type": "module",
+  "description": "Shared React UI components, primitives and styles for Surya Pamenang applications.",
+  "license": "UNLICENSED",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/kennethl-sp/ui.git"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "pnpm run build:styles && pnpm run build:components",
+    "build:styles": "tailwindcss -i ./src/styles/styles.css -o ./dist/index.css",
+    "build:components": "tsc",
+    "check-types": "tsc --noEmit",
+    "dev:styles": "tailwindcss -i ./src/styles/styles.css -o ./dist/index.css --watch",
+    "dev:components": "tsc --watch",
+    "clean": "rimraf dist",
+    "format": "biome format . --write",
+    "lint": "biome check .",
+    "prepublishOnly": "pnpm run clean && pnpm run build"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    "./styles.css": "./dist/index.css",
+    "./lib/utils": "./dist/lib/utils.js",
+    "./primitives/*": "./dist/primitives/*.js",
+    "./components/*": "./dist/components/*.js",
+    "./*": "./dist/*.js"
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.6.0"
+  },
+  "peerDependencies": {
+    "@platejs/basic-nodes": "^51.1.2",
+    "cmdk": "^1.1.1",
+    "lucide-react": "^0.537.0",
+    "motion": "^12.43.0",
+    "next-themes": "^0.4.6",
+    "platejs": "^51.1.3",
+    "radix-ui": "^1.6.7",
+    "react": "^19.2.3",
+    "react-day-picker": "^9.14.0",
+    "react-dom": "^19.2.3",
+    "react-dropzone": "^14.4.1",
+    "react-hook-form": "^7.87.0",
+    "recharts": "2.15.4",
+    "sonner": "^2.0.8",
+    "vaul": "^1.1.2"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "2.3.11",
+    "@platejs/basic-nodes": "^51.1.2",
+    "@tailwindcss/cli": "^4.3.3",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.7",
+    "cmdk": "^1.1.1",
+    "lucide-react": "^0.537.0",
+    "motion": "^12.43.0",
+    "next-themes": "^0.4.6",
+    "platejs": "^51.1.3",
+    "radix-ui": "^1.6.7",
+    "react": "^19.2.3",
+    "react-day-picker": "^9.14.0",
+    "react-dom": "^19.2.3",
+    "react-dropzone": "^14.4.1",
+    "react-hook-form": "^7.87.0",
+    "recharts": "2.15.4",
+    "rimraf": "^6.1.3",
+    "sonner": "^2.0.8",
+    "tailwind-scrollbar-hide": "^4.0.0",
+    "tailwindcss": "^4.3.3",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "^5.9.3",
+    "vaul": "^1.1.2"
+  },
+  "packageManager": "pnpm@10.28.2"
+}