@pitchfork-ui/react 0.1.9 → 0.2.0

package/dist/components/Table/Table.css

@@ -0,0 +1,126 @@
+.pf-table {
+  background: var(--pf-table-bg);
+  border: 1px solid var(--pf-table-border);
+  border-radius: var(--radius-md);
+  overflow: auto;
+}
+
+.pf-table__native {
+  border-collapse: separate;
+  border-spacing: 0;
+  min-width: 620px;
+  width: 100%;
+}
+
+.pf-table__caption {
+  align-items: center;
+  border-bottom: 1px solid var(--pf-table-border);
+  color: var(--pf-table-text-muted);
+  display: flex;
+  font-size: var(--font-size-sm);
+  min-height: 56px;
+  padding-top: var(--space-3);
+  padding-right: var(--space-4, 16px);
+  padding-bottom: var(--space-3);
+  padding-left: var(--space-4, 16px);
+}
+
+.pf-table__head-cell,
+.pf-table__body-cell,
+.pf-table__empty {
+  border-bottom: 1px solid var(--pf-table-border);
+  font-size: var(--font-size-sm);
+  line-height: 1.4;
+  padding: 14px var(--space-3);
+  vertical-align: middle;
+}
+
+@media (min-width: 768px) {
+  .pf-table__head-cell,
+  .pf-table__body-cell,
+  .pf-table__empty {
+    padding-inline: var(--space-4);
+  }
+}
+
+.pf-table__head-cell {
+  background: var(--pf-table-bg-subtle);
+  color: var(--pf-table-text-muted);
+  font-weight: var(--font-weight-semibold);
+  position: relative;
+  text-transform: none;
+  width: var(--pf-col-width, auto);
+}
+
+.pf-table__sort-button {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  color: inherit;
+  cursor: pointer;
+  display: inline-flex;
+  font: inherit;
+  gap: var(--space-2);
+  justify-content: inherit;
+  padding: 0;
+  width: 100%;
+}
+
+.pf-table__sort-button:hover,
+.pf-table__sort-button:focus-visible {
+  color: var(--pf-table-text);
+  outline: none;
+}
+
+.pf-table__sort-indicator {
+  display: inline-flex;
+  font-size: var(--font-size-2xs);
+  line-height: 1;
+  opacity: 0.7;
+}
+
+.pf-table__body-cell {
+  color: var(--pf-table-text);
+}
+
+.pf-table__native tbody tr:last-child .pf-table__body-cell,
+.pf-table__native tbody tr:last-child .pf-table__empty {
+  border-bottom: 0;
+}
+
+.pf-table--striped .pf-table__native tbody tr:nth-child(even) .pf-table__body-cell {
+  background: color-mix(in srgb, var(--pf-table-bg-subtle) 55%, transparent);
+}
+
+.pf-table--hoverable .pf-table__native tbody tr:hover .pf-table__body-cell {
+  background: color-mix(in srgb, var(--pf-table-bg-subtle) 70%, transparent);
+}
+
+.pf-table--sticky-header .pf-table__head-cell {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+.pf-table__cell--left {
+  text-align: left;
+}
+
+.pf-table__cell--center {
+  text-align: center;
+}
+
+.pf-table__cell--right {
+  text-align: right;
+}
+
+.pf-table__empty {
+  color: var(--pf-table-text-muted);
+  text-align: center;
+}
+
+.pf-table--dense .pf-table__head-cell,
+.pf-table--dense .pf-table__body-cell,
+.pf-table--dense .pf-table__empty {
+  padding-block: var(--space-3);
+}

package/dist/{index108.js → components/Table/Table2.js}

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

package/dist/components/Tabs/Tabs.css

@@ -0,0 +1,112 @@
+.pf-tabs {
+  display: grid;
+  gap: var(--space-3);
+}
+
+@media (min-width: 768px) {
+  .pf-tabs {
+    gap: var(--space-4);
+  }
+}
+
+.pf-tabs__list {
+  display: flex;
+  overflow-x: auto;
+}
+
+.pf-tabs__list--full-width {
+  width: 100%;
+}
+
+.pf-tabs__list--underline {
+  border-bottom: 1px solid var(--pf-tabs-border);
+  gap: var(--space-1);
+}
+
+.pf-tabs__list--pills {
+  background: var(--pf-tabs-bg-subtle);
+  border-radius: var(--radius-md);
+  gap: var(--space-1);
+  padding: var(--space-1);
+}
+
+.pf-tabs__tab {
+  appearance: none;
+  background: transparent;
+  border: 0;
+  color: var(--pf-tabs-text-muted);
+  cursor: pointer;
+  font-family: inherit;
+  font-weight: var(--font-weight-medium);
+  min-width: 0;
+  position: relative;
+  transition: color 160ms ease;
+  white-space: nowrap;
+}
+
+.pf-tabs__tab:disabled {
+  cursor: not-allowed;
+  opacity: 0.45;
+}
+
+.pf-tabs__tab--sm {
+  font-size: var(--font-size-sm);
+  padding: var(--space-2) var(--space-3);
+}
+
+.pf-tabs__tab--md {
+  font-size: var(--font-size-sm);
+  padding: var(--pf-tabs-tab-padding-y-md) var(--pf-tabs-tab-padding-x-md);
+}
+
+.pf-tabs__list--full-width .pf-tabs__tab {
+  flex: 1;
+  justify-content: center;
+}
+
+.pf-tabs__tab--underline {
+  border-bottom: var(--pf-tabs-underline-width) solid transparent;
+  margin-bottom: -1px;
+}
+
+.pf-tabs__tab--underline:hover:not(:disabled),
+.pf-tabs__tab--underline:focus-visible {
+  color: var(--pf-tabs-text);
+}
+
+.pf-tabs__tab--underline.pf-tabs__tab--active {
+  border-bottom-color: var(--pf-tabs-text);
+  color: var(--pf-tabs-text);
+}
+
+.pf-tabs__tab--pills {
+  border-radius: var(--radius-sm);
+}
+
+.pf-tabs__tab--pills:hover:not(:disabled),
+.pf-tabs__tab--pills:focus-visible {
+  color: var(--pf-tabs-text);
+}
+
+.pf-tabs__tab--pills.pf-tabs__tab--active {
+  background: var(--pf-tabs-bg);
+  box-shadow: var(--pf-tabs-elevation-tab-active-shadow, var(--pf-elevation-tab-active-shadow));
+  color: var(--pf-tabs-text);
+}
+
+.pf-tabs__tab:focus-visible {
+  outline: 2px solid color-mix(in srgb, var(--pf-tabs-text) 32%, transparent);
+  outline-offset: 2px;
+}
+
+.pf-tabs__panel {
+  color: var(--pf-tabs-text);
+  line-height: 1.5;
+  min-width: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pf-tabs__tab {
+    transition: none;
+  }
+}

package/dist/{index110.js → components/Tabs/Tabs2.js}

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

package/dist/components/Tag/Tag.css

@@ -0,0 +1,64 @@
+.pf-tag {
+  align-items: center;
+  border-radius: var(--radius-full);
+  display: inline-flex;
+  gap: var(--space-1);
+  min-height: 26px;
+  padding: 0 var(--space-2);
+}
+
+.pf-tag__label {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  line-height: 1;
+}
+
+.pf-tag--neutral {
+  background: var(--pf-tag-neutral-bg);
+  color: var(--pf-tag-neutral-text);
+}
+
+.pf-tag--brand {
+  background: var(--pf-tag-brand-bg);
+  color: var(--pf-tag-brand-text);
+}
+
+.pf-tag--success {
+  background: var(--pf-tag-success-bg);
+  color: var(--pf-tag-success-text);
+}
+
+.pf-tag--warning {
+  background: var(--pf-tag-warning-bg);
+  color: var(--pf-tag-warning-text);
+}
+
+.pf-tag__dismiss {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  border-radius: 999px;
+  color: currentColor;
+  cursor: pointer;
+  display: inline-flex;
+  height: 18px;
+  justify-content: center;
+  margin-right: -2px;
+  padding: 0;
+  width: 18px;
+}
+
+.pf-tag__dismiss:hover {
+  background: var(--pf-tag-subtle-hover-overlay, var(--pf-subtle-hover-overlay));
+}
+
+.pf-tag__dismiss:focus-visible {
+  box-shadow: var(--pf-tag-focus-ring, var(--pf-focus-ring));
+  outline: none;
+}
+
+.pf-tag__dismiss svg {
+  display: block;
+  height: 12px;
+  width: 12px;
+}

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

package/dist/components/Textarea/Textarea.css

@@ -0,0 +1,52 @@
+.pf-field {
+  display: grid;
+  gap: var(--space-2);
+}
+
+.pf-field__label {
+  color: var(--pf-field-label);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+}
+
+.pf-field__description {
+  color: var(--pf-field-description);
+  font-size: var(--font-size-sm);
+  margin: 0;
+}
+
+.pf-field__error {
+  color: var(--pf-field-error);
+  font-size: var(--font-size-sm);
+  margin: 0;
+}
+
+.pf-textarea {
+  background: var(--pf-textarea-bg);
+  border: 1px solid var(--pf-textarea-border);
+  border-radius: var(--radius-md);
+  color: var(--pf-textarea-text);
+  font: inherit;
+  line-height: 1.45;
+  min-height: 96px;
+  padding: var(--space-2) var(--space-3);
+  resize: vertical;
+  width: 100%;
+}
+
+.pf-textarea:focus {
+  outline: none;
+}
+
+.pf-textarea:focus-visible {
+  border-color: var(--pf-textarea-focus-border);
+  box-shadow: var(--pf-textarea-focus-ring, var(--pf-focus-ring));
+}
+
+.pf-textarea::placeholder {
+  color: var(--pf-textarea-text-muted);
+}
+
+.pf-textarea--invalid {
+  border-color: var(--pf-textarea-invalid-border);
+}

package/dist/{index112.js → components/Textarea/Textarea2.js}

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

package/dist/components/Tooltip/Tooltip.css

@@ -0,0 +1,26 @@
+.pf-tooltip__trigger {
+  border-radius: var(--radius-sm);
+  display: inline-flex;
+}
+
+.pf-tooltip__trigger:has(:focus-visible) {
+  outline: var(--pf-focus-ring);
+  outline-offset: 2px;
+}
+
+.pf-tooltip {
+  background: var(--pf-tooltip-bg);
+  border-radius: var(--radius-sm);
+  box-shadow: var(--pf-tooltip-elevation-tooltip-shadow, var(--pf-elevation-tooltip-shadow));
+  color: var(--pf-tooltip-text);
+  font-size: var(--font-size-sm);
+  line-height: 1.35;
+  max-height: calc(100vh - 16px);
+  max-width: min(260px, calc(100vw - 16px));
+  overflow: hidden;
+  overflow-wrap: anywhere;
+  padding: var(--space-2) var(--pf-tooltip-padding-x);
+  pointer-events: none;
+  position: fixed;
+  z-index: 1100;
+}

package/dist/{index114.js → components/Tooltip/Tooltip2.js}

@@ -1,5 +1,5 @@
-import { cx } from "./index4.js";
-/* empty css         */
+import { cx } from "../../utils/cx.js";
+import './Tooltip.css';/* empty css        */
 import { forwardRef, useEffect, useId, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createPortal } from "react-dom";

package/dist/components/TreeView/TreeView.css

@@ -0,0 +1,109 @@
+.pf-tree-view {
+  background: var(--pf-treeview-bg);
+  border: 1px solid var(--pf-treeview-border);
+  border-radius: var(--radius-md);
+  padding: var(--space-2);
+}
+
+.pf-tree-view__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.pf-tree-view__item {
+  min-width: 0;
+}
+
+.pf-tree-view__row {
+  align-items: center;
+  display: grid;
+  grid-template-columns: auto 1fr;
+  min-width: 0;
+  padding-left: calc(var(--pf-tree-level, 0) * var(--space-4));
+}
+
+.pf-tree-view__toggle-wrap {
+  align-items: center;
+  display: inline-flex;
+  justify-content: center;
+  width: 24px;
+}
+
+.pf-tree-view__toggle,
+.pf-tree-view__spacer {
+  align-items: center;
+  color: var(--pf-treeview-text-muted);
+  display: inline-flex;
+  font-size: var(--font-size-xs);
+  height: 24px;
+  justify-content: center;
+  width: 24px;
+}
+
+.pf-tree-view__toggle {
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  padding: 0;
+}
+
+.pf-tree-view__toggle:hover {
+  background: var(--pf-treeview-bg-subtle);
+  color: var(--pf-treeview-text);
+}
+
+.pf-tree-view__node {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-sm);
+  color: var(--pf-treeview-text-muted);
+  cursor: pointer;
+  display: grid;
+  font: inherit;
+  gap: var(--space-2);
+  grid-template-columns: auto 1fr auto;
+  justify-items: start;
+  min-height: 34px;
+  min-width: 0;
+  padding: 0 var(--space-2);
+  text-align: left;
+  width: 100%;
+}
+
+.pf-tree-view__node:hover {
+  background: var(--pf-treeview-bg-subtle);
+  color: var(--pf-treeview-text);
+}
+
+.pf-tree-view__node:focus-visible {
+  box-shadow: var(--pf-treeview-focus-ring, var(--pf-focus-ring));
+  outline: none;
+}
+
+.pf-tree-view__row--selected .pf-tree-view__node {
+  background: var(--pf-treeview-bg-subtle);
+  color: var(--pf-treeview-text);
+  font-weight: var(--font-weight-semibold);
+}
+
+.pf-tree-view__row--disabled .pf-tree-view__node {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.pf-tree-view__icon,
+.pf-tree-view__badge {
+  align-items: center;
+  display: inline-flex;
+  justify-content: center;
+}
+
+.pf-tree-view__label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/dist/{index116.js → components/TreeView/TreeView2.js}

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

package/dist/components/UtilityButton/UtilityButton.css

@@ -0,0 +1,90 @@
+.pf-utility-button {
+  align-items: center;
+  border: 1px solid transparent;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  display: inline-flex;
+  font-family: inherit;
+  font-weight: var(--font-weight-medium);
+  gap: var(--space-1);
+  justify-content: center;
+  line-height: 1;
+  transition:
+    background-color 120ms ease,
+    border-color 120ms ease,
+    color 120ms ease,
+    box-shadow 120ms ease;
+}
+
+.pf-utility-button:focus-visible {
+  box-shadow: var(--pf-utilitybutton-focus-ring, var(--pf-focus-ring));
+  outline: none;
+}
+
+.pf-utility-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.pf-utility-button--sm {
+  font-size: var(--font-size-sm);
+  min-height: 32px;
+  padding: 0 var(--space-2);
+}
+
+.pf-utility-button--md {
+  font-size: var(--font-size-sm);
+  min-height: 36px;
+  padding: 0 var(--space-3);
+}
+
+.pf-utility-button--neutral {
+  background: var(--pf-utility-btn-neutral-bg);
+  border-color: var(--pf-utility-btn-neutral-border);
+  color: var(--pf-utility-btn-neutral-text);
+}
+
+.pf-utility-button--neutral:hover:not(:disabled) {
+  background: var(--pf-utility-btn-neutral-bg-hover);
+  border-color: var(--pf-utility-btn-neutral-border-hover);
+}
+
+.pf-utility-button--brand {
+  background: var(--pf-utility-btn-brand-bg);
+  border-color: var(--pf-utility-btn-brand-border);
+  color: var(--pf-utility-btn-brand-text);
+}
+
+.pf-utility-button--brand:hover:not(:disabled) {
+  background: var(--pf-utility-btn-brand-bg-hover);
+}
+
+.pf-utility-button--danger {
+  background: var(--pf-utility-btn-danger-bg);
+  border-color: var(--pf-utility-btn-danger-border);
+  color: var(--pf-utility-btn-danger-text);
+}
+
+.pf-utility-button--danger:hover:not(:disabled) {
+  background: var(--pf-utility-btn-danger-bg-hover);
+}
+
+.pf-utility-button__icon {
+  display: inline-flex;
+}
+
+.pf-utility-button__icon svg {
+  display: block;
+  height: 16px;
+  width: 16px;
+}
+
+.pf-utility-button__label {
+  white-space: nowrap;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pf-utility-button {
+    transition: none;
+  }
+}

package/dist/{index118.js → components/UtilityButton/UtilityButton2.js}

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

package/dist/components/VideoPlayer/VideoPlayer.css

@@ -0,0 +1,41 @@
+.pf-video-player {
+  background: var(--pf-videoplayer-bg);
+  border: 1px solid var(--pf-videoplayer-border);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+  width: 100%;
+}
+
+.pf-video-player--ratio-16-9 {
+  aspect-ratio: 16 / 9;
+}
+
+.pf-video-player--ratio-4-3 {
+  aspect-ratio: 4 / 3;
+}
+
+.pf-video-player--ratio-1-1 {
+  aspect-ratio: 1 / 1;
+}
+
+.pf-video-player--invalid {
+  border-color: var(--pf-videoplayer-invalid-border);
+}
+
+.pf-video-player__video {
+  display: block;
+  height: 100%;
+  object-fit: cover;
+  width: 100%;
+}
+
+.pf-video-player__empty {
+  align-items: center;
+  color: var(--pf-videoplayer-text-muted);
+  display: flex;
+  font-size: var(--font-size-sm);
+  height: 100%;
+  justify-content: center;
+  padding: var(--space-4);
+  text-align: center;
+}

package/dist/{index120.js → components/VideoPlayer/VideoPlayer2.js}

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

package/dist/{index33.js → hooks/useDisclosure.js}

@@ -1,4 +1,4 @@
-import { useControllableState } from "./index32.js";
+import { useControllableState } from "./useControllableState.js";
 import { useCallback } from "react";
 //#region src/hooks/useDisclosure.ts
 function useDisclosure({ open, defaultOpen = false, onOpenChange, disabled = false } = {}) {