@placeholderco/placeholder-ui 1.0.11 → 2.0.0

package/dist/styles/components.css

@@ -1,199 +0,0 @@
-/**
- * Component Variables
- * Component-specific CSS variables for fine-grained customization.
- */
-
-:root {
-	/* ============================================
-	 * FORM INPUTS
-	 * ============================================ */
-	--pui-input-bg: var(--pui-color-white);
-	--pui-input-bg-disabled: var(--pui-color-gray-200);
-	--pui-input-border: var(--pui-border-default);
-	--pui-input-border-focus: var(--pui-color-primary);
-	--pui-input-border-error: var(--pui-color-danger);
-	--pui-input-placeholder: var(--pui-text-placeholder);
-	--pui-input-text: var(--pui-text-primary);
-	--pui-input-padding-y: var(--pui-spacing-1);
-	--pui-input-padding-x: var(--pui-spacing-2);
-	--pui-input-font-size: var(--pui-font-size-md);
-	--pui-input-border-radius: var(--pui-radius-base);
-	--pui-input-border-width: 1px;
-
-	/* ============================================
-	 * BUTTON
-	 * ============================================ */
-	--pui-btn-padding-y: var(--pui-spacing-2);
-	--pui-btn-padding-x: var(--pui-spacing-4);
-	--pui-btn-font-size: var(--pui-font-size-base);
-	--pui-btn-font-weight: var(--pui-font-weight-semibold);
-	--pui-btn-border-radius: var(--pui-radius-md);
-	--pui-btn-border-width: 1px;
-
-	/* ============================================
-	 * PAPER
-	 * ============================================ */
-	--pui-paper-bg: var(--pui-bg-surface);
-	--pui-paper-shadow: var(--pui-shadow-sm);
-	--pui-paper-radius: var(--pui-radius-base);
-	--pui-paper-padding: var(--pui-spacing-3);
-	--pui-paper-title-bg: rgb(252, 252, 252);
-	--pui-paper-title-border: rgb(229, 231, 235);
-	--pui-paper-body-bg: var(--pui-color-white);
-
-	/* ============================================
-	 * DIALOG
-	 * ============================================ */
-	--pui-dialog-backdrop: var(--pui-bg-overlay-dark);
-	--pui-dialog-bg: var(--pui-bg-page);
-	--pui-dialog-radius: var(--pui-radius-base);
-	--pui-dialog-shadow: var(--pui-shadow-lg);
-	--pui-dialog-sm-width: 20rem;
-	--pui-dialog-md-width: 30rem;
-	--pui-dialog-lg-width: 40rem;
-	--pui-dialog-xl-width: 50rem;
-
-	/* ============================================
-	 * DRAWER
-	 * ============================================ */
-	--pui-drawer-bg: var(--pui-bg-page);
-	--pui-drawer-shadow: var(--pui-shadow-lg);
-	--pui-drawer-width: 400px;
-	--pui-drawer-max-width: 90vw;
-
-	/* ============================================
-	 * SIDENAV
-	 * ============================================ */
-	--pui-sidenav-width: 260px;
-	--pui-sidenav-collapsed-width: 60px;
-	--pui-sidenav-bg: var(--pui-bg-surface);
-	--pui-sidenav-border: var(--pui-border-default);
-	--pui-sidenav-item-hover-bg: rgba(var(--pui-color-primary-rgb), 0.08);
-	--pui-sidenav-item-active-bg: rgba(var(--pui-color-secondary-rgb), 0.2);
-	--pui-sidenav-item-active-border: var(--pui-color-secondary);
-
-	/* ============================================
-	 * NAVBAR
-	 * ============================================ */
-	--pui-navbar-height: 60px;
-	--pui-navbar-bg: var(--pui-bg-surface);
-	--pui-navbar-border: var(--pui-border-default);
-
-	/* ============================================
-	 * DROPDOWN
-	 * ============================================ */
-	--pui-dropdown-bg: var(--pui-bg-surface);
-	--pui-dropdown-border: var(--pui-border-default);
-	--pui-dropdown-radius: var(--pui-radius-md);
-	--pui-dropdown-shadow: var(--pui-shadow-md);
-	--pui-dropdown-item-hover-bg: var(--pui-bg-surface-raised);
-	--pui-dropdown-item-active-bg: rgba(var(--pui-color-secondary-rgb), 0.15);
-
-	/* ============================================
-	 * POPOVER
-	 * ============================================ */
-	--pui-popover-bg: var(--pui-bg-surface);
-	--pui-popover-border: var(--pui-border-default);
-	--pui-popover-radius: var(--pui-radius-md);
-	--pui-popover-shadow: var(--pui-shadow-md);
-
-	/* ============================================
-	 * TOOLTIP
-	 * ============================================ */
-	--pui-tooltip-bg: var(--pui-color-gray-900);
-	--pui-tooltip-text: var(--pui-color-white);
-	--pui-tooltip-radius: var(--pui-radius-base);
-
-	/* ============================================
-	 * BADGE
-	 * ============================================ */
-	--pui-badge-padding-y: var(--pui-spacing-0_5);
-	--pui-badge-padding-x: var(--pui-spacing-2);
-	--pui-badge-font-size: var(--pui-font-size-xs);
-	--pui-badge-radius: var(--pui-radius-full);
-
-	/* ============================================
-	 * TABLE
-	 * ============================================ */
-	--pui-table-bg: var(--pui-bg-surface);
-	--pui-table-border: var(--pui-border-subtle);
-	--pui-table-radius: var(--pui-radius-base);
-	--pui-table-header-bg: var(--pui-bg-surface-raised);
-	--pui-table-row-hover-bg: var(--pui-bg-surface-raised);
-
-	/* ============================================
-	 * TABS
-	 * ============================================ */
-	--pui-tabs-border: var(--pui-border-default);
-	--pui-tab-hover-bg: var(--pui-bg-surface-raised);
-	--pui-tab-active-border: var(--pui-color-secondary);
-
-	/* ============================================
-	 * ALERT
-	 * ============================================ */
-	--pui-alert-radius: var(--pui-radius-md);
-	--pui-alert-info-bg: rgba(28, 126, 214, 0.1);
-	--pui-alert-info-border: var(--pui-color-info);
-	--pui-alert-success-bg: rgba(55, 178, 77, 0.1);
-	--pui-alert-success-border: var(--pui-color-success);
-	--pui-alert-warning-bg: rgba(252, 196, 25, 0.1);
-	--pui-alert-warning-border: var(--pui-color-warning);
-	--pui-alert-danger-bg: var(--pui-color-danger-subtle);
-	--pui-alert-danger-border: var(--pui-color-danger);
-
-	/* ============================================
-	 * AVATAR
-	 * ============================================ */
-	--pui-avatar-bg: var(--pui-color-gray-300);
-	--pui-avatar-text: var(--pui-color-gray-700);
-	--pui-avatar-radius: var(--pui-radius-full);
-
-	/* ============================================
-	 * LOADER
-	 * ============================================ */
-	--pui-loader-color: var(--pui-color-primary);
-	--pui-loader-size: 2rem;
-
-	/* ============================================
-	 * SWITCH
-	 * ============================================ */
-	--pui-switch-width: 2.5rem;
-	--pui-switch-height: 1.5rem;
-	--pui-switch-bg: var(--pui-color-gray-300);
-	--pui-switch-bg-checked: var(--pui-color-secondary);
-	--pui-switch-thumb-bg: var(--pui-color-white);
-
-	/* ============================================
-	 * CHECKBOX & RADIO
-	 * ============================================ */
-	--pui-check-size: 1.125rem;
-	--pui-check-bg: var(--pui-input-bg);
-	--pui-check-border: var(--pui-input-border);
-	--pui-check-bg-checked: var(--pui-color-primary);
-	--pui-check-icon-color: var(--pui-color-primary);
-
-	/* ============================================
-	 * DATEPICKER
-	 * ============================================ */
-	--pui-datepicker-bg: var(--pui-bg-surface);
-	--pui-datepicker-border: var(--pui-border-default);
-	--pui-datepicker-shadow: var(--pui-shadow-md);
-	--pui-datepicker-day-selected-bg: var(--pui-color-secondary);
-	--pui-datepicker-day-selected-text: var(--pui-color-primary);
-	--pui-datepicker-day-today-border: var(--pui-color-accent);
-
-	/* ============================================
-	 * PAGINATION
-	 * ============================================ */
-	--pui-pagination-item-hover-bg: var(--pui-bg-surface-raised);
-	--pui-pagination-item-active-bg: var(--pui-color-primary);
-	--pui-pagination-item-active-text: var(--pui-color-white);
-
-	/* ============================================
-	 * TOAST
-	 * ============================================ */
-	--pui-toast-bg: var(--pui-bg-surface);
-	--pui-toast-border: var(--pui-border-default);
-	--pui-toast-radius: var(--pui-radius-md);
-	--pui-toast-shadow: var(--pui-shadow-lg);
-}

