@placeholderco/placeholder-ui 1.0.11 → 2.0.0

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@placeholderco/placeholder-ui",
-  "version": "1.0.11",
-  "description": "A modern, customizable Svelte 5 UI component library with comprehensive theming support",
+  "version": "2.0.0",
+  "description": "A modern, customizable Svelte 5 UI component library with comprehensive theming support. Re-brand it with a single config object.",
   "license": "MIT",
+  "author": "Placeholderco",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/PlaceholderUI/placeholder-ui.git"
@@ -19,16 +20,21 @@
     "design-system",
     "css-variables",
     "theming",
-    "dark-mode"
+    "dark-mode",
+    "tiptap",
+    "codemirror"
   ],
-  "author": "Placeholderco",
+  "engines": {
+    "node": ">=24.0.0"
+  },
   "files": [
     "dist",
     "!dist/**/*.test.*",
     "!dist/**/*.spec.*"
   ],
   "sideEffects": [
-    "**/*.css"
+    "**/*.css",
+    "**/util/dayjs.js"
   ],
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -38,44 +44,78 @@
       "types": "./dist/index.d.ts",
       "svelte": "./dist/index.js"
     },
-    "./styles": {
-      "import": "./dist/styles/index.css"
-    }
+    "./app.css": "./dist/app.css",
+    "./bootstrap.css": "./dist/bootstrap.min.css"
   },
   "peerDependencies": {
+    "@sveltejs/kit": "^2.26.0",
     "svelte": "^5.0.0"
   },
   "devDependencies": {
     "@sveltejs/adapter-static": "^3.0.10",
-    "@sveltejs/kit": "^2.55.0",
-    "@sveltejs/package": "^2.5.7",
-    "@sveltejs/vite-plugin-svelte": "^7.0.0",
-    "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/svelte": "^5.3.1",
-    "jsdom": "^28.1.0",
-    "prettier": "^3.8.1",
-    "prettier-plugin-svelte": "^3.5.1",
-    "publint": "^0.3.18",
-    "svelte": "^5.53.12",
-    "svelte-check": "^4.4.5",
-    "typescript": "^5.9.3",
-    "vite": "^8.0.0",
-    "vitest": "^4.1.0"
+    "@sveltejs/kit": "^2.70.3",
+    "@sveltejs/package": "^2.5.8",
+    "@sveltejs/vite-plugin-svelte": "^7.3.0",
+    "@types/node": "^26.2.0",
+    "globals": "^17.11.0",
+    "prettier": "^3.9.6",
+    "prettier-plugin-svelte": "^4.1.1",
+    "publint": "^0.3.24",
+    "rimraf": "^6.1.3",
+    "svelte": "^5.56.10",
+    "svelte-check": "^4.7.6",
+    "typescript": "^6.0.3",
+    "vite": "^8.2.2"
   },
   "dependencies": {
-    "dayjs": "^1.11.20",
-    "svelte-sonner": "^1.1.0"
+    "@codemirror/autocomplete": "^6.20.3",
+    "@codemirror/commands": "^6.11.0",
+    "@codemirror/lang-css": "^6.3.1",
+    "@codemirror/lang-html": "^6.4.12",
+    "@codemirror/lang-javascript": "^6.2.5",
+    "@codemirror/lang-json": "^6.0.2",
+    "@codemirror/lang-markdown": "^6.5.2",
+    "@codemirror/lang-sql": "^6.10.0",
+    "@codemirror/language": "^6.12.4",
+    "@codemirror/legacy-modes": "^6.5.3",
+    "@codemirror/lint": "^6.9.7",
+    "@codemirror/search": "^6.7.1",
+    "@codemirror/state": "^6.7.1",
+    "@codemirror/theme-one-dark": "^6.1.3",
+    "@codemirror/view": "^6.43.9",
+    "@lezer/highlight": "^1.2.3",
+    "@tiptap/core": "^3.30.3",
+    "@tiptap/extension-bubble-menu": "^3.30.3",
+    "@tiptap/extension-code-block": "^3.30.3",
+    "@tiptap/extension-collaboration": "^3.30.3",
+    "@tiptap/extension-collaboration-caret": "^3.30.3",
+    "@tiptap/extension-color": "^3.30.3",
+    "@tiptap/extension-image": "^3.30.3",
+    "@tiptap/extension-link": "^3.30.3",
+    "@tiptap/extension-placeholder": "^3.30.3",
+    "@tiptap/extension-subscript": "^3.30.3",
+    "@tiptap/extension-superscript": "^3.30.3",
+    "@tiptap/extension-table": "^3.30.3",
+    "@tiptap/extension-text-align": "^3.30.3",
+    "@tiptap/extension-text-style": "^3.30.3",
+    "@tiptap/extension-underline": "^3.30.3",
+    "@tiptap/pm": "^3.30.3",
+    "@tiptap/starter-kit": "^3.30.3",
+    "dayjs": "^1.11.23",
+    "svelte-sonner": "^1.2.1",
+    "yjs": "^13.6.32"
   },
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
     "dev": "vite dev",
