@noxlovette/material 0.3.3 → 0.4.0

package/dist/components/containers/pane/theme.d.ts

@@ -0,0 +1,571 @@
+import { type VariantProps } from 'tailwind-variants';
+export type PaneVariants = VariantProps<typeof pane>;
+export type PaneGridVariants = VariantProps<typeof paneGrid>;
+export type PaneHandleVariants = VariantProps<typeof paneHandle>;
+export type DraggablePaneVariants = VariantProps<typeof draggablePane>;
+export type Breakpoint = 'small' | 'medium' | 'large' | 'extraLarge';
+export type SpaceSize = 'none' | 'sm' | 'md' | 'lg' | 'xl';
+export type Direction = 'row' | 'column';
+/** A value that can either apply uniformly or be overridden per M3-ish viewport tier. */
+export type Responsive<T> = T | Partial<Record<Breakpoint, T>>;
+export declare const responsiveTables: {
+    gap: Record<Breakpoint, Record<SpaceSize, string>>;
+    padding: Record<Breakpoint, Record<SpaceSize, string>>;
+    margin: Record<Breakpoint, Record<SpaceSize, string>>;
+    direction: Record<Breakpoint, Record<Direction, string>>;
+    visibleFrom: Record<Breakpoint, string>;
+    hiddenFrom: Record<Breakpoint, string>;
+};
+/** Resolves a `Responsive<T>` prop into a space-separated class string using the given lookup table. */
+export declare function resolveResponsive<T extends string>(value: Responsive<T> | undefined, table: Record<Breakpoint, Record<T, string>>): string;
+export declare const pane: import("tailwind-variants").TVReturnType<{
+    background: {
+        true: {
+            base: string;
+        };
+        false: "";
+    };
+    full: {
+        true: {
+            base: string;
+        };
+        false: "";
+    };
+    rounded: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+    padding: {
+        none: {
+            content: string;
+        };
+        sm: {
+            content: string;
+        };
+        md: {
+            content: string;
+        };
+        lg: {
+            content: string;
+        };
+    };
+    gap: {
+        none: {
+            content: string;
+        };
+        sm: {
+            content: string;
+        };
+        md: {
+            content: string;
+        };
+        lg: {
+            content: string;
+        };
+        xl: {
+            content: string;
+        };
+    };
+    flexible: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+    sticky: {
+        true: {
+            base: string;
+        };
+        false: "";
+    };
+}, {
+    base: string;
+    content: string;
+}, undefined, {
+    background: {
+        true: {
+            base: string;
+        };
+        false: "";
+    };
+    full: {
+        true: {
+            base: string;
+        };
+        false: "";
+    };
+    rounded: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+    padding: {
+        none: {
+            content: string;
+        };
+        sm: {
+            content: string;
+        };
+        md: {
+            content: string;
+        };
+        lg: {
+            content: string;
+        };
+    };
+    gap: {
+        none: {
+            content: string;
+        };
+        sm: {
+            content: string;
+        };
+        md: {
+            content: string;
+        };
+        lg: {
+            content: string;
+        };
+        xl: {
+            content: string;
+        };
+    };
+    flexible: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+    sticky: {
+        true: {
+            base: string;
+        };
+        false: "";
+    };
+}, {
+    base: string;
+    content: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    background: {
+        true: {
+            base: string;
+        };
+        false: "";
+    };
+    full: {
+        true: {
+            base: string;
+        };
+        false: "";
+    };
+    rounded: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+    padding: {
+        none: {
+            content: string;
+        };
+        sm: {
+            content: string;
+        };
+        md: {
+            content: string;
+        };
+        lg: {
+            content: string;
+        };
+    };
+    gap: {
+        none: {
+            content: string;
+        };
+        sm: {
+            content: string;
+        };
+        md: {
+            content: string;
+        };
+        lg: {
+            content: string;
+        };
+        xl: {
+            content: string;
+        };
+    };
+    flexible: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+    sticky: {
+        true: {
+            base: string;
+        };
+        false: "";
+    };
+}, {
+    base: string;
+    content: string;
+}>>;
+/**
+ * A standalone drag divider, placed directly inside a `PaneGrid` between two
+ * `Pane`s. Sits in the grid's own gap as a real flex sibling — not clipped by
+ * a Pane's `overflow-clip` the way a self-owned handle was — and drags the
+ * width of whichever `Pane` shares its `persistKey` via the shared
+ * `resizeStore`.
+ */
+export declare const paneHandle: import("tailwind-variants").TVReturnType<{
+    dragging: {
+        true: {
+            base: string;
+        };
+        false: "";
+    };
+    snapped: {
+        true: {
+            grip: string;
+        };
+        false: {
+            grip: string;
+        };
+    };
+}, {
+    base: string;
+    grip: string;
+}, undefined, {
+    dragging: {
+        true: {
+            base: string;
+        };
+        false: "";
+    };
+    snapped: {
+        true: {
+            grip: string;
+        };
+        false: {
+            grip: string;
+        };
+    };
+}, {
+    base: string;
+    grip: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    dragging: {
+        true: {
+            base: string;
+        };
+        false: "";
+    };
+    snapped: {
+        true: {
+            grip: string;
+        };
+        false: {
+            grip: string;
+        };
+    };
+}, {
+    base: string;
+    grip: string;
+}>>;
+/**
+ * A floating panel positioned by `x`/`y` instead of participating in flex
+ * layout — dragged into place by its header rather than resized in place
+ * like `PaneHandle`/`Pane`.
+ */
+/** The eight `PaneHandle`-style directions a `DraggablePane` can be resized from. */
+export type ResizeEdge = 'n' | 's' | 'e' | 'w' | 'ne' | 'nw' | 'se' | 'sw';
+/** Corner a collapsed `DraggablePane` docks its mini pill to. */
+export type MinimizedCorner = 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
+export declare const draggablePane: import("tailwind-variants").TVReturnType<{
+    dragging: {
+        true: {
+            base: string;
+            headerBar: string;
+        };
+        false: {
+            headerBar: string;
+        };
+    };
+    disableDrag: {
+        true: {
+            headerBar: string;
+        };
+        false: "";
+    };
+    edge: {
+        n: {
+            resizeHandle: string;
+        };
+        s: {
+            resizeHandle: string;
+        };
+        e: {
+            resizeHandle: string;
+        };
+        w: {
+            resizeHandle: string;
+        };
+        ne: {
+            resizeHandle: string;
+        };
+        nw: {
+            resizeHandle: string;
+        };
+        se: {
+            resizeHandle: string;
+        };
+        sw: {
+            resizeHandle: string;
+        };
+    };
+    corner: {
+        'bottom-left': {
+            miniBase: string;
+        };
+        'bottom-right': {
+            miniBase: string;
+        };
+        'top-left': {
+            miniBase: string;
+        };
+        'top-right': {
+            miniBase: string;
+        };
+    };
+}, {
+    base: string;
+    headerBar: string;
+    grip: string;
+    headline: string;
+    actions: string;
+    content: string;
+    resizeHandle: string;
+    miniBase: string;
+    miniIcon: string;
+    miniLabel: string;
+}, undefined, {
+    dragging: {
+        true: {
+            base: string;
+            headerBar: string;
+        };
+        false: {
+            headerBar: string;
+        };
+    };
+    disableDrag: {
+        true: {
+            headerBar: string;
+        };
+        false: "";
+    };
+    edge: {
+        n: {
+            resizeHandle: string;
+        };
+        s: {
+            resizeHandle: string;
+        };
+        e: {
+            resizeHandle: string;
+        };
+        w: {
+            resizeHandle: string;
+        };
+        ne: {
+            resizeHandle: string;
+        };
+        nw: {
+            resizeHandle: string;
+        };
+        se: {
+            resizeHandle: string;
+        };
+        sw: {
+            resizeHandle: string;
+        };
+    };
+    corner: {
+        'bottom-left': {
+            miniBase: string;
+        };
+        'bottom-right': {
+            miniBase: string;
+        };
+        'top-left': {
+            miniBase: string;
+        };
+        'top-right': {
+            miniBase: string;
+        };
+    };
+}, {
+    base: string;
+    headerBar: string;
+    grip: string;
+    headline: string;
+    actions: string;
+    content: string;
+    resizeHandle: string;
+    miniBase: string;
+    miniIcon: string;
+    miniLabel: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    dragging: {
+        true: {
+            base: string;
+            headerBar: string;
+        };
+        false: {
+            headerBar: string;
+        };
+    };
+    disableDrag: {
+        true: {
+            headerBar: string;
+        };
+        false: "";
+    };
+    edge: {
+        n: {
+            resizeHandle: string;
+        };
+        s: {
+            resizeHandle: string;
+        };
+        e: {
+            resizeHandle: string;
+        };
+        w: {
+            resizeHandle: string;
+        };
+        ne: {
+            resizeHandle: string;
+        };
+        nw: {
+            resizeHandle: string;
+        };
+        se: {
+            resizeHandle: string;
+        };
+        sw: {
+            resizeHandle: string;
+        };
+    };
+    corner: {
+        'bottom-left': {
+            miniBase: string;
+        };
+        'bottom-right': {
+            miniBase: string;
+        };
+        'top-left': {
+            miniBase: string;
+        };
+        'top-right': {
+            miniBase: string;
+        };
+    };
+}, {
+    base: string;
+    headerBar: string;
+    grip: string;
+    headline: string;
+    actions: string;
+    content: string;
+    resizeHandle: string;
+    miniBase: string;
+    miniIcon: string;
+    miniLabel: string;
+}>>;
+export declare const paneGrid: import("tailwind-variants").TVReturnType<{
+    full: {
+        true: {
+            base: string;
+        };
+        false: "";
+    };
+    rounded: {
+        true: {
+            base: string;
+        };
+        false: "";
+    };
+    wrap: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+}, undefined, {
+    full: {
+        true: {
+            base: string;
+        };
+        false: "";
+    };
+    rounded: {
+        true: {
+            base: string;
+        };
+        false: "";
+    };
+    wrap: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    full: {
+        true: {
+            base: string;
+        };
+        false: "";
+    };
+    rounded: {
+        true: {
+            base: string;
+        };
+        false: "";
+    };
+    wrap: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+}>>;