package/dist/styles/dark.css

@@ -1,146 +0,0 @@
-/**
- * Dark Theme Overrides
- * Override variables when .dark class is applied to the document.
- */
-
-.dark {
-	/* ============================================
-	 * SURFACE COLORS
-	 * ============================================ */
-	--pui-bg-page: var(--pui-color-dark-100);
-	--pui-bg-surface: var(--pui-color-dark-400);
-	--pui-bg-surface-raised: var(--pui-color-dark-200);
-	--pui-bg-surface-sunken: var(--pui-color-dark-400);
-
-	/* ============================================
-	 * TEXT COLORS
-	 * ============================================ */
-	--pui-text-primary: var(--pui-color-off-white);
-	--pui-text-secondary: rgb(180, 180, 180);
-	--pui-text-muted: rgb(140, 140, 140);
-	--pui-text-disabled: rgb(100, 100, 100);
-	--pui-text-placeholder: rgb(115, 115, 115);
-	--pui-text-danger: var(--pui-color-danger-lighter);
-
-	/* ============================================
-	 * BORDER COLORS
-	 * ============================================ */
-	--pui-border-default: var(--pui-color-dark-border);
-	--pui-border-subtle: var(--pui-color-dark-border-subtle);
-	--pui-border-strong: rgb(75, 80, 90);
-
-	/* ============================================
-	 * ACCENT COLORS
-	 * ============================================ */
-	--pui-accent-color-rgb: var(--pui-color-secondary-rgb);
-	--pui-accent-color: var(--pui-color-secondary);
-	--pui-accent-text-color: var(--pui-color-black);
-
-	/* ============================================
-	 * SCROLLBAR
-	 * ============================================ */
-	--pui-scrollbar-track: var(--pui-color-dark-500);
-	--pui-scrollbar-thumb-border: var(--pui-color-black);
-
-	/* ============================================
-	 * FORM INPUTS
-	 * ============================================ */
-	--pui-input-bg: var(--pui-color-dark-200);
-	--pui-input-bg-disabled: var(--pui-color-dark-border);
-
-	/* ============================================
-	 * PAPER
-	 * ============================================ */
-	--pui-paper-title-bg: var(--pui-color-dark-400);
-	--pui-paper-title-border: var(--pui-color-dark-border-subtle);
-	--pui-paper-body-bg: var(--pui-color-dark-300);
-
-	/* ============================================
-	 * DIALOG
-	 * ============================================ */
-	--pui-dialog-backdrop: rgba(0, 0, 0, 0.75);
-
-	/* ============================================
-	 * SIDENAV
-	 * ============================================ */
-	--pui-sidenav-item-hover-bg: rgba(var(--pui-color-primary-rgb), 0.2);
-	--pui-sidenav-item-active-bg: rgba(var(--pui-color-primary-rgb), 0.3);
-	--pui-sidenav-item-active-border: var(--pui-color-primary);
-
-	/* ============================================
-	 * DROPDOWN
-	 * ============================================ */
-	--pui-dropdown-item-hover-bg: var(--pui-color-dark-200);
-	--pui-dropdown-item-active-bg: rgba(var(--pui-color-secondary-rgb), 0.2);
-
-	/* ============================================
-	 * TOOLTIP
-	 * ============================================ */
-	--pui-tooltip-bg: var(--pui-color-gray-100);
-	--pui-tooltip-text: var(--pui-color-gray-900);
-
-	/* ============================================
-	 * TABLE
-	 * ============================================ */
-	--pui-table-header-bg: var(--pui-color-dark-400);
-	--pui-table-row-hover-bg: var(--pui-color-dark-200);
-
-	/* ============================================
-	 * TABS
-	 * ============================================ */
-	--pui-tab-hover-bg: var(--pui-color-dark-200);
-
-	/* ============================================
-	 * ALERT
-	 * ============================================ */
-	--pui-alert-info-bg: #032830;
-	--pui-alert-info-border: #087990;
-	--pui-alert-success-bg: #051b11;
-	--pui-alert-success-border: #0f5132;
-	--pui-alert-warning-bg: #332701;
-	--pui-alert-warning-border: #997404;
-	--pui-alert-danger-bg: #2c0b0e;
-	--pui-alert-danger-border: #842029;
-
-	/* ============================================
-	 * AVATAR
-	 * ============================================ */
-	--pui-avatar-bg: var(--pui-color-gray-700);
-	--pui-avatar-text: var(--pui-color-gray-200);
-
-	/* ============================================
-	 * LOADER
-	 * ============================================ */
-	--pui-loader-color: var(--pui-color-secondary);
-
-	/* ============================================
-	 * SELECT
-	 * ============================================ */
-	--pui-select-option-hover-bg: var(--pui-color-dark-200);
-	--pui-select-option-selected-bg: rgba(var(--pui-color-secondary-rgb), 0.2);
-
-	/* ============================================
-	 * DATEPICKER
-	 * ============================================ */
-	--pui-datepicker-day-hover-bg: var(--pui-color-dark-200);
-
-	/* ============================================
-	 * PAGINATION
-	 * ============================================ */
-	--pui-pagination-item-hover-bg: var(--pui-color-dark-200);
-	--pui-pagination-item-active-bg: var(--pui-color-secondary);
-	--pui-pagination-item-active-text: var(--pui-color-black);
-
-	/* ============================================
-	 * INTERACTIVE STATES
-	 * ============================================ */
-	--pui-bg-hover: rgba(255, 255, 255, 0.06);
-	--pui-bg-active: rgba(255, 255, 255, 0.1);
-
-	/* ============================================
-	 * DISABLED STATES
-	 * ============================================ */
-	--pui-border-disabled: #666;
-	--pui-bg-disabled: #444;
-	--pui-text-on-disabled: var(--pui-color-gray-600);
-}