-    "build": "vite build && npm run prepack",
+    "build": "vite build && pnpm run prepack",
     "preview": "vite preview",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
     "format": "prettier --write .",
-    "test": "vitest run"
+    "clean": "rimraf dist build .svelte-kit",
+    "publish:package": "pnpm publish --access public"
   }
 }

package/dist/display/Alert.svelte

@@ -1,179 +0,0 @@
-<script lang="ts">
-  import type { Snippet } from "svelte";
-  import Icon from "../icon/Icon.svelte";
-  import { iconInfoCircle, iconAlertTriangle, iconCircleCheck, iconCircleX, iconX } from "../icon/index.js";
-
-  type AlertVariant = "default" | "secondary" | "success" | "warning" | "danger" | "info";
-
-  interface Props {
-    variant?: AlertVariant;
-    title?: string;
-    dismissible?: boolean;
-    children?: Snippet;
-    ondismiss?: () => void;
-    class?: string;
-  }
-
-  let { variant = "default", title, dismissible = false, children, ondismiss, class: className = "" }: Props = $props();
-
-  let visible = $state(true);
-
-  const icons: Record<AlertVariant, string> = {
-    default: iconInfoCircle,
-    secondary: iconInfoCircle,
-    info: iconInfoCircle,
-    success: iconCircleCheck,
-    warning: iconAlertTriangle,
-    danger: iconCircleX,
-  };
-
-  function dismiss() {
-    visible = false;
-    ondismiss?.();
-  }
-</script>
-
-{#if visible}
-  <div class="alert alert-{variant} {className}" role="alert">
-    <div class="alert-icon">
-      <Icon svg={icons[variant]} size="20px" />
-    </div>
-    <div class="alert-content">
-      {#if title}
-        <div class="alert-title">{title}</div>
-      {/if}
-      {#if children}
-        <div class="alert-message">
-          {@render children()}
-        </div>
-      {/if}
-    </div>
-    {#if dismissible}
-      <button class="alert-dismiss" onclick={dismiss} aria-label="Dismiss">
-        <Icon svg={iconX} size="16px" />
-      </button>
-    {/if}
-  </div>
-{/if}
-
-<style>
-  .alert {
-    display: flex;
-    align-items: flex-start;
-    gap: var(--pui-spacing-3);
-    padding: var(--pui-spacing-4);
-    border-radius: var(--pui-radius-md);
-    border: 1px solid;
-  }
-
-  .alert-default {
-    background-color: rgba(122, 74, 153, 0.15);
-    color: rgb(122, 74, 153);
-    border-color: var(--pui-color-primary);
-  }
-
-  .alert-secondary {
-    background-color: var(--pui-color-gray-50);
-    border-color: var(--pui-color-gray-200);
-    color: var(--pui-color-gray-800);
-  }
-
-  .alert-info {
-    background-color: var(--pui-alert-info-bg);
-    border-color: var(--pui-alert-info-border);
-    color: var(--pui-color-info-dark, var(--pui-color-info));
-  }
-
-  .alert-success {
-    background-color: var(--pui-alert-success-bg);
-    border-color: var(--pui-alert-success-border);
-    color: var(--pui-color-success-dark, var(--pui-color-success));
-  }
-
-  .alert-warning {
-    background-color: var(--pui-alert-warning-bg);
-    border-color: var(--pui-alert-warning-border);
-    color: var(--pui-color-warning-dark, var(--pui-color-warning));
-  }
-
-  .alert-danger {
-    background-color: var(--pui-alert-danger-bg);
-    border-color: var(--pui-alert-danger-border);
-    color: var(--pui-color-danger, var(--pui-color-danger));
-  }
-
-  :global(.dark) .alert-default {
-    background-color: rgba(122, 74, 153, 0.15);
-    color: var(--pui-color-primary-light);
-    border-color: var(--pui-color-primary);
-  }
-
-  :global(.dark) .alert-secondary {
-    background-color: var(--pui-color-dark-200);
-    border-color: var(--pui-color-dark-border);
-    color: var(--pui-color-gray-100);
-  }
-
-  :global(.dark) .alert-info {
-    background-color: var(--pui-alert-info-bg);
-    border-color: var(--pui-alert-info-border);
-    color: #6edff6;
-  }
-
-  :global(.dark) .alert-success {
-    background-color: var(--pui-alert-success-bg);
-    border-color: var(--pui-alert-success-border);
-    color: #75b798;
-  }
-
-  :global(.dark) .alert-warning {
-    background-color: var(--pui-alert-warning-bg);
-    border-color: var(--pui-alert-warning-border);
-    color: #ffda6a;
-  }
-
-  :global(.dark) .alert-danger {
-    background-color: var(--pui-alert-danger-bg);
-    border-color: var(--pui-alert-danger-border);
-    color: #ea868f;
-  }
-
-  .alert-icon {
-    flex-shrink: 0;
-    display: flex;
-    align-items: center;
-  }
-
-  .alert-content {
-    flex: 1;
-    min-width: 0;
-  }
-
-  .alert-title {
-    font-weight: var(--pui-font-weight-semibold);
-    margin-bottom: var(--pui-spacing-1);
-  }
-
-  .alert-message {
-    line-height: var(--pui-line-height-relaxed);
-  }
-
-  .alert-dismiss {
-    flex-shrink: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: none;
-    border: none;
-    cursor: pointer;
-    padding: var(--pui-spacing-1);
-    border-radius: var(--pui-radius-sm);
-    color: inherit;
-    opacity: 0.7;
-    transition: opacity var(--pui-transition-fast) var(--pui-ease-in-out);
-  }
-
-  .alert-dismiss:hover {
-    opacity: 1;
-  }
-</style>

package/dist/display/Alert.svelte.d.ts

@@ -1,13 +0,0 @@
-import type { Snippet } from "svelte";
-type AlertVariant = "default" | "secondary" | "success" | "warning" | "danger" | "info";
-interface Props {
-    variant?: AlertVariant;
-    title?: string;
-    dismissible?: boolean;
-    children?: Snippet;
-    ondismiss?: () => void;
-    class?: string;
-}
-declare const Alert: import("svelte").Component<Props, {}, "">;
-type Alert = ReturnType<typeof Alert>;
-export default Alert;

package/dist/form/FileInput.svelte

@@ -1,235 +0,0 @@
-<script lang="ts">
-	import FormGroup from './FormGroup.svelte';
-	import Icon from '../icon/Icon.svelte';
-	import { iconUpload, iconX } from '../icon/index.js';
-	import Button from '../ui/Button.svelte';
-
-	interface Props {
-		label?: string;
-		value?: File | File[] | null;
-		accept?: string;
-		multiple?: boolean;
-		disabled?: boolean;
-		placeholder?: string;
-		clearable?: boolean;
-		required?: boolean;
-		showError?: boolean;
-		errorText?: string;
-		size?: 'xs' | 'sm' | 'md' | 'lg';
-		variant?: 'default' | 'filled';
-		leftIcon?: string;
-		class?: string;
-		containerClass?: string;
-		tooltipLocation?: 'top' | 'bottom' | 'left' | 'right';
-		tooltipText?: string;
-		onchange?: (files: File | File[] | null) => void;
-	}
-
-	let {
-		label = '',
-		value = $bindable(null),
-		accept = '',
-		multiple = false,
-		disabled = false,
-		placeholder = 'Choose file',
-		clearable = true,
-		required = false,
-		showError = false,
-		errorText = '',
-		size = 'md',
-		variant = 'default',
-		leftIcon = undefined,
-		class: classes = '',
-		containerClass = '',
-		tooltipLocation = 'top',
-		tooltipText = undefined,
-		onchange
-	}: Props = $props();
-
-	let inputElement: HTMLInputElement;
-
-	const displayValue = $derived.by(() => {
-		if (!value) return '';
-		if (Array.isArray(value)) {
-			if (value.length === 0) return '';
-			if (value.length === 1) return value[0].name;
-			return `${value.length} files selected`;
-		}
-		return value.name;
-	});
-
-	function handleClick() {
-		if (disabled) return;
-		inputElement?.click();
-	}
-
-	function handleChange(e: Event) {
-		const target = e.target as HTMLInputElement;
-		const files = target.files;
-		if (!files || files.length === 0) {
-			value = null;
-		} else if (multiple) {
-			value = Array.from(files);
-		} else {
-			value = files[0];
-		}
-		onchange?.(value);
-	}
-
-	function handleClear(e: Event) {
-		e.stopPropagation();
-		value = null;
-		if (inputElement) {
-			inputElement.value = '';
-		}
-		onchange?.(null);
-	}
-</script>
-
-<div class="file-input-container {containerClass}">
-	<FormGroup
-		{label}
-		{required}
-		class={classes}
-		{tooltipLocation}
-		{tooltipText}
-		{showError}
-		{errorText}
-	>
-		<div class="file-input-wrapper size-{size} variant-{variant}" class:disabled>
-			<input
-				bind:this={inputElement}
-				type="file"
-				{accept}
-				{multiple}
-				{disabled}
-				class="file-input-hidden"
-				onchange={handleChange}
-			/>
-			<button type="button" class="file-input-button" onclick={handleClick} {disabled}>
-				<span class="file-input-icon">
-					<Icon svg={leftIcon || iconUpload} size="1.125em" />
-				</span>
-				<span class="file-input-text" class:placeholder={!displayValue}>
-					{displayValue || placeholder}
-				</span>
-			</button>
-			{#if clearable && value}
-				<button type="button" class="file-input-clear" onclick={handleClear} aria-label="Clear file">
-					<Icon svg={iconX} size="14px" />
-				</button>
-			{/if}
-		</div>
-	</FormGroup>
-</div>
-
-<style>
-	.file-input-container {
-		width: 100%;
-	}
-
-	.file-input-hidden {
-		display: none;
-	}
-
-	.file-input-wrapper {
-		display: flex;
-		align-items: center;
-		width: 100%;
-		border: 1px solid var(--pui-input-border);
-		background-color: var(--pui-input-bg);
-		border-radius: var(--pui-radius-base);
-		transition:
-			border-color var(--pui-transition-fast) var(--pui-ease-in-out),
-			box-shadow var(--pui-transition-fast) var(--pui-ease-in-out);
-	}
-
-	.file-input-wrapper:focus-within {
-		border-color: var(--pui-input-border-focus);
-	}
-
-	.file-input-wrapper.disabled {
-		opacity: 0.5;
-		cursor: not-allowed;
-		background: var(--pui-input-bg-disabled);
-	}
-
-	.variant-filled {
-		background-color: var(--pui-color-gray-100);
-		border-color: transparent;
-	}
-
-	:global(.dark) .variant-filled {
-		background-color: var(--pui-color-dark-200);
-	}
-
-	/* Sizes */
-	.size-xs .file-input-button {
-		padding: var(--pui-spacing-1) var(--pui-spacing-2);
-		font-size: var(--pui-font-size-xs);
-	}
-	.size-sm .file-input-button {
-		padding: var(--pui-spacing-1) var(--pui-spacing-2);
-		font-size: var(--pui-font-size-sm);
-	}
-	.size-md .file-input-button {
-		padding: var(--pui-spacing-2) var(--pui-spacing-3);
-		font-size: var(--pui-font-size-base);
-	}
-	.size-lg .file-input-button {
-		padding: var(--pui-spacing-3) var(--pui-spacing-4);
-		font-size: var(--pui-font-size-md);
-	}
-
-	.file-input-button {
-		display: flex;
-		align-items: center;
-		gap: var(--pui-spacing-2);
-		flex: 1;
-		background: none;
-		border: none;
-		cursor: pointer;
-		text-align: left;
-		color: var(--pui-input-text);
-		min-width: 0;
-	}
-
-	.file-input-button:disabled {
-		cursor: not-allowed;
-	}
-
-	.file-input-icon {
-		display: flex;
-		align-items: center;
-		color: var(--pui-text-muted);
-		flex-shrink: 0;
-	}
-
-	.file-input-text {
-		flex: 1;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-	}
-
-	.file-input-text.placeholder {
-		color: var(--pui-text-muted);
-	}
-
-	.file-input-clear {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		background: none;
-		border: none;
-		cursor: pointer;
-		padding: var(--pui-spacing-2);
-		color: var(--pui-text-muted);
-		border-radius: var(--pui-radius-sm);
-		transition: color var(--pui-transition-fast) var(--pui-ease-in-out);
-	}
-
-	.file-input-clear:hover {
-		color: var(--pui-color-danger);
-	}
-</style>

package/dist/form/FileInput.svelte.d.ts

@@ -1,23 +0,0 @@
-interface Props {
-    label?: string;
-    value?: File | File[] | null;
-    accept?: string;
-    multiple?: boolean;
-    disabled?: boolean;
-    placeholder?: string;
-    clearable?: boolean;
-    required?: boolean;
-    showError?: boolean;
-    errorText?: string;
-    size?: 'xs' | 'sm' | 'md' | 'lg';
-    variant?: 'default' | 'filled';
-    leftIcon?: string;
-    class?: string;
-    containerClass?: string;
-    tooltipLocation?: 'top' | 'bottom' | 'left' | 'right';
-    tooltipText?: string;
-    onchange?: (files: File | File[] | null) => void;
-}
-declare const FileInput: import("svelte").Component<Props, {}, "value">;
-type FileInput = ReturnType<typeof FileInput>;
-export default FileInput;