@pitchfork-ui/react 0.1.9 → 0.6.0

package/dist/components/Checkbox/Checkbox.css

@@ -0,0 +1,62 @@
+.pf-checkbox-field {
+  align-items: center;
+  display: inline-flex;
+  gap: var(--space-2);
+}
+
+.pf-checkbox {
+  appearance: none;
+  background: var(--pf-checkbox-bg);
+  border: 1px solid var(--pf-checkbox-border);
+  border-radius: var(--pf-checkbox-radius, var(--radius-sm));
+  box-sizing: border-box;
+  cursor: pointer;
+  display: inline-block;
+  flex-shrink: 0;
+  height: 18px;
+  margin: 0;
+  position: relative;
+  width: 18px;
+}
+
+.pf-checkbox:checked {
+  background: var(--pf-checkbox-checked-bg);
+  border-color: var(--pf-checkbox-border);
+}
+
+.pf-checkbox::after {
+  border: solid var(--pf-checkbox-check-color);
+  border-width: 0 2px 2px 0;
+  content: '';
+  height: 9px;
+  left: 5px;
+  opacity: 0;
+  position: absolute;
+  top: 2px;
+  transform: rotate(45deg);
+  width: 5px;
+}
+
+.pf-checkbox:checked::after {
+  opacity: 1;
+}
+
+.pf-checkbox:focus-visible {
+  box-shadow: var(--pf-checkbox-focus-ring, var(--pf-focus-ring));
+  outline: none;
+}
+
+.pf-checkbox:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.pf-checkbox:disabled + label {
+  cursor: not-allowed;
+  opacity: 0.65;
+}
+
+.pf-checkbox-field label {
+  color: var(--pf-checkbox-label-text);
+  font-size: var(--font-size-md);
+}

package/dist/{index29.js → components/Checkbox/Checkbox2.js}

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

package/dist/components/CodeSnippet/CodeSnippet.css

@@ -0,0 +1,155 @@
+.pf-code-snippet {
+  background: var(--pf-code-snippet-bg, var(--color-gray-900));
+  border: 1px solid
+    var(
+      --pf-code-snippet-border,
+      color-mix(
+        in srgb,
+        var(--pf-code-snippet-bg, var(--color-gray-900)) 82%,
+        var(--color-base-white)
+      )
+    );
+  border-radius: var(--radius-md);
+  color: var(--pf-code-snippet-text, var(--color-gray-100));
+  display: grid;
+  overflow: hidden;
+}
+
+.pf-code-snippet__header,
+.pf-code-snippet__toolbar {
+  align-items: center;
+  background: var(
+    --pf-code-snippet-header-bg,
+    color-mix(
+      in srgb,
+      var(--pf-code-snippet-bg, var(--color-gray-900)) 78%,
+      var(--color-base-white)
+    )
+  );
+  border-bottom: 1px solid
+    var(
+      --pf-code-snippet-header-border,
+      color-mix(
+        in srgb,
+        var(--pf-code-snippet-bg, var(--color-gray-900)) 65%,
+        var(--color-base-white)
+      )
+    );
+  display: flex;
+  gap: var(--space-3);
+  justify-content: space-between;
+  min-height: 40px;
+  padding: 0 var(--space-3);
+}
+
+.pf-code-snippet__meta {
+  align-items: baseline;
+  display: inline-flex;
+  gap: var(--space-2);
+}
+
+.pf-code-snippet__title {
+  color: var(--pf-code-snippet-title, var(--color-base-white));
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+}
+
+.pf-code-snippet__language {
+  color: var(--pf-code-snippet-language, var(--color-gray-300));
+  font-size: var(--font-size-2xs);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.pf-code-snippet__copy {
+  align-items: center;
+  background: var(
+    --pf-code-snippet-copy-bg,
+    color-mix(
+      in srgb,
+      var(--pf-code-snippet-bg, var(--color-gray-900)) 70%,
+      var(--color-base-white)
+    )
+  );
+  border: 1px solid
+    var(
+      --pf-code-snippet-copy-border,
+      color-mix(
+        in srgb,
+        var(--pf-code-snippet-bg, var(--color-gray-900)) 55%,
+        var(--color-base-white)
+      )
+    );
+  border-radius: var(--radius-sm);
+  color: var(--pf-code-snippet-copy-text, var(--color-gray-100));
+  cursor: pointer;
+  display: inline-flex;
+  font-size: var(--font-size-xs);
+  gap: var(--space-1);
+  height: 28px;
+  padding: 0 var(--space-2);
+}
+
+.pf-code-snippet__copy:hover {
+  background: var(
+    --pf-code-snippet-copy-hover-bg,
+    color-mix(
+      in srgb,
+      var(--pf-code-snippet-bg, var(--color-gray-900)) 58%,
+      var(--color-base-white)
+    )
+  );
+}
+
+.pf-code-snippet__copy:focus-visible {
+  box-shadow: var(--pf-code-snippet-focus-ring, var(--pf-focus-ring));
+  outline: none;
+}
+
+.pf-code-snippet__pre {
+  margin: 0;
+  max-width: 100%;
+  overflow: auto;
+  padding: var(--space-3);
+}
+
+.pf-code-snippet__pre code {
+  color: inherit;
+  display: block;
+  font-family:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
+    monospace;
+  font-size: var(--font-size-xs);
+  line-height: 1.65;
+  white-space: pre;
+}
+
+.pf-code-snippet__table {
+  border-collapse: collapse;
+  width: 100%;
+}
+
+.pf-code-snippet__line-number {
+  color: var(--pf-code-snippet-line-number, var(--color-gray-400));
+  min-width: 2.5ch;
+  padding-inline-end: var(--space-3);
+  text-align: end;
+  user-select: none;
+  vertical-align: top;
+}
+
+.pf-code-snippet__line-content {
+  white-space: pre;
+}
+
+.pf-code-snippet__sr-only {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}

package/dist/{index46.js → components/CodeSnippet/CodeSnippet2.js}

@@ -1,9 +1,9 @@
-import { cx } from "./index4.js";
-import { Icon } from "./index6.js";
-import { Highlight2, themes_exports } from "./index44.js";
-/* empty css        */
+import { cx } from "../../utils/cx.js";
+import { Icon } from "../Icon/Icon2.js";
+import './CodeSnippet.css';/* empty css            */
 import { forwardRef, useEffect, useId, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { Highlight, themes } from "prism-react-renderer";
 //#region src/components/CodeSnippet/CodeSnippet.tsx
 var CodeSnippet = forwardRef(function CodeSnippet({ className, code, language, title, showLineNumbers = false, maxHeight, copyLabel = "Copy", copiedLabel = "Copied", onCodeCopy, ...props }, ref) {
 	const [copied, setCopied] = useState(false);
@@ -73,10 +73,10 @@ var CodeSnippet = forwardRef(function CodeSnippet({ className, code, language, t
 					}), /* @__PURE__ */ jsx("span", { children: copied ? copiedLabel : copyLabel })]
 				})
 			}) : null,
