@skygraph/styles 0.0.0-placeholder.0 → 0.1.0

package/components/treeselect.css

@@ -0,0 +1,219 @@
+/* === TreeSelect === */
+
+.sg-treeselect {
+  position: relative;
+  display: inline-block;
+  min-width: 180px;
+  font-size: var(--sg-font-size);
+}
+
+.sg-treeselect-disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+/* Selector trigger */
+
+.sg-treeselect-selector {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: var(--sg-height-md);
+  padding: var(--sg-padding-xs) var(--sg-padding-md);
+  background: var(--sg-color-bg-container);
+  border: 1px solid var(--sg-color-border);
+  border-radius: var(--sg-border-radius);
+  cursor: pointer;
+  transition: border-color var(--sg-transition-duration) var(--sg-transition-timing);
+  gap: var(--sg-padding-xs);
+}
+
+.sg-treeselect-small .sg-treeselect-selector {
+  min-height: var(--sg-height-sm);
+  font-size: var(--sg-font-size-sm);
+}
+
+.sg-treeselect-large .sg-treeselect-selector {
+  min-height: var(--sg-height-lg);
+  font-size: var(--sg-font-size-lg);
+}
+
+.sg-treeselect-open .sg-treeselect-selector {
+  border-color: var(--sg-color-primary);
+  box-shadow: 0 0 0 2px var(--sg-color-primary-bg);
+}
+
+.sg-treeselect-selector:hover {
+  border-color: var(--sg-color-primary-hover);
+}
+
+/* Selection wrap */
+
+.sg-treeselect-selection-wrap {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--sg-padding-xs);
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.sg-treeselect-placeholder {
+  color: var(--sg-color-text-placeholder);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.sg-treeselect-selection-item {
+  color: var(--sg-color-text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Tags (multiple mode) */
+
+.sg-treeselect-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  max-width: 100%;
+  padding: 1px var(--sg-padding-sm);
+  background: var(--sg-color-bg-hover);
+  border: 1px solid var(--sg-color-border-secondary);
+  border-radius: var(--sg-border-radius-sm);
+  font-size: var(--sg-font-size-sm);
+  line-height: 20px;
+}
+
+.sg-treeselect-tag-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sg-treeselect-tag-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  font-size: 12px;
+  color: var(--sg-color-text-tertiary);
+  cursor: pointer;
+  border-radius: 50%;
+  transition: all var(--sg-transition-duration);
+  flex-shrink: 0;
+}
+
+.sg-treeselect-tag-close:hover {
+  color: var(--sg-color-text);
+  background: var(--sg-color-border-secondary);
+}
+
+.sg-treeselect-tag-rest {
+  color: var(--sg-color-text-tertiary);
+  font-style: italic;
+}
+
+/* Search input */
+
+.sg-treeselect-search-input {
+  flex: 1;
+  min-width: 60px;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-size: inherit;
+  color: var(--sg-color-text);
+  padding: 0;
+  line-height: var(--sg-line-height);
+}
+
+.sg-treeselect-search-input::placeholder {
+  color: var(--sg-color-text-placeholder);
+}
+
+/* Actions (clear + arrow) */
+
+.sg-treeselect-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--sg-padding-xs);
+  flex-shrink: 0;
+}
+
+.sg-treeselect-arrow {
+  font-size: 10px;
+  color: var(--sg-color-text-tertiary);
+}
+
+.sg-treeselect-clear {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  font-size: 12px;
+  color: var(--sg-color-text-tertiary);
+  cursor: pointer;
+  border-radius: 50%;
+  transition: all var(--sg-transition-duration);
+}
+
+.sg-treeselect-clear:hover {
+  color: var(--sg-color-text);
+  background: var(--sg-color-border-secondary);
+}
+
+/* Dropdown */
+
+.sg-treeselect-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  z-index: var(--sg-z-dropdown);
+  margin-top: 4px;
+  padding: var(--sg-padding-sm);
+  background: var(--sg-color-bg-elevated);
+  border: 1px solid var(--sg-color-border-secondary);
+  border-radius: var(--sg-border-radius-lg);
+  box-shadow: var(--sg-shadow-lg);
+  max-height: 300px;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.sg-treeselect-dropdown::-webkit-scrollbar {
+  width: 6px;
+}
+
+.sg-treeselect-dropdown::-webkit-scrollbar-thumb {
+  background: var(--sg-color-border);
+  border-radius: 3px;
+}
+
+.sg-treeselect-dropdown::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.sg-treeselect-empty {
+  padding: var(--sg-padding-lg);
+  text-align: center;
+  color: var(--sg-color-text-tertiary);
+}
+
+/* Tree inside dropdown overrides */
+
+.sg-treeselect-dropdown .sg-tree {
+  font-size: inherit;
+}
+
+.sg-treeselect-dropdown .sg-tree-node {
+  padding: 1px 0;
+  min-height: 26px;
+}
+

