@pitchfork-ui/react 0.1.9 → 0.2.0

package/dist/components/Calendar/Calendar.css

@@ -0,0 +1,144 @@
+.pf-calendar {
+  background: var(--pf-calendar-bg);
+  border: 1px solid var(--pf-calendar-border);
+  color: var(--pf-calendar-text);
+  display: grid;
+  gap: var(--space-2);
+  max-width: 320px;
+  padding: var(--space-3);
+}
+
+.pf-calendar--invalid {
+  border-color: var(--pf-calendar-invalid-border);
+}
+
+.pf-calendar__header {
+  align-items: center;
+  display: grid;
+  gap: var(--space-2);
+  grid-template-columns: 28px 1fr 28px;
+}
+
+.pf-calendar__month-controls {
+  align-items: center;
+  display: grid;
+  gap: var(--space-1);
+  grid-template-columns: minmax(0, 1fr) auto;
+}
+
+.pf-calendar__control-label {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.pf-calendar__control {
+  appearance: none;
+  background: var(--pf-calendar-bg);
+  border: 1px solid var(--pf-calendar-border);
+  border-radius: var(--radius-sm);
+  color: var(--pf-calendar-text);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  height: 28px;
+  min-width: 0;
+  padding: 0 var(--space-2);
+}
+
+.pf-calendar__control:focus-visible {
+  box-shadow: var(--pf-calendar-focus-ring, var(--pf-focus-ring));
+  outline: none;
+}
+
+.pf-calendar__nav {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-sm);
+  color: var(--pf-calendar-text-muted);
+  cursor: pointer;
+  display: inline-flex;
+  font-size: var(--font-size-sm);
+  height: 28px;
+  justify-content: center;
+  padding: 0;
+  width: 28px;
+}
+
+.pf-calendar__nav:hover {
+  background: var(--pf-calendar-bg-subtle);
+  color: var(--pf-calendar-text);
+}
+
+.pf-calendar__nav:focus-visible {
+  box-shadow: var(--pf-calendar-focus-ring, var(--pf-focus-ring));
+  outline: none;
+}
+
+.pf-calendar__weekday {
+  color: var(--pf-calendar-text-muted);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  text-align: center;
+}
+
+.pf-calendar__grid {
+  display: grid;
+  gap: var(--space-1);
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+}
+
+.pf-calendar__day,
+.pf-calendar__day-empty {
+  align-items: center;
+  aspect-ratio: 1 / 1;
+  border-radius: var(--radius-sm);
+  display: inline-flex;
+  font-size: var(--font-size-xs);
+  justify-content: center;
+}
+
+.pf-calendar__day {
+  background: transparent;
+  border: 0;
+  color: var(--pf-calendar-text);
+  cursor: pointer;
+}
+
+.pf-calendar__day:hover:not(:disabled) {
+  background: var(--pf-calendar-bg-subtle);
+}
+
+.pf-calendar__day--outside {
+  color: var(--pf-calendar-text-muted);
+  opacity: 0.55;
+}
+
+.pf-calendar__day--today {
+  background: var(--pf-calendar-today-bg);
+  border: 1.5px solid var(--pf-calendar-today-border);
+  box-shadow: none;
+}
+
+.pf-calendar__day--selected {
+  background: var(--pf-calendar-selected-bg);
+  color: var(--pf-calendar-selected-text);
+  font-weight: var(--font-weight-semibold);
+}
+
+.pf-calendar__day--selected:hover:not(:disabled) {
+  background: var(--pf-calendar-selected-bg-hover);
+  color: var(--pf-calendar-selected-text);
+}
+
+.pf-calendar__day:disabled {
+  color: var(--pf-calendar-text-muted);
+  cursor: not-allowed;
+  opacity: 0.45;
+}

package/dist/{index40.js → components/Calendar/Calendar2.js}

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

package/dist/components/Card/Card.css

@@ -0,0 +1,23 @@
+.pf-card {
+  background: var(--pf-card-background);
+  border: 1px solid var(--pf-card-border);
+  border-radius: var(--pf-card-radius, var(--radius-lg));
+  box-shadow: var(--pf-card-shadow, var(--shadow-sm));
+  overflow: hidden;
+}
+
+.pf-card__header,
+.pf-card__content,
+.pf-card__footer {
+  padding: var(--pf-card-section-padding, var(--space-4));
+}
+
+.pf-card__header {
+  border-bottom: 1px solid var(--pf-card-border);
+}
+
+.pf-card__footer {
+  display: flex;
+  gap: var(--pf-card-footer-gap);
+  border-top: 1px solid var(--pf-card-border);
+}

package/dist/{index25.js → components/Card/Card2.js}

