@usefui/components 1.7.1 → 1.7.2

package/src/field/styles/index.ts

@@ -290,12 +290,8 @@ export const InnerWrapper = styled.div<any>`
     display: flex;
     flex-direction: column;
 
-    right: 0;
-    &[data-multiple="true"] {
-      right: var(--measurement-small-10) !important;
-    }
-
     top: var(--measurement-small-10);
+    right: var(--measurement-small-10);
     bottom: var(--measurement-small-10);
 
     border-left: var(--measurement-small-10) solid var(--font-color-alpha-10);
@@ -306,7 +302,6 @@ export const InnerWrapper = styled.div<any>`
     &[data-error="true"] {
       border-color: var(--alpha-red-10) !important;
     }
-
     &[data-shape="round"] {
       border-radius: 0 var(--measurement-large-90) var(--measurement-large-90) 0;
     }
@@ -332,16 +327,7 @@ export const InnerTrigger = styled.button<any>`
   padding: 0 var(--measurement-medium-40);
 
   color: var(--font-color-alpha-60);
-
-  background-color: var(--body-color);
-  background: linear-gradient(
-    180deg,
-    transparent 50%,
-    var(--font-color-alpha-10) 100%
-  );
-  background-size: 100% 200%;
-  background-position: 0% 0%;
-  backdrop-filter: blur(var(--measurement-medium-10));
+  backdrop-filter: blur(var(--measurement-small-60));
 
   cursor: pointer;
   transition: all ease-in-out 0.2s;
@@ -351,7 +337,7 @@ export const InnerTrigger = styled.button<any>`
     transition: all ease-in-out 0.2s;
   }
 