package/dist/styles/index.css

@@ -1,116 +0,0 @@
-/**
- * UI Library Core Styles
- *
- * Main entry point for all library styles.
- * Import this file to get default styling.
- *
- * To customize, override CSS variables after importing:
- *
- * @example
- * :root {
- *   --pui-color-primary: #1a365d;
- *   --pui-font-family-sans: 'Inter', sans-serif;
- * }
- */
-
-@import './reset.css';
-@import './tokens.css';
-@import './semantic.css';
-@import './components.css';
-@import './dark.css';
-@import './utilities.css';
-
-/* ============================================
- * BASE STYLES
- * ============================================ */
-
-:root {
-	background-color: var(--pui-bg-page);
-	color: var(--pui-text-primary);
-	font-family: var(--pui-font-family-sans);
-	font-size: var(--pui-font-size-md);
-	line-height: var(--pui-line-height-normal);
-}
-
-body {
-	margin: 0;
-	min-height: 100vh;
-}
-
-/* ============================================
- * LINK STYLES
- * ============================================ */
-
-a {
-	color: var(--pui-link-color);
-	text-decoration: none;
-	transition: color var(--pui-transition-base) var(--pui-ease-in-out);
-}
-
-a:hover {
-	color: var(--pui-link-hover-color);
-}
-
-header a {
-	color: var(--pui-color-primary);
-	text-decoration: none;
-	transition: color var(--pui-transition-base) var(--pui-ease-in-out);
-}
-
-.dark header a {
-	color: var(--pui-color-white);
-}
-
-.dark header a:hover {
-	color: var(--pui-color-secondary);
-}
-
-/* ============================================
- * SCROLLBAR STYLES
- * ============================================ */
-
-*::-webkit-scrollbar {
-	width: var(--pui-scrollbar-width);
-	height: var(--pui-scrollbar-width);
-}
-
-*::-webkit-scrollbar-track {
-	background: var(--pui-scrollbar-track);
-}
-
-*::-webkit-scrollbar-thumb {
-	background-color: var(--pui-scrollbar-thumb);
-	border-radius: 10px;
-	border: 5px solid var(--pui-scrollbar-thumb-border);
-}
-
-* {
-	scrollbar-width: thin;
-	scrollbar-color: var(--pui-scrollbar-thumb) var(--pui-scrollbar-track);
-}
-
-/* ============================================
- * FOCUS STYLES
- * ============================================ */
-
-:focus-visible {
-	outline: var(--pui-focus-ring-width) solid var(--pui-focus-ring-color);
-	outline-offset: var(--pui-focus-ring-offset);
-}
-
-:focus:not(:focus-visible) {
-	outline: none;
-}
-
-/* ============================================
- * SELECTION STYLES
- * ============================================ */
-
-::selection {
-	background-color: rgba(var(--pui-color-accent-rgb), 0.3);
-	color: inherit;
-}
-
-.dark ::selection {
-	background-color: rgba(var(--pui-color-secondary-rgb), 0.3);
-}

