@pallamart/pm-core-components 1.0.0

package/dist/ui/misc.js

@@ -0,0 +1,46 @@
+import { createElement } from '../create-element.js';
+import { cn } from '../utils/cn.js';
+export function AspectRatio({ className, ratio = 1, ...props }) {
+    return createElement('div', {
+        ...props,
+        className: cn('relative w-full overflow-hidden', className),
+        style: { ...props.style, aspectRatio: String(ratio) },
+    });
+}
+export function ButtonGroup({ className, ...props }) {
+    return createElement('div', {
+        ...props,
+        className: cn('inline-flex items-center rounded-md shadow-sm [&>*:first-child]:rounded-r-none [&>*:last-child]:rounded-l-none [&>*:not(:first-child):not(:last-child)]:rounded-none', className),
+    });
+}
+export function StatusPanel({ className, ...props }) {
+    return createElement('div', {
+        ...props,
+        className: cn('flex flex-col gap-4 rounded-lg border border-border bg-muted/30 p-4 lg:flex-row lg:items-center lg:justify-between', className),
+    });
+}
+export function Kbd({ className, ...props }) {
+    return createElement('kbd', {
+        ...props,
+        className: cn('pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-body-4 text-muted-foreground', className),
+    });
+}
+export function Pagination({ className, ...props }) {
+    return createElement('nav', {
+        ...props,
+        'aria-label': props['aria-label'] ?? 'Pagination',
+        className: cn('mx-auto flex w-full justify-center', className),
+    });
+}
+export function PaginationContent({ className, ...props }) {
+    return createElement('ul', {
+        ...props,
+        className: cn('flex flex-row items-center gap-1', className),
+    });
+}
+export function PaginationItem({ className, ...props }) {
+    return createElement('li', {
+        ...props,
+        className: cn('', className),
+    });
+}

package/dist/ui/popover.d.ts

@@ -0,0 +1,6 @@
+import type React from 'react';
+export declare function Popover({ className, ...props }: React.HTMLAttributes<HTMLDetailsElement>): any;
+export declare function PopoverTrigger({ className, ...props }: React.HTMLAttributes<HTMLElement>): any;
+export declare function PopoverContent({ align, className, ...props }: React.HTMLAttributes<HTMLDivElement> & {
+    align?: 'end' | 'start';
+}): any;

package/dist/ui/popover.js

@@ -0,0 +1,20 @@
+import { createElement } from '../create-element.js';
+import { cn } from '../utils/cn.js';
+export function Popover({ className, ...props }) {
+    return createElement('details', {
+        ...props,
+        className: cn('group relative inline-block text-left', className),
+    });
+}
+export function PopoverTrigger({ className, ...props }) {
+    return createElement('summary', {
+        ...props,
+        className: cn('flex cursor-pointer list-none items-center [&::-webkit-details-marker]:hidden', className),
+    });
+}
+export function PopoverContent({ align = 'end', className, ...props }) {
+    return createElement('div', {
+        ...props,
+        className: cn('absolute z-50 mt-2 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-lg', align === 'end' ? 'right-0' : 'left-0', className),
+    });
+}

package/dist/ui/progress.d.ts

@@ -0,0 +1,4 @@
+import type React from 'react';
+export declare function Progress({ className, value, ...props }: React.HTMLAttributes<HTMLDivElement> & {
+    value?: number;
+}): any;

package/dist/ui/progress.js

@@ -0,0 +1,16 @@
+import { createElement } from '../create-element.js';
+import { cn } from '../utils/cn.js';
+export function Progress({ className, value = 0, ...props }) {
+    const normalizedValue = Math.max(0, Math.min(100, value));
+    return createElement('div', {
+        ...props,
+        'aria-valuemax': 100,
+        'aria-valuemin': 0,
+        'aria-valuenow': normalizedValue,
+        role: 'progressbar',
+        className: cn('relative h-2 w-full overflow-hidden rounded-full bg-secondary', className),
+    }, createElement('div', {
+        className: 'h-full w-full flex-1 bg-primary transition-all',
+        style: { transform: `translateX(-${100 - normalizedValue}%)` },
+    }));
+}

package/dist/ui/separator.d.ts

@@ -0,0 +1,4 @@
+import type React from 'react';
+export declare function Separator({ className, orientation, ...props }: React.HTMLAttributes<HTMLDivElement> & {
+    orientation?: 'horizontal' | 'vertical';
+}): any;

package/dist/ui/separator.js

@@ -0,0 +1,10 @@
+import { createElement } from '../create-element.js';
+import { cn } from '../utils/cn.js';
+export function Separator({ className, orientation = 'horizontal', ...props }) {
+    return createElement('div', {
+        ...props,
+        'aria-orientation': orientation,
+        role: props.role ?? 'separator',
+        className: cn('shrink-0 bg-border', orientation === 'horizontal' ? 'h-px w-full' : 'h-full w-px', className),
+    });
+}