-			/* @__PURE__ */ jsx(Highlight2, {
+			/* @__PURE__ */ jsx(Highlight, {
 				code,
 				language: language || "tsx",
-				theme: themes_exports.vsDark,
+				theme: themes.vsDark,
 				children: ({ className: prismClass, style, tokens, getLineProps, getTokenProps }) => /* @__PURE__ */ jsx("pre", {
 					className: cx("pf-code-snippet__pre", prismClass),
 					style: {

package/dist/components/ContentDivider/ContentDivider.css

@@ -0,0 +1,38 @@
+.pf-content-divider {
+  align-items: center;
+  color: var(--pf-content-divider-text);
+  display: flex;
+  gap: var(--space-3);
+  width: 100%;
+}
+
+.pf-content-divider--inset {
+  padding-inline-start: var(--space-2);
+  padding-inline-end: var(--space-2);
+}
+
+.pf-content-divider__line {
+  background: var(--pf-content-divider-line);
+  display: block;
+  flex: 1;
+  height: 1px;
+}
+
+.pf-content-divider__label {
+  color: var(--pf-content-divider-text);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  line-height: 1;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.pf-content-divider--vertical {
+  align-self: stretch;
+  background: var(--pf-content-divider-line);
+  display: inline-block;
+  flex: 0 0 auto;
+  height: auto;
+  min-height: 100%;
+  width: 1px;
+}

package/dist/{index48.js → components/ContentDivider/ContentDivider2.js}

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

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: start;
+}
+
+.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 { useAnchoredPosition } from "../../hooks/useAnchoredPosition.js";
+import { useDisclosure } from "../../hooks/useDisclosure.js";
+import { useOutsideInteraction } from "../../hooks/useOutsideInteraction.js";
+import { cx } from "../../utils/cx.js";
+import { Icon } from "../Icon/Icon2.js";
+import { FieldWrapper } from "../../utils/FieldWrapper.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";