package/dist/styles/reset.css

@@ -1,110 +0,0 @@
-/**
- * CSS Reset
- * A minimal, modern CSS reset for consistent cross-browser styling
- */
-
-*,
-*::before,
-*::after {
-	box-sizing: border-box;
-}
-
-* {
-	margin: 0;
-}
-
-html {
-	-webkit-text-size-adjust: 100%;
-	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
-	text-rendering: optimizeLegibility;
-}
-
-body {
-	line-height: var(--pui-line-height-normal, 1.5);
-	font-family: var(--pui-font-family-sans);
-}
-
-img,
-picture,
-video,
-canvas,
-svg {
-	display: block;
-	max-width: 100%;
-}
-
-input,
-button,
-textarea,
-select {
-	font: inherit;
-	color: inherit;
-}
-
-button {
-	cursor: pointer;
-	background: none;
-	border: none;
-	padding: 0;
-}
-
-p,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-	overflow-wrap: break-word;
-}
-
-a {
-	color: inherit;
-	text-decoration: none;
-}
-
-ul,
-ol {
-	list-style: none;
-	padding: 0;
-}
-
-table {
-	border-collapse: collapse;
-	border-spacing: 0;
-}
-
-fieldset {
-	border: 0;
-	padding: 0;
-	margin: 0;
-	min-width: 0;
-}
-
-legend {
-	padding: 0;
-}
-
-textarea {
-	resize: vertical;
-}
-
-img,
-video {
-	height: auto;
-}
-
-input::-webkit-outer-spin-button,
-input::-webkit-inner-spin-button {
-	-webkit-appearance: none;
-	margin: 0;
-}
-
-input[type='number'] {
-	-moz-appearance: textfield;
-}
-
-dialog:not([open]) {
-	display: none;
-}

