@pitchfork-ui/react 0.1.9 → 0.2.0

package/dist/components/CreditCard/CreditCard.css

@@ -0,0 +1,139 @@
+/* Ensure Storybook CSS variable controls always apply to the card */
+/* Ensure Storybook CSS variable controls always apply to the card */
+.css-var-scope .pf-credit-card {
+  color: var(--pf-credit-card-text-color, var(--color-base-white));
+}
+/* ...existing code... */
+.pf-credit-card {
+  --pf-credit-card-border: color-mix(in srgb, var(--color-base-white) 25%, transparent);
+  --pf-credit-card-glare: color-mix(in srgb, var(--color-base-white) 22%, transparent);
+  --pf-credit-card-generic-gradient: linear-gradient(
+    135deg,
+    var(--color-gray-800),
+    var(--color-gray-900) 55%,
+    var(--color-gray-700)
+  );
+  --pf-credit-card-visa-gradient: linear-gradient(
+    135deg,
+    var(--color-brand-700),
+    var(--color-brand-900) 55%,
+    var(--color-brand-700)
+  );
+  --pf-credit-card-mastercard-gradient: linear-gradient(
+    135deg,
+    var(--color-warning-600),
+    var(--color-warning-800) 55%,
+    var(--color-danger-500)
+  );
+  --pf-credit-card-amex-gradient: linear-gradient(
+    135deg,
+    var(--color-success-700),
+    var(--color-success-800) 55%,
+    var(--color-gray-800)
+  );
+  --pf-credit-card-chip-gradient: linear-gradient(
+    135deg,
+    var(--color-gray-50),
+    var(--color-gray-300)
+  );
+
+  border: 1px solid var(--pf-credit-card-border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-md);
+  color: var(--pf-credit-card-text-color, var(--color-base-white));
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+  max-width: 100%;
+  width: 340px;
+  aspect-ratio: 1.586;
+  min-height: 200px;
+  padding: var(--space-4);
+  position: relative;
+}
+
+.pf-credit-card::before {
+  background: radial-gradient(circle at 20% 20%, var(--pf-credit-card-glare), transparent 40%);
+  border-radius: inherit;
+  content: '';
+  inset: 0;
+  pointer-events: none;
+  position: absolute;
+}
+
+.pf-credit-card.is-generic {
+  background: var(--pf-credit-card-generic-gradient);
+}
+.pf-credit-card.is-visa {
+  background: var(--pf-credit-card-visa-gradient);
+}
+.pf-credit-card.is-mastercard {
+  background: var(--pf-credit-card-mastercard-gradient);
+}
+.pf-credit-card.is-amex {
+  background: var(--pf-credit-card-amex-gradient);
+}
+
+.pf-credit-card .top-row {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  position: relative;
+  z-index: 1;
+}
+
+.pf-credit-card .chip {
+  background: var(--pf-credit-card-chip-gradient);
+  border-radius: 4px;
+  display: inline-flex;
+  height: 28px;
+  width: 38px;
+}
+
+.pf-credit-card .brand,
+.pf-credit-card .number,
+.pf-credit-card .label,
+.pf-credit-card .value {
+  color: inherit;
+}
+
+.pf-credit-card .brand {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: 0.08em;
+}
+
+.pf-credit-card .number {
+  font-size: clamp(var(--font-size-lg), 2.6vw, var(--font-size-2xl));
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: 0.08em;
+  line-height: 1.25;
+  margin: 0;
+  position: relative;
+  z-index: 1;
+}
+
+.pf-credit-card .meta {
+  display: flex;
+  gap: var(--space-4);
+  position: relative;
+  z-index: 1;
+}
+
+.pf-credit-card .meta > div {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+}
+
+.pf-credit-card .label {
+  font-size: var(--font-size-2xs);
+  letter-spacing: 0.08em;
+  opacity: 0.85;
+  text-transform: uppercase;
+}
+
+.pf-credit-card .value {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+}

package/dist/{index27.js → components/CreditCard/CreditCard2.js}

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

package/dist/components/DatePicker/DatePicker.css

