@pitchfork-ui/react 0.1.9 → 0.2.0

package/dist/components/Metrics/Metrics.css

@@ -0,0 +1,106 @@
+.pf-metric-grid {
+  display: grid;
+  gap: var(--space-4);
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+}
+
+.pf-metric-card {
+  background: var(--pf-metric-bg);
+  border: 1px solid var(--pf-metric-border);
+  border-radius: var(--radius-md);
+  display: grid;
+  gap: var(--space-3);
+  padding: var(--space-3);
+}
+
+@media (min-width: 768px) {
+  .pf-metric-card {
+    padding: var(--space-4);
+  }
+}
+
+.pf-metric-card__header {
+  align-items: start;
+  display: flex;
+  gap: var(--space-3);
+  justify-content: space-between;
+}
+
+.pf-metric-card__heading-wrap {
+  align-items: center;
+  display: inline-flex;
+  gap: var(--space-2);
+  min-width: 0;
+}
+
+.pf-metric-card__heading {
+  color: var(--pf-metric-text-muted);
+  font-size: var(--font-size-sm);
+  margin: 0;
+}
+
+.pf-metric-card__icon {
+  align-items: center;
+  color: var(--pf-metric-text-muted);
+  display: inline-flex;
+  font-size: var(--font-size-sm);
+  justify-content: center;
+}
+
+.pf-metric-card__action {
+  align-items: center;
+  display: inline-flex;
+  gap: var(--space-2);
+}
+
+.pf-metric-card__body {
+  align-items: baseline;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+}
+
+.pf-metric-card__value {
+  color: var(--pf-metric-text);
+  font-size: clamp(var(--font-size-3xl), 3vw, var(--font-size-4xl));
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: -0.02em;
+  line-height: 1.05;
+  margin: 0;
+}
+
+.pf-metric-card__trend {
+  align-items: center;
+  border-radius: var(--radius-full);
+  display: inline-flex;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  gap: var(--space-1);
+  padding: var(--space-1) var(--space-2);
+}
+
+.pf-metric-card__trend-symbol {
+  font-size: var(--font-size-2xs);
+  line-height: 1;
+}
+
+.pf-metric-card__trend--positive {
+  background: color-mix(in srgb, var(--pf-metric-success-bg) 55%, var(--color-base-white));
+  color: var(--pf-metric-success-text);
+}
+
+.pf-metric-card__trend--negative {
+  background: color-mix(in srgb, var(--pf-metric-danger-bg) 55%, var(--color-base-white));
+  color: var(--pf-metric-danger-text);
+}
+
+.pf-metric-card__trend--neutral {
+  background: var(--pf-metric-bg-subtle);
+  color: var(--pf-metric-text-muted);
+}
+
+.pf-metric-card__description {
+  color: var(--pf-metric-text-muted);
+  font-size: var(--font-size-sm);
+  margin: 0;
+}

package/dist/{index64.js → components/Metrics/Metrics2.js}