package/dist/ui/skeleton.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): any;

package/dist/ui/skeleton.js

@@ -0,0 +1,8 @@
+import { createElement } from '../create-element.js';
+import { cn } from '../utils/cn.js';
+export function Skeleton({ className, ...props }) {
+    return createElement('div', {
+        ...props,
+        className: cn('animate-pulse rounded-md bg-muted', className),
+    });
+}

package/dist/ui/spinner.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare function Spinner({ className, ...props }: React.SVGProps<SVGSVGElement>): any;

package/dist/ui/spinner.js

@@ -0,0 +1,26 @@
+import { createElement } from '../create-element.js';
+import { cn } from '../utils/cn.js';
+export function Spinner({ className, ...props }) {
+    const svgProps = props;
+    return createElement('svg', {
+        ...svgProps,
+        'aria-label': props['aria-label'] ?? 'Loading',
+        className: cn('h-4 w-4 animate-spin', className),
+        fill: 'none',
+        role: 'status',
+        viewBox: '0 0 24 24',
+    }, createElement('circle', {
+        className: 'opacity-25',
+        cx: 12,
+        cy: 12,
+        r: 10,
+        stroke: 'currentColor',
+        strokeWidth: 4,
+    }), createElement('path', {
+        className: 'opacity-75',
+        d: 'M4 12a8 8 0 0 1 8-8',
+        stroke: 'currentColor',
+        strokeLinecap: 'round',
+        strokeWidth: 4,
+    }));
+}

package/dist/ui/table.d.ts

@@ -0,0 +1,7 @@
+import type React from 'react';
+export declare function Table({ className, ...props }: React.TableHTMLAttributes<HTMLTableElement>): any;
+export declare function TableHeader({ className, ...props }: React.HTMLAttributes<HTMLTableSectionElement>): any;
+export declare function TableBody({ className, ...props }: React.HTMLAttributes<HTMLTableSectionElement>): any;
+export declare function TableRow({ className, ...props }: React.HTMLAttributes<HTMLTableRowElement>): any;
+export declare function TableHead({ className, ...props }: React.ThHTMLAttributes<HTMLTableCellElement>): any;
+export declare function TableCell({ className, ...props }: React.TdHTMLAttributes<HTMLTableCellElement>): any;

package/dist/ui/table.js

@@ -0,0 +1,41 @@
+import { createElement } from '../create-element.js';
+import { cn } from '../utils/cn.js';
+export function Table({ className, ...props }) {
+    return createElement('div', {
+        className: 'w-full overflow-auto',
+        children: createElement('table', {
+            ...props,
+            className: cn('w-full caption-bottom text-body-3', className),
+        }),
+    });
+}
+export function TableHeader({ className, ...props }) {
+    return createElement('thead', {
+        ...props,
+        className: cn('[&_tr]:border-b', className),
+    });
+}
+export function TableBody({ className, ...props }) {
+    return createElement('tbody', {
+        ...props,
+        className: cn('[&_tr:last-child]:border-0', className),
+    });
+}
+export function TableRow({ className, ...props }) {
+    return createElement('tr', {
+        ...props,
+        className: cn('border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted', className),
+    });
+}
+export function TableHead({ className, ...props }) {
+    return createElement('th', {
+        ...props,
+        className: cn('h-10 px-3 text-left align-middle text-muted-foreground', className),
+    });
+}
+export function TableCell({ className, ...props }) {
+    return createElement('td', {
+        ...props,
+        className: cn('px-3 py-3 align-middle', className),
+    });
+}

package/dist/ui/tabs.d.ts