-  ::before {
+  /* ::before {
     content: "";
     inset: 0;
 
@@ -365,12 +351,12 @@ export const InnerTrigger = styled.button<any>`
 
     transition: all ease-in-out 0.2s;
     mask-image: linear-gradient(var(--font-color), transparent);
-  }
+  } */
 
   &:hover,
   &:active {
     color: var(--font-color);
-    background-position: 0% 50%;
+    /* background-position: 0% 50%; */
 
     svg {
       opacity: 0.8;
@@ -390,7 +376,7 @@ export const InnerSegment = styled.span<any>`
     text-align: center;
     outline: none;
     color: inherit;
-    transition: background-color ease-in-out 0.2s;
+    /* transition: background-color ease-in-out 0.2s; */
 
     &[data-placeholder="true"] {
       color: var(--font-color-alpha-30);
@@ -401,7 +387,7 @@ export const InnerSegment = styled.span<any>`
     &:active,
     &:focus-within,
     &:has(:active) {
-      background-color: var(--font-color-alpha-10);
+      /* background-color: var(--font-color-alpha-10); */
       color: var(--font-color);
     }
   }

package/src/index.ts

@@ -29,7 +29,6 @@ export * from "./text-area";
 export * from "./toggle";
 export * from "./toolbar";
 export * from "./tooltip";
-export * from "./tree";
 export * from "./select";
 
 export { useAccordion } from "./accordion/hooks";
@@ -43,6 +42,4 @@ export { useSwitch } from "./switch/hooks";
 export { useTabs } from "./tabs/hooks";
 export { useToolbar } from "./toolbar/hooks";
 export { useMessageBubble } from "./message-bubble/hooks";
-export { useTree } from "./tree/hooks/tree-provider";
-export { useTreeNode } from "./tree/hooks/tree-node-provider";
 export { useSelect } from "./select/hooks";

package/src/message-bubble/MessageBubble.stories.tsx

@@ -76,33 +76,48 @@ export const Conversation: Story = {
       {(
         [
           {
-            variant: "border",
+            variant: "primary",
             side: "left",
             message: "Hey, how are you doing?",
           },
           {
-            variant: "primary",
+            variant: "meta",
             side: "right",
             message: "All good! What about you?",
           },
           {
-            variant: "border",
+            variant: "primary",
             side: "left",
             message: "Pretty great, thanks for asking",
           },
           {
-            variant: "primary",
+            variant: "meta",
             side: "right",
             message:
               "Hic dolorum esse magnam sint quibusdam porro reprehenderit, enim, repellendus ipsam, iste est! Deserunt ipsam ullam dolores expedita rem, magni iste eveniet.",
           },
+          {
+            variant: "meta",
+            side: "right",
+            message: "Hic dolorum esse magnam sint quibusdam.",
+          },
           {
             variant: "hint",
             side: "right",
             message: "Hic dolorum esse magnam sint quibusdam.",
           },
           {
-            variant: "meta",
+            variant: "success",
+            side: "right",
+            message: "Hic dolorum esse magnam sint quibusdam.",
+          },
+          {
+            variant: "warning",
+            side: "right",
+            message: "Ipsa nisi fugiat doloribus.",
+          },
+          {
+            variant: "danger",
             side: "right",
             message: "Ipsa nisi fugiat doloribus.",
           },
@@ -116,7 +131,7 @@ export const Conversation: Story = {
                   sizing="small"
                   alt="foundation-logo"
                   src="https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80"
-                  shape="smooth"
+                  // shape="smooth"
                 >
                   <Avatar.Badge
                     alt="foundation-logo"
@@ -126,7 +141,12 @@ export const Conversation: Story = {
               </Field.Meta>
             )}
 
-            <MessageBubble.Content variant={variant} className="fs-medium-20">
+            <MessageBubble.Content
+              variant={variant}
+              className="fs-medium-20"
+              shape="round"
+              emphasis
+            >
               {message}
             </MessageBubble.Content>
             <MessageBubble.Meta createdAt={MOCK_DATE} />

package/src/message-bubble/index.tsx

@@ -40,6 +40,7 @@ export interface IMessageBubbleContentProperties
     IComponentSize,
     React.HTMLAttributes<HTMLDivElement> {
   variant?: TComponentVariant | TComponentVariantExtended;
+  emphasis?: boolean;
   children: string;
 }
 
@@ -99,11 +100,13 @@ MessageBubble.displayName = "MessageBubble";
  *
  * @param {IMessageBubbleContentProperties} props - The props for the MessageBubble.Content component.
  * @param {boolean} props.raw - When true, removes default styling for custom layouts.
+ * @param {boolean} props.emphasis - Emphasis change the style definition used by the component.
  * @param {ReactNode} props.children - The message text or rich content to render.
  * @returns {ReactElement} The MessageBubble.Content component.
  */
 const MessageBubbleContent = (props: IMessageBubbleContentProperties) => {
-  const { sizing, shape, variant, children, raw, ...restProps } = props;
+  const { emphasis, sizing, shape, variant, children, raw, ...restProps } =
+    props;
   const { id, states } = useMessageBubble();
 
   return (
@@ -111,8 +114,9 @@ const MessageBubbleContent = (props: IMessageBubbleContentProperties) => {
       data-raw={Boolean(raw)}
       data-side={states?.side}
       variant={variant ?? ComponentVariantEnum.Border}
-      shape={shape ?? ComponentShapeEnum.Smooth}
+      shape={shape ?? ComponentShapeEnum.Round}
       sizing={sizing ?? ComponentSizeEnum.Medium}
+      emphasis={emphasis}
       aria-label={`message-bubble-content-${id}`}
       {...restProps}
     >

package/src/resizable/Resizable.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import type { Meta, StoryObj } from "@storybook/react";
+
 import { Page, Resizable } from "..";
 
 /**
@@ -9,31 +9,28 @@ const meta = {
   title: "Components/Resizable",
   component: Resizable,
   tags: ["autodocs"],
-} satisfies Meta<typeof Resizable>;
+};
 export default meta;
 
-type Story = StoryObj<typeof meta>;
-export const Default: Story = {
-  args: {
-    defaultWidth: 30,
-    left: (
-      <div
-        className="h-100 w-100 flex align-center justify-center"
-        style={{ borderRight: "1px solid var(--font-color-alpha-10)" }}
-      >
-        <p className="fs-medium-20">One</p>
-      </div>
-    ),
-    right: (
-      <div className="h-100 w-100 flex align-center justify-center">
-        <p className="fs-medium-20">Two</p>
-      </div>
-    ),
-  },
-  render: ({ ...args }) => (
+export const Default = {
+  render: () => (
     <Page>
       <Page.Content>
-        <Resizable {...args} />
+        <Resizable
+          defaultWidth={30}
+          minWidth={0}
+          maxWidth={50}
+          left={
+            <div className="h-100 w-100 flex align-center justify-center bg-mono-darkest">
+              One
+            </div>
+          }
+          right={
+            <div className="h-100 w-100 flex align-center justify-center">
+              Two
+            </div>
+          }
+        />
       </Page.Content>
     </Page>
   ),

package/src/resizable/index.tsx

@@ -13,6 +13,8 @@ import {
 
 type ResizableEditorProperties = {
   defaultWidth?: number;
+  minWidth?: number;
+  maxWidth?: number;
   left: React.ReactNode;
   right: React.ReactNode;
 };
@@ -22,12 +24,16 @@ type ResizableEditorProperties = {
  *
  * @param {ResizableEditorProperties} props - The props for the Resizable component.
  * @param {number} props.defaultWidth - The default width of the Resizable left section.
+ * @param {number} props.minWidth - The minimum width of the Resizable sections, expressed as a percentage.
+ * @param {number} props.maxWidth - The maximum width of the Resizable sections, expressed as a percentage.
  * @param {ReactNode} props.left - The content to be rendered inside the Left panel of the Resizable component.
  * @param {ReactNode} props.right - The content to be rendered inside the Right panel of the Resizable component.
  * @returns {ReactElement} The Resizable component.
  */
 export const Resizable = ({
   defaultWidth,
+  minWidth,
+  maxWidth,
   left,
   right,
 }: ResizableEditorProperties) => {
@@ -47,16 +53,14 @@ export const Resizable = ({
       const newLeftWidth =
         ((e.clientX - containerRect.left) / containerRect.width) * 100;
 
-      // Constrain between 20% and 80%
-      const threshold = { min: 30, max: 70 };
-
+      const threshold = { min: minWidth ?? 30, max: maxWidth ?? 70 };
       const constrainedWidth = Math.min(
         Math.max(newLeftWidth, threshold.min),
-        threshold.max
+        threshold.max,
       );
       setLeftWidth(constrainedWidth);
     },
-    [isDragging]
+    [isDragging],
   );
 
   React.useEffect(() => {

package/src/resizable/styles/index.ts

@@ -5,9 +5,12 @@ import styled from "styled-components";
 export const SplitContainer = styled.div`
   position: relative;
 `;
-export const Panel = styled.div<{ width: number }>`
+export const Panel = styled.div<{
+  width: number;
+}>`
   overflow: hidden;
-  width: ${(props) => props.width}%;
+  width: ${(props) => props.width}dvw;
+  min-width: var(--measurement-large-60);
 `;
 export const Divider = styled.div<{ $dragging: boolean }>`
   width: var(--measurement-medium-10);

package/src/__tests__/Tree.test.tsx

@@ -1,275 +0,0 @@
-import React from "react";
-
-import { test, vi, afterEach, describe, expect } from "vitest";
-import {
-  screen,
-  render,
-  cleanup,
-  waitFor,
-  fireEvent,
-} from "@testing-library/react";
-import { axe, toHaveNoViolations } from "jest-axe";
-
-import { Tree } from "../../src/tree";
-
-afterEach(async () => {
-  vi.clearAllMocks();
-  vi.resetModules();
-  cleanup();
-});
-
-expect.extend(toHaveNoViolations);
-
-describe("Tree", () => {
-  test("Renders without accessibility violation", async () => {
-    const { container } = render(
-      <Tree.Root>
-        <Tree>
-          <Tree.Node nodeId="node-1">
-            <Tree.Trigger nodeId="node-1">Node 1</Tree.Trigger>
-            <Tree.Content nodeId="node-1" defaultOpen>
-              <Tree.Node level={1} nodeId="node-1-child">
-                <Tree.Trigger nodeId="node-1-child">Node 1 Child</Tree.Trigger>
-              </Tree.Node>
-            </Tree.Content>
-          </Tree.Node>
-        </Tree>
-      </Tree.Root>,
-    );
-
-    const ComponentContainer = await axe(container);
-    expect(ComponentContainer).toHaveNoViolations();
-  });
-
-  //   test("Renders with accessibility definition", async () => {
-  //     render(
-  //       <Tree.Root>
-  //         <Tree>
-  //           <Tree.Node nodeId="node-1">
-  //             <Tree.Trigger nodeId="node-1">Node 1</Tree.Trigger>
-  //             <Tree.Content nodeId="node-1">
-  //               <Tree.Node level={1} nodeId="node-1-child">
-  //                 <Tree.Trigger nodeId="node-1-child">Node 1 Child</Tree.Trigger>
-  //               </Tree.Node>
-  //             </Tree.Content>
-  //           </Tree.Node>
-  //         </Tree>
-  //       </Tree.Root>,
-  //     );
-
-  //     const treeView = screen.getByRole("tree");
-  //     expect(treeView).toBeDefined();
-
-  //     const treeItems = screen.getAllByRole("treeitem");
-  //     expect(treeItems.length).toBe(1);
-
-  //     expect(() => screen.getByRole("group")).toThrow();
-
-  //     const trigger = screen.getByLabelText("node-1-action");
-  //     expect(trigger).toBeDefined();
-  //     expect(trigger.getAttribute("aria-expanded")).toBe("false");
-  //     expect(trigger.getAttribute("aria-selected")).toBe("false");
-  //     expect(trigger.getAttribute("data-state")).toBe("collapsed");
-
-  //     fireEvent.click(trigger);
-  //     await waitFor(() => {
-  //       const group = screen.getByRole("group");
-  //       expect(group).toBeDefined();
-  //       expect(group.getAttribute("aria-labelledby")).toBeDefined();
-  //       expect(group.getAttribute("id")).toBeDefined();
-  //       expect(group.getAttribute("data-nodeid")).toBe("node-1");
-
-  //       expect(trigger.getAttribute("aria-expanded")).toBe("true");
-  //       expect(trigger.getAttribute("aria-selected")).toBe("true");
-  //       expect(trigger.getAttribute("data-state")).toBe("expanded");
-
-  //       const childItems = screen.getAllByRole("treeitem");
-  //       expect(childItems.length).toBe(2);
-  //     });
-  //   });
-
-  test("Renders with correct aria-level on nested nodes", async () => {
-    render(
-      <Tree.Root>
-        <Tree>
-          <Tree.Node nodeId="root">
-            <Tree.Trigger nodeId="root">Root</Tree.Trigger>
-            <Tree.Content nodeId="root" defaultOpen>
-              <Tree.Node level={1} nodeId="child">
-                <Tree.Trigger nodeId="child">Child</Tree.Trigger>
-                <Tree.Content nodeId="child" defaultOpen>
-                  <Tree.Node level={2} nodeId="grandchild">
-                    <Tree.Trigger nodeId="grandchild">Grandchild</Tree.Trigger>
-                  </Tree.Node>
-                </Tree.Content>
-              </Tree.Node>
-            </Tree.Content>
-          </Tree.Node>
-        </Tree>
-      </Tree.Root>,
-    );
-
-    const treeItems = screen.getAllByRole("treeitem");
-    expect((treeItems[0] as HTMLElement).getAttribute("aria-level")).toBe("1");
-    expect((treeItems[1] as HTMLElement).getAttribute("aria-level")).toBe("2");
-    expect((treeItems[2] as HTMLElement).getAttribute("aria-level")).toBe("3");
-  });
-
-  //   test("Renders with defaultOpen and expands content on mount", async () => {
-  //     render(
-  //       <Tree.Root>
-  //         <Tree>
-  //           <Tree.Node nodeId="node-1">
-  //             <Tree.Trigger nodeId="node-1">Node 1</Tree.Trigger>
-  //             <Tree.Content nodeId="node-1" defaultOpen>
-  //               <Tree.Node level={1} nodeId="node-1-child">
-  //                 <Tree.Trigger nodeId="node-1-child">Node 1 Child</Tree.Trigger>
-  //               </Tree.Node>
-  //             </Tree.Content>
-  //           </Tree.Node>
-  //         </Tree>
-  //       </Tree.Root>,
-  //     );
-
-  //     await waitFor(() => {
-  //       expect(screen.getByRole("group")).toBeDefined();
-  //       expect(screen.getByText("Node 1 Child")).toBeDefined();
-
-  //       const trigger = screen.getByLabelText("node-1-action");
-  //       expect(trigger.getAttribute("aria-expanded")).toBe("true");
-  //       expect(trigger.getAttribute("data-state")).toBe("expanded");
-  //     });
-  //   });
-
-  test("Fires the defined callback and toggles content when trigger is clicked", async () => {
-    const onClickCallback = vi.fn();
-
-    render(
-      <Tree.Root>
-        <Tree>
-          <Tree.Node nodeId="node-1">
-            <Tree.Trigger
-              nodeId="node-1"
-              name="trigger-1"
-              onClick={onClickCallback}
-            >
-              Node 1
-            </Tree.Trigger>
-            <Tree.Content nodeId="node-1" defaultOpen>
-              <Tree.Node level={1} nodeId="node-1-child">
-                <Tree.Trigger nodeId="node-1-child">Node 1 Child</Tree.Trigger>
-              </Tree.Node>
-            </Tree.Content>
-          </Tree.Node>
-          <Tree.Node nodeId="node-2">
-            <Tree.Trigger nodeId="node-2" name="trigger-2">
-              Node 2
-            </Tree.Trigger>
-            <Tree.Content nodeId="node-2">
-              <Tree.Node level={1} nodeId="node-2-child">
-                <Tree.Trigger nodeId="node-2-child">Node 2 Child</Tree.Trigger>
-              </Tree.Node>
-            </Tree.Content>
-          </Tree.Node>
-        </Tree>
-      </Tree.Root>,
-    );
-
-    expect(screen.getByText("Node 1 Child")).toBeDefined();
-    expect(() => screen.getByText("Node 2 Child")).toThrow();
-
-    fireEvent.click(screen.getByLabelText("trigger-2-action"));
-    await waitFor(() => {
-      expect(screen.getByText("Node 2 Child")).toBeDefined();
-    });
-
-    fireEvent.click(screen.getByLabelText("trigger-1-action"));
-    await waitFor(() => {
-      expect(() => screen.getByText("Node 1 Child")).toThrow();
-      expect(onClickCallback).toHaveBeenCalledTimes(1);
-    });
-
-    fireEvent.click(screen.getByLabelText("trigger-1-action"));
-    await waitFor(() => {
-      expect(screen.getByText("Node 1 Child")).toBeDefined();
-      expect(onClickCallback).toHaveBeenCalledTimes(2);
-    });
-
-    fireEvent.click(screen.getByLabelText("trigger-1-action"));
-    await waitFor(() => {
-      expect(() => screen.getByText("Node 1 Child")).toThrow();
-    });
-  });
-
-  test("Fires onSelectionChange callback with selected node ids", async () => {
-    const onSelectionChange = vi.fn();
-
-    render(
-      <Tree.Root onSelectionChange={onSelectionChange}>
-        <Tree>
-          <Tree.Node nodeId="node-1">
-            <Tree.Trigger nodeId="node-1" name="trigger-1">
-              Node 1
-            </Tree.Trigger>
-          </Tree.Node>
-          <Tree.Node nodeId="node-2">
-            <Tree.Trigger nodeId="node-2" name="trigger-2">
-              Node 2
-            </Tree.Trigger>
-          </Tree.Node>
-        </Tree>
-      </Tree.Root>,
-    );
-
-    fireEvent.click(screen.getByLabelText("trigger-1-action"));
-    await waitFor(() => {
-      expect(onSelectionChange).toHaveBeenCalledTimes(1);
-      expect(onSelectionChange).toHaveBeenCalledWith(["node-1"]);
-    });
-
-    fireEvent.click(screen.getByLabelText("trigger-2-action"));
-    await waitFor(() => {
-      expect(onSelectionChange).toHaveBeenCalledTimes(2);
-      expect(onSelectionChange).toHaveBeenCalledWith(["node-1", "node-2"]);
-    });
-
-    fireEvent.click(screen.getByLabelText("trigger-1-action"));
-    await waitFor(() => {
-      expect(onSelectionChange).toHaveBeenCalledTimes(3);
-      expect(onSelectionChange).toHaveBeenCalledWith(["node-2"]);
-    });
-  });
-
-  test("Renders with defaultExpandedIds and expands matching nodes on mount", async () => {
-    render(
-      <Tree.Root defaultExpandedIds={["node-1", "node-2"]}>
-        <Tree>
-          <Tree.Node nodeId="node-1">
-            <Tree.Trigger nodeId="node-1">Node 1</Tree.Trigger>
-            <Tree.Content nodeId="node-1">
-              <Tree.Node level={1} nodeId="node-1-child">
-                <Tree.Trigger nodeId="node-1-child">Node 1 Child</Tree.Trigger>
-              </Tree.Node>
-            </Tree.Content>
-          </Tree.Node>
-          <Tree.Node nodeId="node-2">
-            <Tree.Trigger nodeId="node-2">Node 2</Tree.Trigger>
-            <Tree.Content nodeId="node-2">
-              <Tree.Node level={1} nodeId="node-2-child">
-                <Tree.Trigger nodeId="node-2-child">Node 2 Child</Tree.Trigger>
-              </Tree.Node>
-            </Tree.Content>
-          </Tree.Node>
-        </Tree>
-      </Tree.Root>,
-    );
-
-    await waitFor(() => {
-      expect(screen.getByText("Node 1 Child")).toBeDefined();
-      expect(screen.getByText("Node 2 Child")).toBeDefined();
-
-      const groups = screen.getAllByRole("group");
-      expect(groups.length).toBe(2);
-    });
-  });
-});