@@ -1,6 +1,6 @@
-import { cx } from "./index4.js";
-import { Icon } from "./index6.js";
-/* empty css        */
+import { cx } from "../../utils/cx.js";
+import { Icon } from "../Icon/Icon2.js";
+import './Metrics.css';/* empty css        */
 import { forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Metrics/Metrics.tsx

package/dist/components/Modal/Modal.css

@@ -0,0 +1,136 @@
+.pf-modal__portal {
+  inset: 0;
+  position: fixed;
+  z-index: 1000;
+}
+
+.pf-modal__overlay {
+  background: var(--pf-modal-overlay-backdrop, var(--pf-overlay-backdrop));
+  inset: 0;
+  position: absolute;
+}
+
+.pf-modal__viewport {
+  align-items: end;
+  display: flex;
+  inset: 0;
+  justify-content: center;
+  overflow-y: auto;
+  padding: var(--space-2);
+  position: relative;
+}
+
+@media (min-width: 768px) {
+  .pf-modal__viewport {
+    align-items: center;
+    padding: var(--space-4);
+  }
+}
+
+.pf-modal {
+  background: var(--pf-modal-bg);
+  border: 1px solid color-mix(in srgb, var(--pf-modal-border) 85%, transparent);
+  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
+  box-shadow: var(--pf-modal-elevation-overlay-shadow, var(--pf-elevation-overlay-shadow));
+  color: var(--pf-modal-text);
+  display: grid;
+  max-height: 92vh;
+  overflow: hidden;
+  width: 100%;
+}
+
+@media (min-width: 768px) {
+  .pf-modal {
+    border-radius: var(--radius-lg);
+    max-height: min(90vh, 720px);
+  }
+}
+
+.pf-modal:focus-visible {
+  outline: none;
+}
+
+.pf-modal--sm {
+  max-width: 420px;
+}
+
+.pf-modal--md {
+  max-width: 560px;
+}
+
+.pf-modal--lg {
+  max-width: 720px;
+}
+
+.pf-modal__header,
+.pf-modal__footer {
+  align-items: start;
+  display: flex;
+  gap: var(--space-3);
+  justify-content: space-between;
+  padding: var(--space-3);
+}
+
+@media (min-width: 768px) {
+  .pf-modal__header,
+  .pf-modal__body,
+  .pf-modal__footer {
+    padding: var(--space-4);
+  }
+}
+
+.pf-modal__header {
+  border-bottom: 1px solid var(--pf-modal-border);
+}
+
+.pf-modal__footer {
+  border-top: 1px solid var(--pf-modal-border);
+  justify-content: flex-end;
+}
+
+.pf-modal__body {
+  overflow-y: auto;
+  padding: var(--space-3);
+}
+
+.pf-modal__heading-group {
+  display: grid;
+  gap: var(--space-1);
+  min-width: 0;
+}
+
+.pf-modal__title {
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-semibold);
+  line-height: 1.2;
+  margin: 0;
+}
+
+.pf-modal__description {
+  color: var(--pf-modal-text-muted);
+  font-size: var(--font-size-sm);
+  line-height: 1.45;
+  margin: 0;
+}
+
+.pf-modal__close {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-sm);
+  color: var(--pf-modal-text-muted);
+  cursor: pointer;
+  display: inline-flex;
+  flex: 0 0 auto;
+  font-size: var(--font-size-lg);
+  height: var(--space-8);
+  justify-content: center;
+  width: var(--space-8);
+}
+
+.pf-modal__close:hover,
+.pf-modal__close:focus-visible {
+  background: var(--pf-modal-bg-subtle);
+  color: var(--pf-modal-text);
+  outline: none;
+}

package/dist/{index66.js → components/Modal/Modal2.js}

@@ -1,7 +1,7 @@
-import { cx } from "./index4.js";
-import { Icon } from "./index6.js";
-import { useFocusTrap } from "./index34.js";
-/* empty css        */
+import { cx } from "../../utils/cx.js";
+import { Icon } from "../Icon/Icon2.js";
+import { useFocusTrap } from "../../hooks/useFocusTrap.js";
+import './Modal.css';/* empty css      */
 import { forwardRef, useEffect, useId, useImperativeHandle, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createPortal } from "react-dom";

package/dist/components/MultiSelect/MultiSelect.css