@@ -0,0 +1,91 @@
+.pf-date-picker {
+  position: relative;
+}
+
+.pf-date-picker__trigger {
+  align-items: center;
+  background: var(--pf-datepicker-bg);
+  border: 1px solid var(--pf-datepicker-border);
+  border-radius: var(--radius-md);
+  color: var(--pf-datepicker-text);
+  cursor: pointer;
+  display: inline-flex;
+  flex: 1;
+  font-size: var(--font-size-sm);
+  gap: var(--space-2);
+  justify-content: space-between;
+  min-height: 40px;
+  min-width: 0;
+  padding: 0 var(--space-3);
+  text-align: left;
+}
+
+.pf-date-picker__trigger:hover:not(:disabled) {
+  border-color: var(--pf-datepicker-border-strong);
+}
+
+.pf-date-picker__trigger:focus-visible {
+  box-shadow: var(--pf-datepicker-focus-ring, var(--pf-focus-ring));
+  outline: none;
+}
+
+.pf-date-picker__trigger:disabled {
+  background: var(--pf-datepicker-bg-subtle);
+  color: var(--pf-datepicker-text-muted);
+  cursor: not-allowed;
+}
+
+.pf-date-picker__trigger--invalid {
+  border-color: var(--pf-datepicker-invalid-border);
+}
+
+.pf-date-picker__value {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.pf-date-picker__value--placeholder {
+  color: var(--pf-datepicker-text-muted);
+}
+
+.pf-date-picker__control-row {
+  align-items: center;
+  display: flex;
+  gap: var(--space-1);
+}
+
+.pf-date-picker__icon-button {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-sm);
+  color: var(--pf-datepicker-text-muted);
+  cursor: pointer;
+  display: inline-flex;
+  flex-shrink: 0;
+  height: 28px;
+  justify-content: center;
+  width: 28px;
+}
+
+.pf-date-picker__icon-button:focus-visible,
+.pf-date-picker__icon-button:hover {
+  background: var(--pf-datepicker-bg-subtle);
+  color: var(--pf-datepicker-text);
+  outline: none;
+}
+
+.pf-date-picker__icon-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.45;
+}
+
+.pf-date-picker__popover {
+  position: fixed;
+  z-index: 999;
+}
+
+.pf-date-picker__popover .pf-field {
+  margin: 0;
+}

package/dist/{index50.js → components/DatePicker/DatePicker2.js}

@@ -1,12 +1,12 @@
-import { Keys, composeDescribedBy } from "./index3.js";
-import { cx } from "./index4.js";
-import { Icon } from "./index6.js";
-import { FieldWrapper } from "./index19.js";
-import { useAnchoredPosition } from "./index30.js";
-import { useDisclosure } from "./index33.js";
-import { useOutsideInteraction } from "./index36.js";
-import { Calendar } from "./index40.js";
-/* empty css        */
+import { Keys, composeDescribedBy } 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 { useDisclosure } from "../../hooks/useDisclosure.js";
+import { useOutsideInteraction } from "../../hooks/useOutsideInteraction.js";
+import { Calendar } from "../Calendar/Calendar2.js";
+import './DatePicker.css';/* empty css           */
 import { forwardRef, useId, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createPortal } from "react-dom";

package/dist/components/Dropdown/Dropdown.css

