@hopper-ui/components 1.0.4 → 1.0.6

package/dist/ListBox/src/ListBoxItem.d.ts

@@ -0,0 +1,39 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { StyledComponentProps, ResponsiveProp } from '@hopper-ui/styled-system';
+import { ForwardedRef } from 'react';
+import { ListBoxItemProps as ListBoxItemProps$1 } from 'react-aria-components';
+
+declare const GlobalListBoxItemCssSelector = "hop-ListBoxItem";
+type ListBoxItemSize = "xs" | "sm" | "md" | "lg";
+interface ListBoxItemProps<T> extends StyledComponentProps<Omit<ListBoxItemProps$1<T>, "orientation | layout">> {
+    /**
+     * Whether or not the ListBoxItem is in an invalid state.
+     */
+    isInvalid?: boolean;
+    /**
+     * Whether the item is loading.
+     * */
+    isLoading?: boolean;
+    /**
+     * The selection indicator to use. Only available if the selection mode is not "none".
+     * When set to "input", the selection indicator will be an either a radio or checkbox based on the selection mode.
+     * @default "check"
+     */
+    selectionIndicator?: "check" | "input";
+    /**
+     * A ListBoxItem can vary in size.
+     * @default "sm"
+     */
+    size?: ResponsiveProp<ListBoxItemSize>;
+}
+declare function ListBoxItem<T extends object>(props: ListBoxItemProps<T>, ref: ForwardedRef<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+/**
+ * A ListBoxItem represents an item within a ListBox component.
+ *
+ * [View Documentation](TODO)
+ */
+declare const _ListBoxItem: <T>(props: ListBoxItemProps<T> & {
+    ref?: ForwardedRef<HTMLDivElement>;
+}) => ReturnType<typeof ListBoxItem>;
+
+export { GlobalListBoxItemCssSelector, _ListBoxItem as ListBoxItem, type ListBoxItemProps, type ListBoxItemSize };

package/dist/ListBox/src/ListBoxItem.js

@@ -0,0 +1,27 @@
+export { GlobalListBoxItemCssSelector, _ListBoxItem as ListBoxItem } from '../../chunk-E4ALW4MZ.js';
+import '../../chunk-JRDN364E.js';
+import '../../chunk-DGLAGYBD.js';
+import '../../chunk-5MBJWRZD.js';
+import '../../chunk-NKHMUPAP.js';
+import '../../chunk-A7TZHALP.js';
+import '../../chunk-2XUHTPCX.js';
+import '../../chunk-FU5CCPLP.js';
+import '../../chunk-53FHDOG7.js';
+import '../../chunk-2EAZPH3M.js';
+import '../../chunk-ZOTVZM6F.js';
+import '../../chunk-QCA3ZR56.js';
+import '../../chunk-Y2POLIXK.js';
+import '../../chunk-4TXFHYHL.js';
+import '../../chunk-OKZYR4RF.js';
+import '../../chunk-65JPI4FL.js';
+import '../../chunk-FAE27DLF.js';
+import '../../chunk-HZKFQ33E.js';
+import '../../chunk-CQDLZ42T.js';
+import '../../chunk-ZWU6DRRZ.js';
+import '../../chunk-DHVVYSLB.js';
+import '../../chunk-RG4JKE4N.js';
+import '../../chunk-X6SER3TZ.js';
+import '../../chunk-HXI3MEEK.js';
+import '../../chunk-M36KANKC.js';
+import '../../chunk-KVDXQMWI.js';
+import '../../chunk-2P3A4VVY.js';

package/dist/ListBox/src/ListBoxItemContext.d.ts

@@ -0,0 +1,9 @@
+import * as react from 'react';
+import { ContextValue } from 'react-aria-components';
+import { ListBoxItemProps } from './ListBoxItem.js';
+import 'react/jsx-runtime';
+import '@hopper-ui/styled-system';
+
+declare const ListBoxItemContext: react.Context<ContextValue<ListBoxItemProps<object>, HTMLDivElement>>;
+
+export { ListBoxItemContext };

package/dist/ListBox/src/ListBoxItemContext.js

@@ -0,0 +1,2 @@
+export { ListBoxItemContext } from '../../chunk-Y2POLIXK.js';
+import '../../chunk-2P3A4VVY.js';

package/dist/ListBox/src/ListBoxItemSkeleton.css

@@ -0,0 +1,56 @@
+/* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/ListBox/src/ListBoxItemSkeleton.module.css/#css-module-data */
+.ListBoxItemSkeleton-module__hop-ListBoxItemSkeleton___vxdl4 {
+  --hop-ListBoxItemSkeleton-background-color: var(--hop-rock-50);
+  --hop-ListBoxItemSkeleton-background-color-dark: var(--hop-rock-75);
+  --hop-ListBoxItemSkeleton-border-radius: var(--hop-shape-rounded-md);
+  --hop-ListBoxItemSkeleton-animation-duration: 1.4s;
+  --hop-ListBoxItemSkeleton-animation-reduced-motion-duration: 3.4s;
+  --hop-ListBoxItemSkeleton-linear-gradient:
+    linear-gradient(
+      
+      90deg,
+      var(--hop-ListBoxItemSkeleton-background-color) 25%,
+      var(--hop-ListBoxItemSkeleton-background-color-dark) 37%,
+      var(--hop-ListBoxItemSkeleton-background-color-dark) 63%,
+      var(--hop-ListBoxItemSkeleton-background-color) 100% );
+  --hop-ListBoxItemSkeleton-xs-height: 1.25rem;
+  --hop-ListBoxItemSkeleton-sm-height: 1.25rem;
+  --hop-ListBoxItemSkeleton-md-height: 1.25rem;
+  --hop-ListBoxItemSkeleton-lg-height: 1.5rem;
+  --animation-duration: var(--hop-ListBoxItemSkeleton-animation-duration);
+  grid-area: label;
+  box-sizing: border-box;
+  block-size: var(--height);
+  background-color: var(--hop-ListBoxItemSkeleton-background-color);
+  background-image: var(--hop-ListBoxItemSkeleton-linear-gradient);
+  background-size: 400% 100%;
+  border-radius: var(--hop-ListBoxItemSkeleton-border-radius);
+  animation-name: ListBoxItemSkeleton-module__placeholder-shimmer___zxMXK;
+  animation-duration: var(--animation-duration);
+  animation-timing-function: ease-in-out;
+  animation-fill-mode: forwards;
+  animation-iteration-count: infinite;
+  @media (prefers-reduced-motion: reduce) {
+    --animation-duration: var(--hop-ListBoxItemSkeleton-animation-reduced-motion-duration);
+  }
+}
+.ListBoxItemSkeleton-module__hop-ListBoxItemSkeleton--xs___lRdbr {
+  --height: var(--hop-ListBoxItemSkeleton-xs-height);
+}
+.ListBoxItemSkeleton-module__hop-ListBoxItemSkeleton--sm___yWx0f {
+  --height: var(--hop-ListBoxItemSkeleton-sm-height);
+}
+.ListBoxItemSkeleton-module__hop-ListBoxItemSkeleton--md___S7Deh {
+  --height: var(--hop-ListBoxItemSkeleton-md-height);
+}
+.ListBoxItemSkeleton-module__hop-ListBoxItemSkeleton--lg___Rrcau {
+  --height: var(--hop-ListBoxItemSkeleton-lg-height);
+}
+@keyframes ListBoxItemSkeleton-module__placeholder-shimmer___zxMXK {
+  0% {
+    background-position: 125% 50%;
+  }
+  100% {
+    background-position: -25% 50%;
+  }
+}

package/dist/ListBox/src/ListBoxItemSkeleton.d.ts

@@ -0,0 +1,23 @@
+import * as react from 'react';
+import { StyledSystemProps, ResponsiveProp } from '@hopper-ui/styled-system';
+import { BaseComponentProps } from '../../utils/src/types.js';
+import '@react-types/shared';
+import 'react-aria-components';
+
+declare const GlobalListBoxItemSkeletonCssSelector = "hop-ListBoxItemSkeleton";
+type ListBoxItemSize = "xs" | "sm" | "md" | "lg";
+interface ListBoxItemSkeletonProps extends StyledSystemProps, BaseComponentProps {
+    /**
+     * A ListBoxItem can vary in size.
+     * @default "sm"
+     */
+    size?: ResponsiveProp<ListBoxItemSize>;
+}
+/**
+ * A ListBoxItem represents an item within a ListBox component.
+ *
+ * [View Documentation](TODO)
+ */
+declare const _ListBoxItemSkeleton: react.ForwardRefExoticComponent<ListBoxItemSkeletonProps & react.RefAttributes<HTMLDivElement>>;
+
+export { GlobalListBoxItemSkeletonCssSelector, type ListBoxItemSize, _ListBoxItemSkeleton as ListBoxItemSkeleton, type ListBoxItemSkeletonProps };

package/dist/ListBox/src/ListBoxItemSkeleton.js

@@ -0,0 +1,4 @@
+export { GlobalListBoxItemSkeletonCssSelector, _ListBoxItemSkeleton as ListBoxItemSkeleton } from '../../chunk-4TXFHYHL.js';
+import '../../chunk-OKZYR4RF.js';
+import '../../chunk-KVDXQMWI.js';
+import '../../chunk-2P3A4VVY.js';

package/dist/ListBox/src/ListBoxItemSkeletonContext.d.ts

@@ -0,0 +1,10 @@
+import * as react from 'react';
+import { ContextValue } from 'react-aria-components';
+import { ListBoxItemSkeletonProps } from './ListBoxItemSkeleton.js';
+import '@hopper-ui/styled-system';
+import '../../utils/src/types.js';
+import '@react-types/shared';
+
+declare const ListBoxItemSkeletonContext: react.Context<ContextValue<ListBoxItemSkeletonProps, HTMLDivElement>>;
+
+export { ListBoxItemSkeletonContext };

package/dist/ListBox/src/ListBoxItemSkeletonContext.js

@@ -0,0 +1,2 @@
+export { ListBoxItemSkeletonContext } from '../../chunk-OKZYR4RF.js';
+import '../../chunk-2P3A4VVY.js';