package/components/upload.css

@@ -0,0 +1,124 @@
+.sg-upload {
+  --sg-spin-color: var(--sg-color-text-tertiary);
+}
+
+.sg-upload-list {
+  margin-top: var(--sg-margin-sm);
+  display: flex;
+  flex-direction: column;
+  gap: var(--sg-margin-xs);
+}
+
+.sg-upload-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--sg-padding-xs) var(--sg-padding-sm);
+  border: 1px solid var(--sg-color-border-secondary);
+  border-radius: var(--sg-border-radius-sm);
+  font-size: var(--sg-font-size-sm);
+  color: var(--sg-color-text);
+}
+
+.sg-upload-item-error {
+  border-color: var(--sg-color-error);
+  color: var(--sg-color-error);
+}
+
+.sg-upload-item-name {
+  display: flex;
+  align-items: center;
+  gap: var(--sg-padding-xs);
+}
+
+.sg-upload-item-remove {
+  cursor: pointer;
+  color: var(--sg-color-text-tertiary);
+  font-size: var(--sg-font-size);
+  background: transparent;
+  border: none;
+  padding: 0 var(--sg-padding-xs);
+  line-height: 1;
+  border-radius: var(--sg-border-radius-sm);
+}
+
+.sg-upload-item-remove:hover {
+  color: var(--sg-color-error);
+}
+
+.sg-upload-item-remove:focus-visible {
+  outline: 2px solid var(--sg-color-primary);
+  outline-offset: 2px;
+}
+
+.sg-upload-item-progress {
+  font-size: var(--sg-font-size-sm);
+  color: var(--sg-color-text-secondary);
+  font-variant-numeric: tabular-nums;
+}
+
+/* Drag area (Vue-only — sister components in React do not ship a drag mode). */
+.sg-upload-drag-area {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--sg-margin-xs);
+  padding: var(--sg-padding-lg);
+  border: 1px dashed var(--sg-color-border);
+  border-radius: var(--sg-border-radius);
+  color: var(--sg-color-text-secondary);
+  background: var(--sg-color-bg-container);
+  cursor: pointer;
+  transition:
+    border-color var(--sg-transition-duration),
+    background var(--sg-transition-duration);
+  text-align: center;
+}
+
+.sg-upload-drag-area:hover,
+.sg-upload-dragging .sg-upload-drag-area {
+  border-color: var(--sg-color-primary);
+  background: var(--sg-color-primary-bg);
+}
+
+.sg-upload-drag-icon {
+  font-size: 32px;
+  color: var(--sg-color-primary);
+  margin: 0;
+  line-height: 1;
+}
+
+.sg-upload-drag-text {
+  margin: 0;
+  font-size: var(--sg-font-size);
+  color: var(--sg-color-text);
+}
+
+.sg-upload-disabled .sg-upload-drag-area {
+  cursor: not-allowed;
+  opacity: 0.6;
+  background: var(--sg-color-bg-disabled);
+}
+
+/* Picture-card layout (Vue-only — image-grid trigger like the AntD one). */
+.sg-upload-picture-card .sg-upload-list,
+.sg-upload-picture .sg-upload-list {
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: var(--sg-margin-sm);
+}
+
+.sg-upload-picture-card .sg-upload-item {
+  width: 96px;
+  height: 96px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  padding: var(--sg-padding-xs);
+}
+
+.sg-upload-picture .sg-upload-item {
+  padding: var(--sg-padding-sm);
+}

