@placeholderco/placeholder-ui 1.0.11 → 2.0.0

package/dist/index.js

@@ -1,4 +1,5 @@
-// UI Components
+export { default as Accordion } from './ui/Accordion.svelte';
+export { default as AccordionItem } from './ui/AccordionItem.svelte';
 export { default as Button } from './ui/Button.svelte';
 export { default as ActionIcon } from './ui/ActionIcon.svelte';
 export { default as Badge } from './ui/Badge.svelte';
@@ -8,67 +9,67 @@ export { default as Dropdown } from './ui/Dropdown.svelte';
 export { default as Dropzone } from './ui/Dropzone.svelte';
 export { default as Link } from './ui/Link.svelte';
 export { default as Loader } from './ui/Loader.svelte';
+export { default as Logo } from './ui/Logo.svelte';
 export { default as Pagination } from './ui/Pagination.svelte';
 export { default as Popover } from './ui/Popover.svelte';
+export { default as ContextMenu } from './ui/ContextMenu.svelte';
+export { default as ProgressBar } from './ui/ProgressBar.svelte';
 export { default as Tabs } from './ui/Tabs.svelte';
 export { default as Table } from './ui/Table.svelte';
 export { default as ThemeSwitcher } from './ui/ThemeSwitcher.svelte';
+export { default as Sortable } from './ui/Sortable.svelte';
+export { default as MultiSortable } from './ui/MultiSortable.svelte';
 export { default as Toaster } from './ui/Toaster.svelte';
 export { default as Tooltip } from './ui/Tooltip.svelte';
-// New UI Components
-export { default as Progress } from './ui/Progress.svelte';
-export { default as Skeleton } from './ui/Skeleton.svelte';
-export { default as LoadingOverlay } from './ui/LoadingOverlay.svelte';
-export { default as Accordion } from './ui/Accordion.svelte';
-export { default as RingProgress } from './ui/RingProgress.svelte';
-export { default as Breadcrumbs } from './ui/Breadcrumbs.svelte';
-export { default as Stepper } from './ui/Stepper.svelte';
-export { default as Timeline } from './ui/Timeline.svelte';
-// Display Components
-export { default as Alert } from './display/Alert.svelte';
+export { default as Alert } from './display/alert/Alert.svelte';
 export { default as LinkCollection } from './display/LinkCollection.svelte';
-export { default as Paper } from './display/Paper.svelte';
-export { default as Avatar } from './display/Avatar.svelte';
-// Layout Components
-export { default as AppShell } from './layout/AppShell.svelte';
 export { default as Navbar } from './layout/Navbar.svelte';
+export { default as NavbarItemView } from './layout/NavbarItemView.svelte';
 export { default as CustomNavbar } from './layout/CustomNavbar.svelte';
+export { default as AppShell } from './layout/AppShell.svelte';
 export { default as Sidenav } from './layout/Sidenav.svelte';
-// Form Components
+export { default as Paper } from './display/Paper.svelte';
+export { default as Avatar } from './display/Avatar.svelte';
 export { default as Autocomplete } from './form/Autocomplete.svelte';
 export { default as AutocompleteMulti } from './form/AutocompleteMulti.svelte';
 export { default as Checkbox } from './form/Checkbox.svelte';
 export { default as ComboBoxItemBuilder } from './form/ComboBoxItemBuilder.svelte';
+export { default as StringArrayBuilder } from './form/StringArrayBuilder.svelte';
 export { default as CronBuilder } from './form/CronBuilder.svelte';
 export { default as DatePicker } from './form/DatePicker.svelte';
+export { default as DateRangePicker } from './form/DateRangePicker.svelte';
 export { default as TimePicker } from './form/TimePicker.svelte';
 export { default as DateTimePicker } from './form/DateTimePicker.svelte';
 export { default as FormGroup } from './form/FormGroup.svelte';
 export { default as Number } from './form/Number.svelte';
+export { default as Radio } from './form/Radio.svelte';
 export { default as RadioGroup } from './form/RadioGroup.svelte';
 export { default as Select } from './form/Select.svelte';
 export { default as SelectMulti } from './form/SelectMulti.svelte';
 export { default as SegmentedControl } from './form/SegmentedControl.svelte';
 export { default as TextArea } from './form/TextArea.svelte';
 export { default as Textbox } from './form/Textbox.svelte';
+export { default as Slider } from './form/Slider.svelte';
 export { default as Switch } from './form/Switch.svelte';
 export { default as Chips } from './form/Chips.svelte';