@@ -0,0 +1,157 @@
+.pf-multi-select {
+  position: relative;
+}
+
+.pf-multi-select__trigger {
+  align-items: center;
+  background: var(--pf-multiselect-bg);
+  border: 1px solid var(--pf-multiselect-border);
+  border-radius: var(--radius-md);
+  color: var(--pf-multiselect-text);
+  cursor: pointer;
+  display: flex;
+  font: inherit;
+  gap: var(--space-2);
+  justify-content: space-between;
+  min-height: 40px;
+  padding: var(--space-1) var(--space-2) var(--space-1) var(--space-2);
+  text-align: left;
+  width: 100%;
+  transition:
+    background 0.2s,
+    border 0.2s,
+    color 0.2s,
+    opacity 0.2s;
+}
+
+.pf-multi-select__trigger:disabled,
+.pf-multi-select__trigger[aria-disabled='true'] {
+  background: var(--pf-control-bg-disabled);
+  border-color: var(--pf-control-border-disabled);
+  color: var(--pf-control-text-disabled);
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.pf-multi-select__trigger:focus {
+  outline: none;
+}
+
+.pf-multi-select__trigger:focus-visible {
+  border-color: var(--pf-multiselect-focus-border);
+  box-shadow: var(--pf-multiselect-focus-ring, var(--pf-focus-ring));
+}
+
+.pf-multi-select__trigger--open {
+  border-color: var(--pf-multiselect-focus-border);
+}
+
+.pf-multi-select__trigger--invalid {
+  border-color: var(--pf-multiselect-invalid-border);
+}
+
+.pf-multi-select__placeholder {
+  color: var(--pf-multiselect-text-muted);
+}
+
+.pf-multi-select__chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-1);
+}
+
+.pf-multi-select__chip {
+  background: var(--pf-multiselect-bg-subtle);
+  border-radius: var(--radius-full);
+  color: var(--pf-multiselect-text);
+  font-size: var(--font-size-sm);
+  line-height: 1;
+  padding: 7px var(--space-2);
+}
+
+.pf-multi-select__icon {
+  align-items: center;
+  color: var(--pf-multiselect-text);
+  display: inline-flex;
+  flex-shrink: 0;
+  height: 20px;
+  justify-content: center;
+  width: 20px;
+  transform-origin: center;
+  transition: transform 140ms ease;
+}
+
+.pf-multi-select__icon svg {
+  display: block;
+  height: 16px;
+  width: 16px;
+}
+
+.pf-multi-select__icon--open {
+  transform: rotate(180deg);
+}
+
+.pf-multi-select__menu {
+  background: var(--pf-multiselect-bg);
+  border: 1px solid var(--pf-multiselect-border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--pf-multiselect-elevation-popover-shadow, var(--pf-elevation-popover-shadow));
+  list-style: none;
+  margin: 0;
+  max-height: 240px;
+  overflow: auto;
+  padding: var(--space-1);
+  position: fixed;
+  z-index: 1000;
+}
+
+.pf-multi-select__option {
+  align-items: center;
+  border-radius: var(--radius-sm);
+  color: var(--pf-multiselect-text);
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  gap: var(--space-2);
+  padding: var(--space-2) var(--space-3);
+}
+
+.pf-multi-select__option:hover,
+.pf-multi-select__option--active {
+  background: var(--pf-multiselect-active-bg);
+  color: var(--pf-multiselect-active-text);
+}
+
+.pf-multi-select__option--selected {
+  font-weight: var(--font-weight-medium);
+}
+
+.pf-multi-select__option--disabled {
+  background: transparent;
+  color: var(--pf-multiselect-text-muted);
+  cursor: not-allowed;
+}
+
+.pf-multi-select__option--disabled:hover {
+  background: transparent;
+  color: var(--pf-multiselect-text-muted);
+}
+
+.pf-multi-select__check {
+  display: inline-flex;
+  height: 16px;
+  width: 16px;
+}
+
+.pf-multi-select__check svg {
+  display: block;
+  height: 16px;
+  width: 16px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pf-multi-select__trigger,
+  .pf-multi-select__icon {
+    transition: none;
+  }
+}

package/dist/{index68.js → components/MultiSelect/MultiSelect2.js}

@@ -1,14 +1,14 @@
-import { Keys, composeDescribedBy, isActivationKey } from "./index3.js";
-import { cx } from "./index4.js";
-import { Icon } from "./index6.js";
-import { FieldWrapper } from "./index19.js";
-import { useAnchoredPosition } from "./index30.js";
-import { useComposedRefs } from "./index31.js";
-import { useControllableState } from "./index32.js";
-import { useDisclosure } from "./index33.js";
-import { useListNavigation } from "./index35.js";
-import { useOutsideInteraction } from "./index36.js";
-/* empty css        */
+import { Keys, composeDescribedBy, isActivationKey } from "../../a11y/index.js";
+import { cx } from "../../utils/cx.js";
+import { Icon } from "../Icon/Icon2.js";
+import { FieldWrapper } from "../../utils/FieldWrapper.js";
+import { useAnchoredPosition } from "../../hooks/useAnchoredPosition.js";
+import { useComposedRefs } from "../../hooks/useComposedRefs.js";
+import { useControllableState } from "../../hooks/useControllableState.js";
+import { useDisclosure } from "../../hooks/useDisclosure.js";
+import { useListNavigation } from "../../hooks/useListNavigation.js";
+import { useOutsideInteraction } from "../../hooks/useOutsideInteraction.js";
+import './MultiSelect.css';/* empty css            */
 import { forwardRef, useEffect, useId, useMemo, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createPortal } from "react-dom";

package/dist/components/Notification/Notification.css