package/index.css

@@ -1,3 +1,69 @@
-/* @skygraph/styles — placeholder. Real release pending.
- * See https://skygraph.ruslansinkevich.ru
- */
+/* SkyGraph -- all styles */
+@import './tokens.css';
+@import './reset.css';
+@import './components/button.css';
+@import './components/input.css';
+@import './components/textarea.css';
+@import './components/input-number.css';
+@import './components/form.css';
+@import './components/field.css';
+@import './components/spin.css';
+@import './components/modal.css';
+@import './components/checkbox.css';
+@import './components/radio.css';
+@import './components/switch.css';
+@import './components/select.css';
+@import './components/tabs.css';
+@import './components/tooltip.css';
+@import './components/table.css';
+@import './components/datagrid.css';
+@import './components/datepicker.css';
+@import './components/timepicker.css';
+@import './components/autocomplete.css';
+@import './components/slider.css';
+@import './components/rate.css';
+@import './components/upload.css';
+@import './components/notification.css';
+@import './components/drawer.css';
+@import './components/popconfirm.css';
+@import './components/badge.css';
+@import './components/tag.css';
+@import './components/avatar.css';
+@import './components/breadcrumb.css';
+@import './components/pagination.css';
+@import './components/dropdown.css';
+@import './components/progress.css';
+@import './components/tree.css';
+@import './components/treeselect.css';
+@import './components/cascader.css';
+@import './components/calendar.css';
+@import './components/list.css';
+@import './components/transfer.css';
+@import './components/menu.css';
+@import './components/context-menu.css';
+@import './components/collapse.css';
+@import './components/colorpicker.css';
+@import './components/empty.css';
+@import './components/result.css';
+@import './components/skeleton.css';
+@import './components/segmented.css';
+@import './components/steps.css';
+@import './components/timeline.css';
+@import './components/carousel.css';
+@import './components/descriptions.css';
+@import './components/mentions.css';
+@import './components/input-password.css';
+@import './components/search-input.css';
+@import './components/tag-input.css';
+@import './components/pin-input.css';
+@import './components/inline-edit.css';
+@import './components/input-group.css';
+@import './components/diagram.css';
+@import './components/charts.css';
+@import './components/dashboard.css';
+@import './components/gantt.css';
+@import './components/resource-calendar.css';
+@import './components/event-timeline.css';
+@import './components/schema-form-editor.css';
+@import './transitions.css';
+@import './print.css';

package/index.d.ts

@@ -0,0 +1,9 @@
+// `@skygraph/styles` is a CSS-only package — every entrypoint is a stylesheet
+// and is consumed via side-effect import (`import '@skygraph/styles'` /
+// `import '@skygraph/styles/components/button'`). This declaration file exists
+// solely so TypeScript with `moduleResolution: bundler` can resolve a typed
+// "module" for those side-effect imports.
+//
+// There is no JS / TS API to type — the package contributes only style rules.
+
+export {}

package/package.json