package/dist/styles/semantic.css

@@ -1,86 +0,0 @@
-/**
- * Semantic Variables
- * Contextual variables derived from primitive tokens.
- */
-
-:root {
-	/* ============================================
-	 * SURFACE COLORS
-	 * ============================================ */
-	--pui-bg-page: var(--pui-color-gray-100);
-	--pui-bg-surface: var(--pui-color-white);
-	--pui-bg-surface-raised: var(--pui-color-gray-50);
-	--pui-bg-surface-sunken: var(--pui-color-gray-200);
-	--pui-bg-overlay: rgba(0, 0, 0, 0.5);
-	--pui-bg-overlay-dark: rgba(0, 0, 0, 0.65);
-
-	/* ============================================
-	 * TEXT COLORS
-	 * ============================================ */
-	--pui-text-primary: var(--pui-color-black);
-	--pui-text-secondary: var(--pui-color-gray-700);
-	--pui-text-muted: var(--pui-color-gray-600);
-	--pui-text-disabled: var(--pui-color-gray-400);
-	--pui-text-placeholder: rgb(161, 161, 170);
-
-	--pui-text-on-primary: var(--pui-color-white);
-	--pui-text-on-secondary: var(--pui-color-primary);
-	--pui-text-on-accent: var(--pui-color-primary);
-	--pui-text-on-danger: var(--pui-color-white);
-
-	--pui-text-danger: var(--pui-color-danger-light);
-	--pui-text-warning: var(--pui-color-warning);
-	--pui-text-success: var(--pui-color-success);
-	--pui-text-info: var(--pui-color-info);
-
-	/* ============================================
-	 * BORDER COLORS
-	 * ============================================ */
-	--pui-border-default: rgb(226, 232, 240);
-	--pui-border-subtle: var(--pui-color-gray-200);
-	--pui-border-strong: var(--pui-color-gray-400);
-	--pui-border-focus: var(--pui-color-primary);
-	--pui-border-error: var(--pui-color-danger);
-	--pui-border-success: var(--pui-color-success);
-
-	/* ============================================
-	 * ACCENT COLORS
-	 * ============================================ */
-	--pui-accent-color-rgb: var(--pui-color-primary-rgb);
-	--pui-accent-color: var(--pui-color-primary);
-	--pui-accent-text-color: var(--pui-color-off-white);
-
-	/* ============================================
-	 * LINK COLORS
-	 * ============================================ */
-	--pui-link-color: var(--pui-color-accent-dark);
-	--pui-link-hover-color: var(--pui-color-secondary-dark);
-
-	/* ============================================
-	 * FOCUS RING
-	 * ============================================ */
-	--pui-focus-ring-color: var(--pui-color-primary);
-	--pui-focus-ring-width: 2px;
-	--pui-focus-ring-offset: 2px;
-
-	/* ============================================
-	 * SCROLLBAR
-	 * ============================================ */
-	--pui-scrollbar-width: 19px;
-	--pui-scrollbar-track: var(--pui-color-white);
-	--pui-scrollbar-thumb: var(--pui-color-primary);
-	--pui-scrollbar-thumb-border: var(--pui-color-white);
-
-	/* ============================================
-	 * INTERACTIVE STATES
-	 * ============================================ */
-	--pui-bg-hover: rgba(0, 0, 0, 0.04);
-	--pui-bg-active: rgba(0, 0, 0, 0.08);
-
-	/* ============================================
-	 * DISABLED STATES
-	 * ============================================ */
-	--pui-border-disabled: #ccc;
-	--pui-bg-disabled: #f5f5f5;
-	--pui-text-on-disabled: var(--pui-color-gray-500);
-}