@@ -0,0 +1,187 @@
+.pf-notification-stack {
+  display: grid;
+  gap: var(--space-3);
+  left: var(--space-2);
+  position: fixed;
+  right: var(--space-2);
+  width: auto;
+  z-index: 1000;
+}
+
+.pf-notification-stack--top-right,
+.pf-notification-stack--top-left {
+  top: var(--space-2);
+}
+
+.pf-notification-stack--bottom-right,
+.pf-notification-stack--bottom-left {
+  bottom: var(--space-2);
+}
+
+@media (min-width: 768px) {
+  .pf-notification-stack {
+    left: auto;
+    right: auto;
+    width: min(420px, calc(100vw - (var(--space-4) * 2)));
+  }
+
+  .pf-notification-stack--top-right,
+  .pf-notification-stack--top-left {
+    top: var(--space-4);
+  }
+
+  .pf-notification-stack--bottom-right,
+  .pf-notification-stack--bottom-left {
+    bottom: var(--space-4);
+  }
+
+  .pf-notification-stack--top-right,
+  .pf-notification-stack--bottom-right {
+    justify-items: end;
+    right: var(--space-4);
+  }
+
+  .pf-notification-stack--top-left,
+  .pf-notification-stack--bottom-left {
+    left: var(--space-4);
+  }
+}
+
+.pf-notification {
+  align-items: flex-start;
+  background: var(--pf-notification-bg);
+  border: 1px solid var(--pf-notification-border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--pf-notification-elevation-floating-shadow, var(--pf-elevation-floating-shadow));
+  display: grid;
+  gap: var(--space-3);
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  max-width: none;
+  padding: var(--space-3);
+  width: 100%;
+}
+
+@media (min-width: 768px) {
+  .pf-notification {
+    max-width: 420px;
+    padding: var(--space-4);
+  }
+}
+
+.pf-notification--info {
+  background: color-mix(in srgb, var(--pf-notification-info-bg) 45%, var(--color-base-white));
+  border-color: var(--pf-notification-info-border);
+}
+
+.pf-notification--success {
+  background: color-mix(in srgb, var(--pf-notification-success-bg) 45%, var(--color-base-white));
+  border-color: var(--pf-notification-success-border);
+}
+
+.pf-notification--warning {
+  background: color-mix(in srgb, var(--pf-notification-warning-bg) 45%, var(--color-base-white));
+  border-color: var(--pf-notification-warning-border);
+}
+
+.pf-notification--danger {
+  background: color-mix(in srgb, var(--pf-notification-danger-bg) 45%, var(--color-base-white));
+  border-color: var(--pf-notification-danger-border);
+}
+
+.pf-notification__icon {
+  align-items: center;
+  display: inline-flex;
+  font-size: var(--font-size-lg);
+  height: 1em;
+  justify-content: center;
+  line-height: 1;
+  margin-top: 2px;
+  width: 1em;
+}
+
+.pf-notification--info .pf-notification__icon {
+  color: var(--pf-notification-info-icon);
+}
+
+.pf-notification--info .pf-notification__title {
+  color: var(--pf-notification-info-title);
+}
+
+.pf-notification--info .pf-notification__description {
+  color: var(--pf-notification-info-icon);
+}
+
+.pf-notification--info .pf-notification__dismiss {
+  color: var(--pf-notification-info-icon);
+}
+
+.pf-notification--info .pf-notification__dismiss:hover,
+.pf-notification--info .pf-notification__dismiss:focus-visible {
+  background: var(--pf-notification-info-hover-bg);
+  color: var(--pf-notification-info-hover-icon);
+}
+
+.pf-notification--success .pf-notification__icon {
+  color: var(--pf-notification-success-icon);
+}
+
+.pf-notification--warning .pf-notification__icon {
+  color: var(--pf-notification-warning-icon);
+}
+
+.pf-notification--danger .pf-notification__icon {
+  color: var(--pf-notification-danger-icon);
+}
+
+.pf-notification__content {
+  display: grid;
+  gap: var(--space-1);
+  min-width: 0;
+}
+
+.pf-notification__title {
+  color: var(--pf-notification-text);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  line-height: 1.35;
+  margin: 0;
+}
+
+.pf-notification__description {
+  color: var(--pf-notification-text-muted);
+  font-size: var(--font-size-sm);
+  line-height: 1.45;
+}
+
+.pf-notification__description p {
+  margin: 0;
+}
+
+.pf-notification__action {
+  align-items: center;
+  display: inline-flex;
+  gap: var(--space-2);
+  margin-top: var(--space-2);
+}
+
+.pf-notification__dismiss {
+  align-items: center;
+  align-self: start;
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-sm);
+  color: var(--pf-notification-text-muted);
+  cursor: pointer;
+  display: inline-flex;
+  font-size: var(--font-size-md);
+  height: 28px;
+  justify-content: center;
+  width: 28px;
+}
+
+.pf-notification__dismiss:hover,
+.pf-notification__dismiss:focus-visible {
+  background: var(--pf-notification-bg-subtle);
+  color: var(--pf-notification-text);
+  outline: none;
+}

package/dist/{index70.js → components/Notification/Notification2.js}

@@ -1,6 +1,6 @@
-import { cx } from "./index4.js";
-import { Icon } from "./index6.js";
-/* empty css        */
+import { cx } from "../../utils/cx.js";
+import { Icon } from "../Icon/Icon2.js";
+import './Notification.css';/* empty css             */
 import { forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Notification/Notification.tsx