@@ -1,19 +1,103 @@
 {
-	"name": "@skygraph/styles",
-	"version": "0.0.0-placeholder.0",
-	"description": "SkyGraph framework-agnostic CSS — tokens, themes, component stylesheets. Placeholder.",
-	"keywords": ["css", "design-tokens", "theme", "styles", "skygraph"],
-	"homepage": "https://skygraph.ruslansinkevich.ru",
-	"repository": {
-		"type": "git",
-		"url": "https://github.com/RuslanSinkevich/skygraph.git",
-		"directory": "packages/styles"
-	},
-	"bugs": {
-		"url": "https://github.com/RuslanSinkevich/skygraph/issues"
-	},
-	"author": "Ruslan Sinkevich",
-	"license": "MIT",
-	"main": "index.css",
-	"files": ["index.css", "README.md"]
-}
+  "name": "@skygraph/styles",
+  "version": "0.1.0",
+  "description": "SkyGraph framework-agnostic CSS — tokens, themes, transitions, print and 60+ component stylesheets",
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "main": "./index.css",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./index.css"
+    },
+    "./index.css": {
+      "types": "./index.d.ts",
+      "default": "./index.css"
+    },
+    "./tokens": {
+      "types": "./index.d.ts",
+      "default": "./tokens.css"
+    },
+    "./tokens.css": {
+      "types": "./index.d.ts",
+      "default": "./tokens.css"
+    },
+    "./reset": {
+      "types": "./index.d.ts",
+      "default": "./reset.css"
+    },
+    "./reset.css": {
+      "types": "./index.d.ts",
+      "default": "./reset.css"
+    },
+    "./transitions": {
+      "types": "./index.d.ts",
+      "default": "./transitions.css"
+    },
+    "./transitions.css": {
+      "types": "./index.d.ts",
+      "default": "./transitions.css"
+    },
+    "./print": {
+      "types": "./index.d.ts",
+      "default": "./print.css"
+    },
+    "./print.css": {
+      "types": "./index.d.ts",
+      "default": "./print.css"
+    },
+    "./themes/*": {
+      "types": "./index.d.ts",
+      "default": "./themes/*.css"
+    },
+    "./themes/*.css": {
+      "types": "./index.d.ts",
+      "default": "./themes/*.css"
+    },
+    "./components/*": {
+      "types": "./index.d.ts",
+      "default": "./components/*.css"
+    },
+    "./components/*.css": {
+      "types": "./index.d.ts",
+      "default": "./components/*.css"
+    }
+  },
+  "files": [
+    "index.css",
+    "index.d.ts",
+    "reset.css",
+    "tokens.css",
+    "transitions.css",
+    "print.css",
+    "themes",
+    "components",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "author": "Ruslan Sinkevich",
+  "homepage": "https://skygraph.ruslansinkevich.ru",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/RuslanSinkevich/skygraph-public.git",
+    "directory": "packages/styles"
+  },
+  "bugs": {
+    "url": "https://github.com/RuslanSinkevich/skygraph-public/issues"
+  },
+  "keywords": [
+    "css",
+    "design-tokens",
+    "theme",
+    "skygraph",
+    "ui",
+    "framework-agnostic",
+    "design-system"
+  ]
+}

package/print.css