-// New Form Components
-export { default as PasswordInput } from './form/PasswordInput.svelte';
-export { default as Slider } from './form/Slider.svelte';
-export { default as Rating } from './form/Rating.svelte';
-export { default as FileInput } from './form/FileInput.svelte';
-// Icons
+export { default as TipTap } from './editors/tiptap/TipTap.svelte';
+export { default as TipTapBubble } from './editors/tiptap/TipTapBubble.svelte';
+export { CodeBlockEditor, codeBlockLanguages, resolveCodeBlockLanguage } from './editors/tiptap/extensions/index.js';
+export { default as CodeMirror } from './editors/CodeMirror.svelte';
+export { default as GitCard } from './cards/GitCard.svelte';
 export * from './icon/index.js';
 export * from './models/ComboBoxItem.js';
 export * from './models/NavbarItem.js';
 export * from './models/NotifyModel.js';
-// Utilities
-export * from './actions/ClickOutside.js';
+export * from './util/ClickOutside.js';
 export * from './util/CronParser.js';
+export { dayjs } from './util/dayjs.js';
 export * from './util/DateFunctions.js';
-export * from './transitions/Transitions.js';
+export * from './util/DragDrop.js';
+export * from './util/Transitions.js';
+export * from './util/interceptLinkClick.js';
 export * from './util/NavigateTo.js';
-// Theme
+export * from './display/filetree/index.js';
 export * from './theme.svelte.js';
+export * from './uiTheme.svelte.js';
 export * from './ui/Toast.svelte.js';

package/dist/layout/AppShell.svelte

@@ -1,169 +1,19 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import '../styles/index.css';
+	import '../bootstrap.min.css';
+	import '../app.css';
 
