@morphos/styles 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026-present Mateus Martins
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@morphos/styles",
+  "version": "0.1.0",
+  "description": "Optional, unstyled-by-default CSS recipes for Morphos components. Import only what you need, one file per component.",
+  "type": "module",
+  "types": "./src/css.d.ts",
+  "exports": {
+    ".": {
+      "types": "./src/css.d.ts"
+    },
+    "./tokens.css": "./src/tokens.css",
+    "./index.css": "./src/index.css",
+    "./inputs.css": "./src/inputs.css",
+    "./inputs/*.css": "./src/inputs/*.css",
+    "./overlays.css": "./src/overlays.css",
+    "./overlays/*.css": "./src/overlays/*.css",
+    "./layout.css": "./src/layout.css",
+    "./layout/*.css": "./src/layout/*.css",
+    "./feedback.css": "./src/feedback.css",
+    "./feedback/*.css": "./src/feedback/*.css"
+  },
+  "files": [
+    "src"
+  ]
+}

package/src/css.d.ts

@@ -0,0 +1 @@
+declare module "*.css";

package/src/feedback/alert.css

@@ -0,0 +1,32 @@
+/**
+ * Recipe for @morphos/feedback `Alert`. Apply with `class="morphos-alert"`.
+ */
+.morphos-alert {
+  display: flex;
+  flex-direction: column;
+  gap: var(--morphos-space-1);
+  padding: var(--morphos-space-3) var(--morphos-space-4);
+  border: 1px solid var(--morphos-color-info);
+  border-radius: var(--morphos-radius-md);
+  background: var(--morphos-color-info-bg);
+  color: var(--morphos-color-text);
+}
+
+.morphos-alert > strong {
+  font-weight: 600;
+}
+
+.morphos-alert[data-variant="success"] {
+  border-color: var(--morphos-color-success);
+  background: var(--morphos-color-success-bg);
+}
+
+.morphos-alert[data-variant="warning"] {
+  border-color: var(--morphos-color-warning);
+  background: var(--morphos-color-warning-bg);
+}
+
+.morphos-alert[data-variant="error"] {
+  border-color: var(--morphos-color-danger);
+  background: var(--morphos-color-danger-bg);
+}

package/src/feedback/avatar.css