@@ -0,0 +1,132 @@
+.pf-dropdown {
+  display: inline-flex;
+}
+
+.pf-dropdown__trigger {
+  align-items: center;
+  background: var(--pf-dropdown-button-secondary-bg, var(--pf-button-secondary-bg));
+  border: 1px solid var(--pf-dropdown-button-secondary-border, var(--pf-button-secondary-border));
+  border-radius: var(--radius-md);
+  color: var(--pf-dropdown-button-secondary-text, var(--pf-button-secondary-text));
+  cursor: pointer;
+  display: inline-flex;
+  gap: var(--space-2);
+  min-height: 36px;
+  padding: 0 var(--space-3);
+}
+
+.pf-dropdown__trigger:hover:not(:disabled) {
+  background: var(--pf-dropdown-button-secondary-bg-hover, var(--pf-button-secondary-bg-hover));
+  border-color: var(
+    --pf-dropdown-button-secondary-border-hover,
+    var(--pf-button-secondary-border-hover)
+  );
+}
+
+.pf-dropdown__trigger:focus-visible {
+  box-shadow: var(--pf-dropdown-focus-ring, var(--pf-focus-ring));
+  outline: none;
+}
+
+.pf-dropdown__trigger:disabled,
+.pf-dropdown__trigger[aria-disabled='true'] {
+  background: var(--pf-dropdown-button-secondary-bg-disabled, #f5f5f5);
+  border-color: var(--pf-dropdown-button-secondary-border-disabled, #e0e0e0);
+  color: var(--pf-dropdown-button-secondary-text-disabled, #b0b0b0);
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.pf-dropdown__chevron {
+  color: var(--pf-dropdown-text-muted);
+  display: inline-flex;
+  height: var(--pf-dropdown-icon-size);
+  transition: transform 140ms ease;
+  width: var(--pf-dropdown-icon-size);
+}
+
+.pf-dropdown__chevron svg {
+  height: var(--pf-dropdown-icon-size);
+  width: var(--pf-dropdown-icon-size);
+}
+
+.pf-dropdown__chevron--open {
+  transform: rotate(180deg);
+}
+
+.pf-dropdown__menu {
+  background: var(--pf-dropdown-surface-bg, var(--pf-surface-bg));
+  border: 1px solid var(--pf-dropdown-surface-border, var(--pf-surface-border));
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-md);
+  display: flex;
+  flex-direction: column;
+  gap: var(--pf-dropdown-menu-gap);
+  padding: var(--space-1);
+  position: fixed;
+  z-index: 1000;
+}
+
+.pf-dropdown__item {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-sm);
+  color: var(--pf-dropdown-text);
+  cursor: pointer;
+  display: inline-flex;
+  font: inherit;
+  justify-content: space-between;
+  min-height: 34px;
+  padding: 0 var(--space-2);
+  text-align: left;
+  width: 100%;
+}
+
+.pf-dropdown__item-left {
+  align-items: center;
+  display: inline-flex;
+  gap: var(--space-2);
+}
+
+.pf-dropdown__item-icon {
+  color: var(--pf-dropdown-text-muted);
+  display: inline-flex;
+  height: var(--pf-dropdown-icon-size);
+  width: var(--pf-dropdown-icon-size);
+}
+
+.pf-dropdown__item-icon svg {
+  height: var(--pf-dropdown-icon-size);
+  width: var(--pf-dropdown-icon-size);
+}
+
+.pf-dropdown__item-shortcut {
+  color: var(--pf-dropdown-text-muted);
+  font-size: var(--font-size-xs);
+}
+
+.pf-dropdown__item:hover:not(:disabled),
+.pf-dropdown__item--active {
+  background: var(--pf-dropdown-surface-subtle, var(--pf-surface-subtle));
+}
+
+.pf-dropdown__item--destructive {
+  color: var(--pf-dropdown-text-danger);
+}
+
+.pf-dropdown__item--destructive .pf-dropdown__item-icon {
+  color: var(--pf-dropdown-icon-danger);
+}
+
+.pf-dropdown__item:disabled {
+  color: var(--pf-dropdown-text-muted);
+  cursor: not-allowed;
+  opacity: 0.7;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pf-dropdown__chevron {
+    transition: none;
+  }
+}

package/dist/{index38.js → components/Dropdown/Dropdown2.js}

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

package/dist/components/EmptyState/EmptyState.css

@@ -0,0 +1,72 @@
+.pf-empty-state {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  padding: var(--space-8);
+  text-align: center;
+}
+
+.pf-empty-state--sm {
+  gap: var(--space-2);
+  padding: var(--space-4);
+}
+
+.pf-empty-state--lg {
+  gap: var(--space-4);
+  padding: var(--space-10);
+}
+
+.pf-empty-state__icon {
+  color: var(--pf-empty-state-icon);
+  display: inline-flex;
+  font-size: var(--font-size-3xl);
+  line-height: 1;
+  margin-bottom: var(--space-1);
+}
+
+.pf-empty-state--sm .pf-empty-state__icon {
+  font-size: var(--font-size-xl);
+  margin-bottom: 0;
+}
+
+.pf-empty-state--lg .pf-empty-state__icon {
+  font-size: var(--font-size-5xl);
+  margin-bottom: var(--space-2);
+}
+
+.pf-empty-state__heading {
+  color: var(--pf-empty-state-text);
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-semibold);
+  line-height: 1.3;
+  margin: 0;
+}
+
+.pf-empty-state--sm .pf-empty-state__heading {
+  font-size: var(--font-size-sm);
+}
+
+.pf-empty-state--lg .pf-empty-state__heading {
+  font-size: var(--font-size-xl);
+}
+
+.pf-empty-state__description {
+  color: var(--pf-empty-state-text-muted);
+  font-size: var(--font-size-sm);
+  line-height: 1.5;
+  margin: 0;
+  max-width: 40ch;
+}
+
+.pf-empty-state--lg .pf-empty-state__description {
+  font-size: var(--font-size-md);
+  max-width: 48ch;
+}
+
+.pf-empty-state__action {
+  align-items: center;
+  display: inline-flex;
+  gap: var(--space-2);
+  margin-top: var(--space-1);
+}

package/dist/{index52.js → components/EmptyState/EmptyState2.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 './EmptyState.css';/* empty css           */
 import { forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/EmptyState/EmptyState.tsx

package/dist/components/FileUploader/FileUploader.css

@@ -0,0 +1,135 @@
+.pf-file-uploader {
+  display: grid;
+  gap: var(--space-3);
+}
+
+.pf-file-uploader__input {
+  display: none;
+}
+
+.pf-file-uploader__dropzone {
+  align-items: center;
+  background: var(--pf-file-uploader-bg);
+  border: 1px dashed var(--pf-file-uploader-border);
+  border-radius: var(--radius-md);
+  color: var(--pf-file-uploader-text);
+  cursor: pointer;
+  display: grid;
+  gap: var(--space-1);
+  justify-items: center;
+  padding: var(--space-4);
+  text-align: center;
+  width: 100%;
+}
+
+.pf-file-uploader__dropzone:hover:not(:disabled) {
+  border-color: var(--pf-file-uploader-border-strong);
+  background: var(--pf-file-uploader-bg-subtle);
+}
+
+.pf-file-uploader__dropzone:focus-visible {
+  box-shadow: var(--pf-fileuploader-focus-ring, var(--pf-focus-ring));
+  outline: none;
+}
+
+.pf-file-uploader__dropzone--active {
+  border-color: var(--pf-file-uploader-active-border);
+  box-shadow: inset 0 0 0 1px var(--pf-file-uploader-active-border);
+}
+
+.pf-file-uploader__dropzone--invalid {
+  border-color: var(--pf-file-uploader-invalid-border);
+}
+
+.pf-file-uploader__dropzone:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.pf-file-uploader__icon {
+  align-items: center;
+  background: var(--pf-file-uploader-bg-subtle);
+  border: 1px solid var(--pf-file-uploader-border);
+  border-radius: 999px;
+  color: var(--pf-file-uploader-text-muted);
+  display: inline-flex;
+  height: 36px;
+  justify-content: center;
+  width: 36px;
+}
+
+.pf-file-uploader__title {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+}
+
+.pf-file-uploader__subtitle,
+.pf-file-uploader__hint {
+  color: var(--pf-file-uploader-text-muted);
+  font-size: var(--font-size-xs);
+}
+
+.pf-file-uploader__list {
+  display: grid;
+  gap: var(--space-2);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.pf-file-uploader__list-item {
+  align-items: center;
+  background: var(--pf-file-uploader-bg);
+  border: 1px solid var(--pf-file-uploader-border);
+  border-radius: var(--radius-sm);
+  display: flex;
+  justify-content: space-between;
+  padding: var(--space-2) var(--space-3);
+}
+
+.pf-file-uploader__file-meta {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+
+.pf-file-uploader__file-name {
+  color: var(--pf-file-uploader-text);
+  font-size: var(--font-size-sm);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.pf-file-uploader__file-size {
+  color: var(--pf-file-uploader-text-muted);
+  font-size: var(--font-size-xs);
+}
+
+.pf-file-uploader__remove {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-sm);
+  color: var(--pf-file-uploader-text-muted);
+  cursor: pointer;
+  display: inline-flex;
+  height: 24px;
+  justify-content: center;
+  width: 24px;
+}
+
+.pf-file-uploader__remove:hover:not(:disabled) {
+  background: var(--pf-file-uploader-bg-subtle);
+  color: var(--pf-file-uploader-text);
+}
+
+.pf-file-uploader__remove:focus-visible {
+  box-shadow: var(--pf-fileuploader-focus-ring, var(--pf-focus-ring));
+  outline: none;
+}
+
+.pf-file-uploader__remove:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}

package/dist/{index54.js → components/FileUploader/FileUploader2.js}

@@ -1,7 +1,7 @@
-import { cx } from "./index4.js";
-import { Icon } from "./index6.js";
-import { FieldWrapper } from "./index19.js";
-/* empty css        */
+import { cx } from "../../utils/cx.js";
+import { Icon } from "../Icon/Icon2.js";
+import { FieldWrapper } from "../../utils/FieldWrapper.js";
+import './FileUploader.css';/* empty css             */
 import { forwardRef, useId, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/FileUploader/FileUploader.tsx

package/dist/components/GaugeChart/GaugeChart.css

@@ -0,0 +1,46 @@
+.pf-gauge {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.pf-gauge__svg {
+  position: absolute;
+  inset: 0;
+}
+
+.pf-gauge__track {
+  stroke: var(--pf-gauge-track-color);
+}
+
+.pf-gauge__fill {
+  transition: stroke-dasharray var(--pf-transition-medium, 180ms ease);
+}
+
+.pf-gauge__center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-1);
+  position: relative;
+  z-index: 1;
+  padding: var(--space-2);
+  border-radius: var(--radius-full);
+  background: var(--pf-gauge-center-bg);
+  text-align: center;
+}
+
+.pf-gauge__label {
+  color: var(--pf-gauge-label-color);
+  font-size: var(--pf-gauge-label-size);
+  font-weight: var(--font-weight-semibold);
+  line-height: 1;
+}
+
+.pf-gauge__sub-label {
+  color: var(--pf-gauge-sub-label-color);
+  font-size: var(--font-size-sm);
+  line-height: 1;
+}