-	interface Props {
-		/** Header/navbar content */
-		header?: Snippet;
-		/** Left sidebar content */
-		aside?: Snippet;
-		/** Right sidebar content */
-		asideRight?: Snippet;
-		/** Footer content */
-		footer?: Snippet;
-		/** Main content */
-		children?: Snippet;
-		/** Width of the left aside */
-		asideWidth?: string;
-		/** Width of the right aside */
-		asideRightWidth?: string;
-		/** Height of the header */
-		headerHeight?: string;
-		/** Height of the footer */
-		footerHeight?: string;
-		/** Whether the header is fixed/sticky */
-		fixedHeader?: boolean;
-		/** Whether the aside is fixed */
-		fixedAside?: boolean;
-		/** Additional class for the shell */
-		class?: string;
+	export interface AppShellProps {
+		/** Application content (includes global styles) */
+		children: Snippet;
 	}
 
-	let {
-		header,
-		aside,
-		asideRight,
-		footer,
-		children,
-		asideWidth = '260px',
-		asideRightWidth = '260px',
-		headerHeight = 'auto',
-		footerHeight = '60px',
-		fixedHeader = true,
-		fixedAside = true,
-		class: className = ''
-	}: Props = $props();
-
-	const hasAside = $derived(!!aside);
-	const hasAsideRight = $derived(!!asideRight);
-	const hasHeader = $derived(!!header);
-	const hasFooter = $derived(!!footer);
+	let { children }: AppShellProps = $props();
 </script>
 
-<div
-	class="app-shell {className}"
-	class:has-aside={hasAside}
-	class:has-aside-right={hasAsideRight}
-	class:has-header={hasHeader}
-	class:has-footer={hasFooter}
-	class:fixed-header={fixedHeader}
-	class:fixed-aside={fixedAside}
-	style:--app-shell-aside-width={asideWidth}
-	style:--app-shell-aside-right-width={asideRightWidth}
-	style:--app-shell-header-height={headerHeight}
-	style:--app-shell-footer-height={footerHeight}
->
-	{#if header}
-		<header class="app-shell-header">
-			{@render header()}
-		</header>
-	{/if}
-
-	<div class="app-shell-body">
-		{#if aside}
-			<aside class="app-shell-aside">
-				{@render aside()}
-			</aside>
-		{/if}
-
-		<main class="app-shell-main">
-			{@render children?.()}
-		</main>
-
-		{#if asideRight}
-			<aside class="app-shell-aside-right">
-				{@render asideRight()}
-			</aside>
-		{/if}
-	</div>
-
-	{#if footer}
-		<footer class="app-shell-footer">
-			{@render footer()}
-		</footer>
-	{/if}
-</div>
-
-<style>
-	.app-shell {
-		display: flex;
-		flex-direction: column;
-		min-height: 100vh;
-	}
-
-	.app-shell-header {
-		height: var(--app-shell-header-height);
-		flex-shrink: 0;
-	}
-
-	.fixed-header .app-shell-header {
-		position: sticky;
-		top: 0;
-		z-index: var(--pui-z-sticky, 100);
-	}
-
-	.app-shell-body {
-		display: flex;
-		flex: 1;
-		min-height: 0;
-	}
-
-	.app-shell-aside {
-		width: var(--app-shell-aside-width);
-		flex-shrink: 0;
-		overflow-y: auto;
-	}
-
-	.fixed-aside .app-shell-aside {
-		position: sticky;
-		top: var(--app-shell-header-height);
-		height: calc(100vh - var(--app-shell-header-height));
-		align-self: flex-start;
-	}
-
-	.fixed-aside.has-footer .app-shell-aside {
-		height: calc(100vh - var(--app-shell-header-height) - var(--app-shell-footer-height));
-	}
-
-	.app-shell-aside-right {
-		width: var(--app-shell-aside-right-width);
-		flex-shrink: 0;
-		overflow-y: auto;
-	}
-
-	.fixed-aside .app-shell-aside-right {
-		position: sticky;
-		top: var(--app-shell-header-height);
-		height: calc(100vh - var(--app-shell-header-height));
-		align-self: flex-start;
-	}
-
-	.app-shell-main {
-		flex: 1;
-		min-width: 0;
-		overflow-x: hidden;
-	}
-
-	.app-shell-footer {
-		height: var(--app-shell-footer-height);
-		flex-shrink: 0;
-	}
-
-	/* Responsive behavior */
-	@media (max-width: 768px) {
-		.app-shell-aside,
-		.app-shell-aside-right {
-			display: none;
-		}
-	}
-</style>
+<!--
+	AppShell loads the library's base stylesheet plus the bundled Bootstrap 5 build.
+	To use the library without Bootstrap, skip AppShell and import
+	`@placeholderco/placeholder-ui/app.css` directly in your root layout instead.
+-->
+{@render children?.()}

package/dist/layout/AppShell.svelte.d.ts

@@ -1,31 +1,10 @@
 import type { Snippet } from 'svelte';
-import '../styles/index.css';
-interface Props {
-    /** Header/navbar content */
-    header?: Snippet;
-    /** Left sidebar content */
-    aside?: Snippet;
-    /** Right sidebar content */
-    asideRight?: Snippet;
-    /** Footer content */
-    footer?: Snippet;
-    /** Main content */
-    children?: Snippet;
-    /** Width of the left aside */
-    asideWidth?: string;
-    /** Width of the right aside */
-    asideRightWidth?: string;
-    /** Height of the header */
-    headerHeight?: string;
-    /** Height of the footer */
-    footerHeight?: string;
-    /** Whether the header is fixed/sticky */
-    fixedHeader?: boolean;
-    /** Whether the aside is fixed */
-    fixedAside?: boolean;
-    /** Additional class for the shell */
-    class?: string;
+import '../bootstrap.min.css';
+import '../app.css';
+export interface AppShellProps {
+    /** Application content (includes global styles) */
+    children: Snippet;
 }
-declare const AppShell: import("svelte").Component<Props, {}, "">;
+declare const AppShell: import("svelte").Component<AppShellProps, {}, "">;
 type AppShell = ReturnType<typeof AppShell>;
 export default AppShell;

package/dist/layout/CustomNavbar.svelte

@@ -1,12 +1,14 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	
-	interface Props {
+	export interface CustomNavbarProps {
+		/** Header text for the mobile drawer */
 		drawerHeader?: string | undefined;
+		/** Navbar content */
 		children: Snippet;
 	}
 
-	let { drawerHeader = undefined, children }: Props = $props();
+	let { drawerHeader = undefined, children }: CustomNavbarProps = $props();
 
 	// export let drawerHeader: string | undefined = undefined;
 	// export let items: NavbarItem[] = [];
@@ -44,18 +46,18 @@
 	header {
 		position: sticky;
 		top: 0;
-		z-index: var(--pui-z-sticky);
-		height: 46px;
+		z-index: 40;
+		height: var(--header-height);
 
 		display: flex;
 
-		background: var(--pui-color-primary);
+		background: var(--ui-primary);
 
 		align-items: center;
-		padding: 0 var(--pui-spacing-4);
+		padding: 0 1rem;
 	}
 
 	:global(.dark) header {
-		background: var(--pui-color-black);
+		background: black;
 	}
 </style>

package/dist/layout/CustomNavbar.svelte.d.ts

@@ -1,8 +1,10 @@
 import type { Snippet } from 'svelte';
-interface Props {
+export interface CustomNavbarProps {
+    /** Header text for the mobile drawer */
     drawerHeader?: string | undefined;
+    /** Navbar content */
     children: Snippet;
 }
-declare const CustomNavbar: import("svelte").Component<Props, {}, "">;
+declare const CustomNavbar: import("svelte").Component<CustomNavbarProps, {}, "">;
 type CustomNavbar = ReturnType<typeof CustomNavbar>;
 export default CustomNavbar;