@@ -1,5 +1,5 @@
-import { cx } from "./index4.js";
-/* empty css        */
+import { cx } from "../../utils/cx.js";
+import './Card.css';/* empty css     */
 import { jsx } from "react/jsx-runtime";
 //#region src/components/Card/Card.tsx
 function Card({ className, ref, ...props }) {

package/dist/components/Carousel/Carousel.css

@@ -0,0 +1,122 @@
+.pf-carousel {
+  background: var(--pf-carousel-bg);
+  border: 1px solid var(--pf-carousel-border);
+  border-radius: var(--pf-carousel-radius, var(--radius-md));
+  display: grid;
+  gap: var(--pf-carousel-gap, var(--space-3));
+  overflow: hidden;
+  padding: var(--pf-carousel-padding, var(--space-3));
+  width: 100%;
+}
+
+.pf-carousel__viewport {
+  background: var(--pf-carousel-viewport-bg);
+  border-radius: var(--pf-carousel-viewport-radius, var(--radius-sm));
+  overflow: hidden;
+  width: 100%;
+}
+
+.pf-carousel__track {
+  display: flex;
+  transition: transform var(--pf-carousel-transition-duration, 180ms) ease-out;
+  width: 100%;
+}
+
+.pf-carousel__slide {
+  background: var(--pf-carousel-slide-background, transparent);
+  color: var(--pf-carousel-slide-text);
+  flex: 0 0 100%;
+  min-width: 0;
+  padding: var(--pf-carousel-slide-padding, 0);
+}
+
+.pf-carousel__empty {
+  align-items: center;
+  color: var(--pf-carousel-empty-text);
+  display: flex;
+  font-size: var(--pf-carousel-empty-font-size, var(--font-size-sm));
+  justify-content: center;
+  min-height: var(--pf-carousel-empty-min-height, 180px);
+  padding: var(--pf-carousel-empty-padding, var(--space-4));
+  text-align: center;
+}
+
+.pf-carousel__controls {
+  align-items: center;
+  display: grid;
+  gap: var(--pf-carousel-controls-gap, var(--space-2));
+  grid-template-columns:
+    var(--pf-carousel-nav-size, 28px) 1fr
+    var(--pf-carousel-nav-size, 28px);
+}
+
+.pf-carousel__nav {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  border-radius: var(--pf-carousel-nav-radius, var(--radius-sm));
+  color: var(--pf-carousel-nav-text);
+  cursor: pointer;
+  display: inline-flex;
+  font-size: var(--pf-carousel-nav-font-size, var(--font-size-sm));
+  height: var(--pf-carousel-nav-size, 28px);
+  justify-content: center;
+  padding: 0;
+  width: var(--pf-carousel-nav-size, 28px);
+}
+
+.pf-carousel__nav:hover:not(:disabled) {
+  background: var(--pf-carousel-nav-hover-bg);
+  color: var(--pf-carousel-nav-hover-text);
+}
+
+.pf-carousel__nav:focus-visible {
+  box-shadow: var(--pf-carousel-focus-ring, var(--pf-focus-ring));
+  outline: none;
+}
+
+.pf-carousel__nav:disabled {
+  color: var(--pf-carousel-nav-text);
+  cursor: not-allowed;
+  opacity: var(--pf-carousel-disabled-opacity, 0.45);
+}
+
+.pf-carousel__indicators {
+  align-items: center;
+  display: inline-flex;
+  gap: var(--pf-carousel-indicator-gap, var(--space-1));
+  justify-content: center;
+}
+
+.pf-carousel__indicator {
+  background: var(--pf-carousel-indicator-bg);
+  border: 0;
+  border-radius: var(--pf-carousel-indicator-radius, 999px);
+  cursor: pointer;
+  height: var(--pf-carousel-indicator-size, 8px);
+  padding: 0;
+  transition: all var(--pf-carousel-indicator-transition-duration, 120ms) ease-out;
+  width: var(--pf-carousel-indicator-size, 8px);
+}
+
+.pf-carousel__indicator--active {
+  background: var(--pf-carousel-indicator-active-bg);
+  width: var(--pf-carousel-indicator-active-width, 20px);
+}
+
+.pf-carousel__indicator:focus-visible {
+  box-shadow: var(--pf-carousel-focus-ring, var(--pf-focus-ring));
+  outline: none;
+}
+
+.pf-carousel__indicator-spacer {
+  display: block;
+  min-height: var(--pf-carousel-indicator-size, 8px);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pf-carousel__track,
+  .pf-carousel__indicator {
+    transition: none;
+  }
+}

package/dist/{index42.js → components/Carousel/Carousel2.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 './Carousel.css';/* empty css         */
 import { forwardRef, useEffect, useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Carousel/Carousel.tsx

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-right: var(--space-3);
+  text-align: right;
+  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-left: var(--space-2);
+  padding-right: 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