@@ -0,0 +1,88 @@
+/* SkyGraph — общие правила для @media print.
+ *
+ * Подключается из styles/index.css. Все переопределения сидят строго внутри
+ * @media print, поэтому экранный рендеринг не затронут. `!important`
+ * сознательно используется ради побеждания inline-стилей (которые JS-код
+ * применяет на скрол-контейнерах, тенях, transform-ах для пана/зума) — это
+ * стандартный print-CSS паттерн и разрешён в check-no-important media-allowlist.
+ *
+ * Дополнительные компонент-специфичные блоки (например `.sg-table-toolbar`,
+ * `.sg-table-pagination`) живут рядом со своим компонентом
+ * (см. components/table.css). Этот файл — общий слой.
+ */
+
+@media print {
+  /* Универсальная маркировка "не печатать" — ставится JS-кодом на тулбары,
+   * fab-кнопки, hover-overlay и т.п. */
+  .sg-no-print {
+    display: none !important;
+  }
+
+  /* Принудительный page-break после блока. Используется data-атрибутом
+   * вместо класса, чтобы не конфликтовать с пользовательскими CSS-классами. */
+  [data-sg-page-break] {
+    page-break-after: always;
+    break-after: page;
+  }
+
+  [data-sg-page-break-before] {
+    page-break-before: always;
+    break-before: page;
+  }
+
+  /* Корневая обёртка popup-окна — добавляется printElement(). Ничего
+   * лишнего, только сброс отступов и прозрачный фон под печать. */
+  .sg-print-root {
+    background: #fff;
+    color: #000;
+  }
+
+  /* На случай корпоративных принтеров: убрать тяжёлые тени и transform —
+   * современные браузеры в большинстве случаев игнорируют CSS-анимации в
+   * print-mode, но `transform` (используется панами / зумами Diagram-а)
+   * сохраняется и ломает раскладку, если не сбросить. */
+  .sg-print-root [class*="sg-"][style*="transform"] {
+    /* Сбрасывается JS-side в Diagram через специальный data-атрибут
+     * (см. ниже), чтобы пан/зум не уезжал в печать. */
+  }
+
+  /* Раскрыть скролл-контейнеры — иначе печатается только видимое окно. */
+  .sg-table-wrapper,
+  .sg-table-scroll,
+  .sg-diagram,
+  .sg-chart-wrapper {
+    overflow: visible !important;
+    max-height: none !important;
+    height: auto !important;
+  }
+
+  /* Diagram: при печати сбрасываем pan/zoom transform на canvas-обёртке.
+   * Координата `data-pan-*` остаётся атрибутом — это диагностика, не CSS. */
+  .sg-diagram-canvas {
+    transform: none !important;
+  }
+
+  /* Таблица — каждую строку держим вместе. */
+  .sg-table-row,
+  .sg-table-tr,
+  .sg-datagrid-row {
+    page-break-inside: avoid;
+    break-inside: avoid;
+  }
+
+  /* Charts — скрыть hover crosshair и brushing, если они оказались
+   * закрашены на момент печати (selection rect остаётся в DOM). */
+  .sg-chart-crosshair,
+  .sg-chart-brush-overlay {
+    display: none !important;
+  }
+
+  /* Diagram — спрятать тулбары / минимапы. Стандартного minimap-классa у
+   * SkyGraph пока нет, но префикс зарезервирован — пусть пользователь
+   * добавит `.sg-no-print` или дочерний класс из этого списка. */
+  .sg-diagram-toolbar,
+  .sg-diagram-minimap,
+  .sg-diagram-controls {
+    display: none !important;
+  }
+}

package/reset.css

@@ -0,0 +1,17 @@
+/* SkyGraph reset — all sg-* scoped elements */
+
+[class^="sg-"],
+[class*=" sg-"],
+[class^="sg-"] *,
+[class*=" sg-"] *,
+[class^="sg-"] *::before,
+[class*=" sg-"] *::before,
+[class^="sg-"] *::after,
+[class*=" sg-"] *::after {
+  box-sizing: border-box;
+}
+
+[class^="sg-"] button,
+[class*=" sg-"] button {
+  font-family: inherit;
+}

package/themes/dark.css

@@ -0,0 +1,17 @@
+/* SkyGraph -- Dark theme
+ *
+ * Convenience re-export of the full token set. Activate dark mode by setting
+ * `data-sg-theme="dark"` on `<html>` (or any wrapper). The dark semantic
+ * tokens kick in via the `[data-sg-theme="dark"]` selector inside `tokens.css`.
+ *
+ * NOTE: this file imports the SAME `tokens.css` as `default.css`. Both light
+ * and dark semantic tokens live there; importing only `dark.css` does NOT
+ * give you a "dark-only" stylesheet — the selector decides which set wins.
+ *
+ * Example:
+ *   import '@skygraph/styles/themes/dark'
+ *
+ *   <html data-sg-theme="dark"> ... </html>
+ */
+
+@import '../tokens.css';

package/themes/default.css

@@ -0,0 +1,14 @@
+/* SkyGraph -- Light theme (default)
+ *
+ * Convenience re-export of the full token set. After importing this file the
+ * `[data-sg-theme="light"]` selector inside `tokens.css` is the active layer.
+ *
+ * NOTE: this file imports the SAME `tokens.css` as `dark.css`. Both light and
+ * dark semantic tokens live there; the active set is decided at runtime via
+ * the `data-sg-theme` attribute on a parent element.
+ *
+ * Import:
+ *   import '@skygraph/styles/themes/default'
+ */
+
+@import '../tokens.css';