@@ -0,0 +1,6 @@
+import type React from 'react';
+export declare function TabsList({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): any;
+export declare function TabsTrigger({ as, className, active, ...props }: React.HTMLAttributes<HTMLElement> & {
+    active?: boolean;
+    as?: any;
+}): any;

package/dist/ui/tabs.js

@@ -0,0 +1,17 @@
+import { createElement } from '../create-element.js';
+import { cn } from '../utils/cn.js';
+export function TabsList({ className, ...props }) {
+    return createElement('div', {
+        ...props,
+        className: cn('inline-flex h-9 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground', className),
+    });
+}
+export function TabsTrigger({ as, className, active, ...props }) {
+    return createElement(as ?? 'span', {
+        ...props,
+        type: as === 'button' ? props.type ?? 'button' : undefined,
+        className: cn('inline-flex h-7 items-center justify-center whitespace-nowrap rounded-sm px-3 text-body-3 leading-none transition-all', active
+            ? 'bg-background text-foreground shadow-sm'
+            : 'text-muted-foreground hover:text-foreground', className),
+    });
+}

package/dist/ui/tooltip.d.ts

@@ -0,0 +1,4 @@
+import type React from 'react';
+export declare function Tooltip({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): any;
+export declare function TooltipTrigger({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): any;
+export declare function TooltipContent({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): any;

package/dist/ui/tooltip.js

@@ -0,0 +1,20 @@
+import { createElement } from '../create-element.js';
+import { cn } from '../utils/cn.js';
+export function Tooltip({ className, ...props }) {
+    return createElement('span', {
+        ...props,
+        className: cn('group relative inline-flex', className),
+    });
+}
+export function TooltipTrigger({ className, ...props }) {
+    return createElement('span', {
+        ...props,
+        className: cn('inline-flex', className),
+    });
+}
+export function TooltipContent({ className, ...props }) {
+    return createElement('span', {
+        ...props,
+        className: cn('pointer-events-none absolute bottom-full left-1/2 z-50 mb-2 hidden -translate-x-1/2 whitespace-nowrap rounded-md bg-primary px-2 py-1 text-xs text-primary-foreground shadow group-hover:block', className),
+    });
+}

package/dist/utils/cn.d.ts

@@ -0,0 +1 @@
+export declare function cn(...values: Array<false | null | string | undefined>): string;

package/dist/utils/cn.js

@@ -0,0 +1,3 @@
+export function cn(...values) {
+    return values.filter(Boolean).join(' ');
+}

package/package.json

@@ -0,0 +1,80 @@
+{
+	"name": "@pallamart/pm-core-components",
+	"version": "1.0.0",
+	"private": false,
+	"type": "module",
+	"main": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"import": "./dist/index.js",
+			"default": "./dist/index.js"
+		},
+		"./external": {
+			"types": "./dist/external/index.d.ts",
+			"import": "./dist/external/index.js",
+			"default": "./dist/external/index.js"
+		}
+	},
+	"files": [
+		"/dist"
+	],
+	"scripts": {
+		"husky:prepare": "npx husky",
+		"build": "tsc",
+		"setup:graphify": "sh scripts/graphify-setup.sh",
+		"update:graphify": "sh scripts/graphify-update.sh",
+		"lint": "npm run lint:eslint",
+		"lint:fix": "npm run lint:eslint:fix",
+		"format:check": "npx prettier --check --ignore-unknown \"src/**/*.{ts,tsx,json,md}\"",
+		"format:prettier": "npx prettier --write \"src/**/*.{ts,tsx,json,md}\"",
+		"lint:eslint": "npx eslint \"src/**/*.{ts,tsx}\"",
+		"lint:eslint:fix": "npx eslint --fix \"src/**/*.{ts,tsx}\"",
+		"release": "semantic-release"
+	},
+	"dependencies": {
+		"@pallamart/pm-icons": "1.0.0",
+		"@pallamart/pm-utilities": "1.0.1"
+	},
+	"peerDependencies": {
+		"@pallamart/pm-design-system": "1.0.1",
+		"react": "^18 || ^19"
+	},
+	"devDependencies": {
+		"@commitlint/cli": "^20.1.0",
+		"@commitlint/config-conventional": "^20.0.0",
+		"@eslint/compat": "^2.0.0",
+		"@ianvs/prettier-plugin-sort-imports": "^4.7.0",
+		"@semantic-release/changelog": "^6.0.3",
+		"@semantic-release/commit-analyzer": "^13.0.0",
+		"@semantic-release/git": "^10.0.1",
+		"@semantic-release/github": "^11.0.1",
+		"@semantic-release/npm": "^12.0.0",
+		"@semantic-release/release-notes-generator": "^14.0.1",
+		"@types/react": "^18.3.28",
+		"@typescript-eslint/eslint-plugin": "^8.48.0",
+		"@typescript-eslint/parser": "^8.48.0",
+		"commitlint": "^20.1.0",
+		"conventional-changelog-conventionalcommits": "^7.0.2",
+		"eslint": "^9.39.1",
+		"eslint-config-prettier": "^10.1.8",
+		"eslint-plugin-import": "^2.32.0",
+		"eslint-plugin-prettier": "^5.5.4",
+		"husky": "^9.1.7",
+		"lint-staged": "^16.2.7",
+		"prettier": "^3.6.2",
+		"react": "^18.3.1",
+		"semantic-release": "^24.2.0",
+		"ts-node": "^10.9.2",
+		"typescript": "^5.9.3"
+	},
+	"publishConfig": {
+		"access": "public",
+		"registry": "https://registry.npmjs.org/"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/pallamart/pm-core-components.git"
+	}
+}