@@ -0,0 +1,42 @@
+/**
+ * Recipe for @morphos/feedback `Avatar`.
+ * Apply `class="morphos-avatar"` to `Avatar`, `class="morphos-avatar-image"`
+ * to `AvatarImage`, and `class="morphos-avatar-fallback"` to
+ * `AvatarFallback`.
+ */
+.morphos-avatar {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  overflow: hidden;
+  border-radius: var(--morphos-radius-full);
+  background: var(--morphos-color-bg-subtle);
+  color: var(--morphos-color-text-muted);
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.morphos-avatar-image {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.morphos-avatar-image[hidden] {
+  display: none;
+}
+
+.morphos-avatar-fallback {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.morphos-avatar-fallback[hidden] {
+  display: none;
+}

package/src/feedback/meter.css

@@ -0,0 +1,34 @@
+/**
+ * Recipe for @morphos/feedback `Meter`. Apply with `class="morphos-meter"`.
+ * The component renders its own fill child, `<div data-meter-fill>`,
+ * styled below without needing its own class. The fill percentage is
+ * exposed as the `--meter-value` custom property.
+ */
+.morphos-meter {
+  display: block;
+  width: 100%;
+  height: 0.5rem;
+  overflow: hidden;
+  border-radius: var(--morphos-radius-full);
+  background: var(--morphos-color-bg-subtle);
+}
+
+.morphos-meter > [data-meter-fill] {
+  height: 100%;
+  width: var(--meter-value, 0%);
+  background: var(--morphos-color-accent);
+  border-radius: var(--morphos-radius-full);
+  transition: width var(--morphos-transition-medium);
+}
+
+.morphos-meter[data-low] > [data-meter-fill] {
+  background: var(--morphos-color-warning);
+}
+
+.morphos-meter[data-high] > [data-meter-fill] {
+  background: var(--morphos-color-danger);
+}
+
+.morphos-meter[data-optimum] > [data-meter-fill] {
+  background: var(--morphos-color-success);
+}

package/src/feedback/progress.css

@@ -0,0 +1,34 @@
+/**
+ * Recipe for @morphos/feedback `Progress`. Apply with
+ * `class="morphos-progress"`. The component exposes its fill percentage as
+ * the `--progress` custom property, painted below via `::after`.
+ */
+.morphos-progress {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 0.5rem;
+  overflow: hidden;
+  border-radius: var(--morphos-radius-full);
+  background: var(--morphos-color-bg-subtle);
+}
+
+.morphos-progress::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  width: var(--progress, 0%);
+  background: var(--morphos-color-accent);
+  border-radius: var(--morphos-radius-full);
+  transition: width var(--morphos-transition-medium);
+}
+
+.morphos-progress[data-indeterminate]::after {
+  width: 40%;
+  animation: morphos-progress-indeterminate 1.2s ease-in-out infinite;
+}
+
+@keyframes morphos-progress-indeterminate {
+  0% { left: -40%; }
+  100% { left: 100%; }
+}

package/src/feedback/spinner.css

@@ -0,0 +1,17 @@
+/**
+ * Recipe for @morphos/feedback `Spinner`. Apply with
+ * `class="morphos-spinner"`.
+ */
+.morphos-spinner {
+  display: inline-block;
+  width: 1.25rem;
+  height: 1.25rem;
+  border: 2px solid var(--morphos-color-border);
+  border-top-color: var(--morphos-color-accent);
+  border-radius: var(--morphos-radius-full);
+  animation: morphos-spin 0.7s linear infinite;
+}
+
+@keyframes morphos-spin {
+  to { transform: rotate(360deg); }
+}

package/src/feedback/toast.css

@@ -0,0 +1,80 @@
+/**
+ * Recipe for @morphos/feedback `ToastProvider` + `Toast`.
+ * Apply `class="morphos-toast-viewport"` to `ToastProvider` — its
+ * auto-rendered toasts (`role="status"`) are styled here without needing
+ * their own class. If you render toasts manually with the standalone
+ * `Toast` component instead, apply `class="morphos-toast"` to it.
+ */
+.morphos-toast-viewport {
+  /* Portaled to document.body, so it can't inherit the page's font — set it explicitly. */
+  font-family: var(--morphos-font);
+  position: fixed;
+  bottom: var(--morphos-space-4);
+  right: var(--morphos-space-4);
+  z-index: 200;
+  display: flex;
+  flex-direction: column;
+  gap: var(--morphos-space-2);
+  width: 20rem;
+  max-width: calc(100vw - 2 * var(--morphos-space-4));
+}
+
+.morphos-toast-viewport > [role="status"],
+.morphos-toast {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--morphos-space-1);
+  padding: var(--morphos-space-3) var(--morphos-space-8, 2rem) var(--morphos-space-3) var(--morphos-space-3);
+  background: var(--morphos-color-bg);
+  color: var(--morphos-color-text);
+  border: 1px solid var(--morphos-color-border);
+  border-radius: var(--morphos-radius-md);
+  animation: morphos-slide-in var(--morphos-transition-medium);
+}
+
+.morphos-toast-viewport > [role="status"][data-variant="success"],
+.morphos-toast[data-variant="success"] {
+  border-color: var(--morphos-color-success);
+  background: var(--morphos-color-success-bg);
+}
+
+.morphos-toast-viewport > [role="status"][data-variant="error"],
+.morphos-toast[data-variant="error"] {
+  border-color: var(--morphos-color-danger);
+  background: var(--morphos-color-danger-bg);
+}
+
+.morphos-toast-viewport > [role="status"][data-variant="warning"],
+.morphos-toast[data-variant="warning"] {
+  border-color: var(--morphos-color-warning);
+  background: var(--morphos-color-warning-bg);
+}
+
+.morphos-toast-viewport > [role="status"] > button,
+.morphos-toast > button {
+  position: absolute;
+  top: var(--morphos-space-2);
+  right: var(--morphos-space-2);
+  border: none;
+  background: none;
+  color: var(--morphos-color-text-muted);
+  cursor: pointer;
+  line-height: 1;
+}
+
+.morphos-toast-viewport > [role="status"] > button:hover,
+.morphos-toast > button:hover {
+  color: var(--morphos-color-text);
+}
+
+@keyframes morphos-slide-in {
+  from {
+    opacity: 0;
+    transform: translateY(0.5rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

package/src/feedback.css

@@ -0,0 +1,11 @@
+/**
+ * All @morphos/feedback recipes in one file. Prefer importing individual
+ * files from `@morphos/styles/feedback/*.css` if you only need a few.
+ */
+@import "./tokens.css";
+@import "./feedback/toast.css";
+@import "./feedback/alert.css";
+@import "./feedback/progress.css";
+@import "./feedback/spinner.css";
+@import "./feedback/avatar.css";
+@import "./feedback/meter.css";

package/src/index.css

@@ -0,0 +1,50 @@
+/**
+ * Every @morphos/* recipe in one file. Prefer importing
+ * `@morphos/styles/inputs.css`, `overlays.css`, `layout.css`, `feedback.css`,
+ * or an individual `@morphos/styles/<category>/<component>.css` file if you
+ * only need part of the set.
+ */
+@import "./tokens.css";
+
+@import "./inputs/button.css";
+@import "./inputs/input.css";
+@import "./inputs/checkbox.css";
+@import "./inputs/select.css";
+@import "./inputs/radio.css";
+@import "./inputs/switch.css";
+@import "./inputs/toggle.css";
+@import "./inputs/toggle-group.css";
+@import "./inputs/checkbox-group.css";
+@import "./inputs/slider.css";
+@import "./inputs/number-field.css";
+@import "./inputs/field.css";
+@import "./inputs/fieldset.css";
+@import "./inputs/form.css";
+@import "./inputs/otp-field.css";
+@import "./inputs/combobox.css";
+@import "./inputs/autocomplete.css";
+
+@import "./overlays/dialog.css";
+@import "./overlays/tooltip.css";
+@import "./overlays/popover.css";
+@import "./overlays/dropdown.css";
+@import "./overlays/alert-dialog.css";
+@import "./overlays/drawer.css";
+@import "./overlays/context-menu.css";
+@import "./overlays/preview-card.css";
+
+@import "./layout/accordion.css";
+@import "./layout/tabs.css";
+@import "./layout/disclosure.css";
+@import "./layout/separator.css";
+@import "./layout/scroll-area.css";
+@import "./layout/toolbar.css";
+@import "./layout/menubar.css";
+@import "./layout/navigation-menu.css";
+
+@import "./feedback/toast.css";
+@import "./feedback/alert.css";
+@import "./feedback/progress.css";
+@import "./feedback/spinner.css";
+@import "./feedback/avatar.css";
+@import "./feedback/meter.css";

package/src/inputs/autocomplete.css

@@ -0,0 +1,60 @@
+/**
+ * Recipe for @morphos/inputs `Autocomplete`. Apply with
+ * `class="morphos-autocomplete"` on the `Autocomplete` root — its text
+ * input and suggestion list are rendered inside it and styled here by
+ * role/data-attribute.
+ */
+.morphos-autocomplete {
+  position: relative;
+  display: inline-block;
+  min-width: 14rem;
+}
+
+.morphos-autocomplete > input {
+  width: 100%;
+  font: inherit;
+  color: var(--morphos-color-text);
+  background: var(--morphos-color-bg);
+  border: 1px solid var(--morphos-color-border);
+  border-radius: var(--morphos-radius-md);
+  padding: var(--morphos-space-2) var(--morphos-space-3);
+  transition: border-color var(--morphos-transition-fast);
+}
+
+.morphos-autocomplete > input:focus-visible {
+  outline: none;
+  border-color: var(--morphos-color-accent);
+  box-shadow: var(--morphos-focus-ring);
+}
+
+.morphos-autocomplete[data-disabled] > input {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.morphos-autocomplete > ul[role="listbox"] {
+  position: absolute;
+  top: calc(100% + var(--morphos-space-1));
+  left: 0;
+  right: 0;
+  z-index: 50;
+  max-height: 16rem;
+  overflow-y: auto;
+  margin: 0;
+  padding: var(--morphos-space-1);
+  list-style: none;
+  background: var(--morphos-color-bg);
+  border: 1px solid var(--morphos-color-border);
+  border-radius: var(--morphos-radius-md);
+}
+
+.morphos-autocomplete > ul[role="listbox"] > li[role="option"] {
+  padding: var(--morphos-space-2) var(--morphos-space-3);
+  border-radius: var(--morphos-radius-sm);
+  cursor: pointer;
+}
+
+.morphos-autocomplete > ul[role="listbox"] > li[role="option"]:hover,
+.morphos-autocomplete > ul[role="listbox"] > li[role="option"][data-active] {
+  background: var(--morphos-color-bg-hover);
+}

package/src/inputs/button.css

@@ -0,0 +1,55 @@
+/**
+ * Recipe for @morphos/inputs `Button`.
+ * Apply with `class="morphos-button"` (add `morphos-button--ghost` /
+ * `morphos-button--outline` for the optional variants below).
+ */
+.morphos-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--morphos-space-2);
+  font: inherit;
+  font-weight: 500;
+  line-height: 1;
+  padding: var(--morphos-space-2) var(--morphos-space-4);
+  border-radius: var(--morphos-radius-md);
+  border: 1px solid transparent;
+  background: var(--morphos-color-accent);
+  color: var(--morphos-color-accent-text);
+  cursor: pointer;
+  transition: background var(--morphos-transition-fast), border-color var(--morphos-transition-fast), opacity var(--morphos-transition-fast);
+}
+
+.morphos-button:hover {
+  background: var(--morphos-color-accent-hover);
+}
+
+.morphos-button:focus-visible {
+  outline: none;
+  box-shadow: var(--morphos-focus-ring);
+}
+
+.morphos-button[data-disabled],
+.morphos-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.morphos-button--outline {
+  background: transparent;
+  border-color: var(--morphos-color-border);
+  color: var(--morphos-color-text);
+}
+
+.morphos-button--outline:hover {
+  background: var(--morphos-color-bg-hover);
+}
+
+.morphos-button--ghost {
+  background: transparent;
+  color: var(--morphos-color-text);
+}
+
+.morphos-button--ghost:hover {
+  background: var(--morphos-color-bg-hover);
+}

package/src/inputs/checkbox-group.css

@@ -0,0 +1,79 @@
+/**
+ * Recipe for @morphos/inputs `CheckboxGroup` + `CheckboxGroupItem`.
+ * Apply `class="morphos-checkbox-group"` to the group and
+ * `class="morphos-checkbox-group-item"` to each item's `<label>`.
+ * `CheckboxGroupItem` doesn't expose a `class` prop on its inner `<input>`,
+ * so its checkbox look is styled here via a descendant selector instead of
+ * the standalone `morphos-checkbox` class.
+ */
+.morphos-checkbox-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--morphos-space-2);
+}
+
+.morphos-checkbox-group[data-orientation="horizontal"] {
+  flex-direction: row;
+  gap: var(--morphos-space-4);
+}
+
+.morphos-checkbox-group[data-disabled] {
+  opacity: 0.5;
+}
+
+.morphos-checkbox-group-item {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--morphos-space-2);
+  cursor: pointer;
+}
+
+.morphos-checkbox-group-item[data-disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.morphos-checkbox-group-item input[type="checkbox"] {
+  appearance: none;
+  -webkit-appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 1.125rem;
+  height: 1.125rem;
+  margin: 0;
+  border: 1px solid var(--morphos-color-border);
+  border-radius: var(--morphos-radius-sm);
+  background: var(--morphos-color-bg);
+  cursor: pointer;
+  transition: background var(--morphos-transition-fast), border-color var(--morphos-transition-fast);
+}
+
+.morphos-checkbox-group-item input[type="checkbox"]::before {
+  content: "";
+  width: 0.65rem;
+  height: 0.65rem;
+  background: var(--morphos-color-accent-text);
+  clip-path: polygon(9% 45%, 34% 66%, 87% 8%, 100% 22%, 37% 91%, 0% 58%);
+  transform: scale(0);
+  transition: transform var(--morphos-transition-fast);
+}
+
+.morphos-checkbox-group-item input[type="checkbox"]:checked {
+  background: var(--morphos-color-accent);
+  border-color: var(--morphos-color-accent);
+}
+
+.morphos-checkbox-group-item input[type="checkbox"]:checked::before {
+  transform: scale(1);
+}
+
+.morphos-checkbox-group-item input[type="checkbox"]:focus-visible {
+  outline: none;
+  box-shadow: var(--morphos-focus-ring);
+}
+
+.morphos-checkbox-group-item input[type="checkbox"]:disabled {
+  cursor: not-allowed;
+}

package/src/inputs/checkbox.css

@@ -0,0 +1,63 @@
+/**
+ * Recipe for @morphos/inputs `Checkbox`.
+ * `Checkbox` renders a bare `<input type="checkbox">` — apply
+ * `class="morphos-checkbox"` directly to it. Pair with a `<label>` in your
+ * own markup for the visible text.
+ */
+.morphos-checkbox {
+  appearance: none;
+  -webkit-appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.125rem;
+  height: 1.125rem;
+  margin: 0;
+  border: 1px solid var(--morphos-color-border);
+  border-radius: var(--morphos-radius-sm);
+  background: var(--morphos-color-bg);
+  cursor: pointer;
+  transition: background var(--morphos-transition-fast), border-color var(--morphos-transition-fast);
+}
+
+.morphos-checkbox::before {
+  content: "";
+  width: 0.65rem;
+  height: 0.65rem;
+  background: var(--morphos-color-accent-text);
+  clip-path: polygon(9% 45%, 34% 66%, 87% 8%, 100% 22%, 37% 91%, 0% 58%);
+  transform: scale(0);
+  transition: transform var(--morphos-transition-fast);
+}
+
+.morphos-checkbox[data-checked] {
+  background: var(--morphos-color-accent);
+  border-color: var(--morphos-color-accent);
+}
+
+.morphos-checkbox[data-checked]::before {
+  transform: scale(1);
+}
+
+.morphos-checkbox:indeterminate {
+  background: var(--morphos-color-accent);
+  border-color: var(--morphos-color-accent);
+}
+
+.morphos-checkbox:indeterminate::before {
+  clip-path: none;
+  width: 0.6rem;
+  height: 0.15rem;
+  transform: scale(1);
+}
+
+.morphos-checkbox:focus-visible {
+  outline: none;
+  box-shadow: var(--morphos-focus-ring);
+}
+
+.morphos-checkbox[data-disabled],
+.morphos-checkbox:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}