@usefui/components 1.6.0 → 1.7.0

package/src/checkbox/styles/index.ts

@@ -8,74 +8,294 @@ const CheckboxDefaultStyles = css`
   backdrop-filter: blur(var(--measurement-small-10));
   transition: all ease-in-out 0.2s;
 `;
+const CheckboxBeforeDefaultStyles = css`
+  content: "";
+  inset: 0;
+
+  border-radius: inherit;
+  border: var(--measurement-small-10) solid transparent;
+  position: absolute;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+
+  mask-composite: intersect;
+
+  transition: all ease-in-out 0.2s;
+`;
 const CheckboxVariantsStyles = css`
-  &[data-variant="primary"] {
-    background-color: var(--font-color-alpha-10);
-    border: var(--measurement-small-10) solid transparent;
+  &[data-variant="accent"] {
+    background-color: var(--alpha-accent-30);
 
-    &:hover,
-    &:focus {
-      border-color: var(--font-color-alpha-10);
+    ::before {
+      ${CheckboxBeforeDefaultStyles}
+      border-color: var(--alpha-accent-30);
+      mask-image: linear-gradient(var(--alpha-accent-30), transparent);
     }
 
+    &:hover,
+    &:focus,
     &:active,
     &[data-state="checked"] {
-      background-color: var(--font-color);
+      color: var(--font-color);
+
+      ::before {
+        border-color: var(--color-accent);
+      }
+
+      svg {
+        stroke: var(--color-accent);
+      }
+    }
+  }
+  &[data-variant="primary"] {
+    background-color: var(--font-color);
+    background: linear-gradient(
+      180deg,
+      var(--font-color) 50%,
+      var(--font-color-alpha-60) 100%
+    );
+    background-size: 100% 200%;
+    background-position: 0% 50%;
+
+    ::before {
+      ${CheckboxBeforeDefaultStyles}
+      border-color: var(--body-color-alpha-20);
+      mask-image: linear-gradient(var(--body-color-alpha-90), transparent);
     }
 
+    &:hover,
+    &:focus,
+    &:active,
     &[data-state="checked"] {
+      background-position: 0% 25%;
+
+      ::before {
+        border-color: var(--body-color-alpha-10);
+      }
+
       svg {
         stroke: var(--body-color);
       }
     }
   }
+  &[data-variant="secondary"] {
+    background-color: var(--contrast-color);
+
+    ::before {
+      ${CheckboxBeforeDefaultStyles}
+      border-color: var(--font-color-alpha-30);
+      mask-image: linear-gradient(var(--font-color-alpha-30), transparent);
+    }
+
+    &:hover,
+    &:focus,
+    &:active,
+    &[data-state="checked"] {
+      color: var(--font-color);
+
+      ::before {
+        border-color: var(--font-color-alpha-60);
+      }
+
+      svg {
+        stroke: var(--font-color);
+      }
+    }
+  }
+  &[data-variant="tertiary"] {
+    border-color: var(--font-color-alpha-10);
 
-  &[data-variant="border"] {
     background-color: var(--body-color);
-    border: var(--measurement-small-10) solid var(--font-color-alpha-10);
+    background: linear-gradient(
+      180deg,
+      transparent 0%,
+      var(--contrast-color) 100%
+    );
+    background-size: 100% 200%;
+    background-position: 0% 50%;
+
+    ::before {
+      ${CheckboxBeforeDefaultStyles}
+      border-color: var(--font-color-alpha-10);
+      mask-image: linear-gradient(var(--font-color-alpha-30), transparent);
+    }
 
     &:hover,
     &:focus,
     &:active,
     &[data-state="checked"] {
       background-color: var(--font-color-alpha-10);
+      background-position: 0% 75%;
       border-color: transparent;
+
+      svg {
+        stroke: var(--font-color);
+      }
+    }
+  }
+  &[data-variant="success"] {
+    background-color: var(--alpha-green-30);
+
+    background: linear-gradient(
+      180deg,
+      transparent 0%,
+      var(--alpha-green-30) 100%
+    );
+    background-size: 100% 200%;
+    background-position: 0% 50%;
+
+    ::before {
+      ${CheckboxBeforeDefaultStyles}
+      border-color: var(--alpha-green-30);
+      mask-image: linear-gradient(var(--alpha-green-30), transparent);
     }
 
+    &:hover,
+    &:focus,
+    &:active,
     &[data-state="checked"] {
+      color: var(--font-color);
+
+      ::before {
+        border-color: var(--color-green);
+        background-color: var(--alpha-green-60);
+      }
+
       svg {
-        stroke: var(--font-color);
+        stroke: var(--color-green);
       }
     }
   }
-  &[data-variant="mono"] {
-    background-color: var(--font-color-alpha-10);
-    border: var(--measurement-small-10) solid transparent;
+  &[data-variant="meta"] {
+    background-color: var(--alpha-blue-30);
+
+    background: linear-gradient(
+      180deg,
+      transparent 0%,
+      var(--alpha-blue-30) 100%
+    );
+    background-size: 100% 200%;
+    background-position: 0% 50%;
+
+    ::before {
+      ${CheckboxBeforeDefaultStyles}
+      border-color: var(--alpha-blue-30);
+      mask-image: linear-gradient(var(--alpha-blue-30), transparent);
+    }
 
     &:hover,
     &:focus,
     &:active,
     &[data-state="checked"] {
-      border-color: var(--font-color-alpha-10);
+      color: var(--font-color);
+
+      ::before {
+        border-color: var(--color-blue);
+        background-color: var(--alpha-blue-60);
+      }
+
+      svg {
+        stroke: var(--color-blue);
+      }
+    }
+  }
+  &[data-variant="hint"] {
+    background-color: var(--alpha-purple-30);
+
+    background: linear-gradient(
+      180deg,
+      transparent 0%,
+      var(--alpha-purple-30) 100%
+    );
+    background-size: 100% 200%;
+    background-position: 0% 50%;
+
+    ::before {
+      ${CheckboxBeforeDefaultStyles}
+      border-color: var(--alpha-purple-30);
+      mask-image: linear-gradient(var(--alpha-purple-30), transparent);
+    }
+
+    &:hover,
+    &:focus,
+    &:active,
+    &[data-state="checked"] {
+      color: var(--font-color);
+
+      ::before {
+        border-color: var(--color-purple);
+        background-color: var(--alpha-purple-60);
+      }
+
+      svg {
+        stroke: var(--color-purple);
+      }
+    }
+  }
+  &[data-variant="danger"] {
+    background-color: var(--alpha-red-30);
+
+    background: linear-gradient(
+      180deg,
+      transparent 0%,
+      var(--alpha-red-30) 100%
+    );
+    background-size: 100% 200%;
+    background-position: 0% 50%;
+
+    ::before {
+      ${CheckboxBeforeDefaultStyles}
+      border-color: var(--alpha-red-30);
+      mask-image: linear-gradient(var(--alpha-red-30), transparent);
     }
 
+    &:hover,
+    &:focus,
+    &:active,
     &[data-state="checked"] {
+      color: var(--font-color);
+
+      ::before {
+        border-color: var(--color-red);
+        background-color: var(--alpha-red-60);
+      }
+
       svg {
-        stroke: var(--font-color);
+        stroke: var(--color-red);
       }
     }
   }
-  &[data-variant="ghost"] {
-    border: var(--measurement-small-10) solid transparent;
+  &[data-variant="warning"] {
+    background-color: var(--alpha-orange-30);
+
+    background: linear-gradient(
+      180deg,
+      transparent 0%,
+      var(--alpha-orange-30) 100%
+    );
+    background-size: 100% 200%;
+    background-position: 0% 50%;
+
+    ::before {
+      ${CheckboxBeforeDefaultStyles}
+      border-color: var(--alpha-orange-30);
+      mask-image: linear-gradient(var(--alpha-orange-30), transparent);
+    }
 
     &:hover,
     &:focus,
     &:active,
     &[data-state="checked"] {
-      border-color: var(--font-color-alpha-10);
+      color: var(--font-color);
+
+      ::before {
+        border-color: var(--color-orange);
+        background-color: var(--alpha-orange-60);
+      }
 
       svg {
-        stroke: var(--font-color);
+        stroke: var(--color-orange);
       }
     }
   }

package/src/collapsible/Collapsible.stories.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { Collapsible } from "..";
+import { Collapsible, Page } from "..";
 import { ComponentVariantEnum, ComponentSizeEnum } from "../../../../types";
 
 const meta = {
@@ -10,9 +10,11 @@ const meta = {
   tags: ["autodocs"],
   decorators: [
     (Story) => (
-      <div className="m-medium-30">
-        <Story />
-      </div>
+      <Page>
+        <Page.Content className="p-medium-30">
+          <Story />
+        </Page.Content>
+      </Page>
     ),
   ],
 } satisfies Meta<typeof Collapsible>;

package/src/dialog/Dialog.stories.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import styled from "styled-components";
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { Dialog } from "..";
+import { Badge, Dialog, Divider, DropdownMenu, Field, Page, Tooltip } from "..";
 import { ComponentSizeEnum } from "../../../../types";
 
 const Wrapper = styled.div``;
@@ -14,6 +14,43 @@ const meta = {
 export default meta;
 
 type Story = StoryObj<typeof meta>;
+
+const DialogContent = () => {
+  return (
+    <React.Fragment>
+      <Dialog.Menu className="align-center ">
+        <Field.Root>
+          <Field variant="ghost" sizing="medium" placeholder="Search" />
+        </Field.Root>
+        <Tooltip content="Close">
+          <Dialog.Control variant="ghost">⏎</Dialog.Control>
+        </Tooltip>
+      </Dialog.Menu>
+      <Divider className="opacity-default-50" />
+      <DropdownMenu.Item className="flex justify-between align-center">
+        Cut
+        <Badge variant="border">
+          <span className="fs-small-50">⌘X</span>
+        </Badge>
+      </DropdownMenu.Item>
+
+      <DropdownMenu.Item className="flex justify-between align-center">
+        Copy
+        <Badge variant="border">
+          <span className="fs-small-50">⌘C</span>
+        </Badge>
+      </DropdownMenu.Item>
+
+      <DropdownMenu.Item className="flex justify-between align-center">
+        Paste
+        <Badge variant="border">
+          <span className="fs-small-50">⌘V</span>
+        </Badge>
+      </DropdownMenu.Item>
+    </React.Fragment>
+  );
+};
+
 export const Default: Story = {
   args: {
     closeOnInteract: false,
@@ -31,43 +68,148 @@ export const Default: Story = {
     },
   },
   render: ({ ...args }) => (
-    <Dialog.Root>
-      <Dialog.Trigger>🐻‍❄️</Dialog.Trigger>
-      <Dialog>
-        🐻🐻‍❄️🦊🐱🐶
-        <Dialog.Menu>
-          <Dialog.Control>🐻</Dialog.Control>
-        </Dialog.Menu>
-      </Dialog>
-      <Dialog.Overlay />
-    </Dialog.Root>
+    <Page>
+      <Page.Content className="flex flex-column g-medium-30 align-center justify-center">
+        <div className="flex align-center justify-center g-medium-30 flex-wrap">
+          <Dialog.Root>
+            <Dialog.Trigger>Open Command Menu</Dialog.Trigger>
+            <Dialog>
+              <DialogContent />
+            </Dialog>
+            <Dialog.Overlay />
+          </Dialog.Root>
+        </div>
+      </Page.Content>
+    </Page>
+  ),
+};
+
+export const Small: Story = {
+  args: {
+    closeOnInteract: false,
+    open: false,
+    raw: false,
+  },
+  argTypes: {
+    sizing: {
+      options: [
+        ComponentSizeEnum.Small,
+        ComponentSizeEnum.Medium,
+        ComponentSizeEnum.Large,
+      ],
+      control: { type: "radio" },
+    },
+  },
+  render: ({ ...args }) => (
+    <Page>
+      <Page.Content className="flex flex-column g-medium-30 align-center justify-center">
+        <div className="flex align-center justify-center g-medium-30 flex-wrap">
+          <Dialog.Root>
+            <Dialog.Trigger>Open Command Menu</Dialog.Trigger>
+            <Dialog sizing="small" open>
+              <DialogContent />
+            </Dialog>
+            <Dialog.Overlay />
+          </Dialog.Root>
+        </div>
+      </Page.Content>
+    </Page>
+  ),
+};
+export const Medium: Story = {
+  args: {
+    closeOnInteract: false,
+    open: false,
+    raw: false,
+  },
+  argTypes: {
+    sizing: {
+      options: [
+        ComponentSizeEnum.Small,
+        ComponentSizeEnum.Medium,
+        ComponentSizeEnum.Large,
+      ],
+      control: { type: "radio" },
+    },
+  },
+  render: ({ ...args }) => (
+    <Page>
+      <Page.Content className="flex flex-column g-medium-30 align-center justify-center">
+        <div className="flex align-center justify-center g-medium-30 flex-wrap">
+          <Dialog.Root>
+            <Dialog.Trigger>Open Command Menu</Dialog.Trigger>
+            <Dialog sizing="medium" open>
+              <DialogContent />
+            </Dialog>
+            <Dialog.Overlay />
+          </Dialog.Root>
+        </div>
+      </Page.Content>
+    </Page>
+  ),
+};
+export const Large: Story = {
+  args: {
+    closeOnInteract: false,
+    open: false,
+    raw: false,
+  },
+  argTypes: {
+    sizing: {
+      options: [
+        ComponentSizeEnum.Small,
+        ComponentSizeEnum.Medium,
+        ComponentSizeEnum.Large,
+      ],
+      control: { type: "radio" },
+    },
+  },
+  render: ({ ...args }) => (
+    <Page>
+      <Page.Content className="flex flex-column g-medium-30 align-center justify-center">
+        <div className="flex align-center justify-center g-medium-30 flex-wrap">
+          <Dialog.Root>
+            <Dialog.Trigger>Open Command Menu</Dialog.Trigger>
+            <Dialog sizing="large" open>
+              <DialogContent />
+            </Dialog>
+            <Dialog.Overlay />
+          </Dialog.Root>
+        </div>
+      </Page.Content>
+    </Page>
   ),
 };
 export const DefaultOpen = {
   render: ({ ...args }) => (
-    <Dialog.Root>
-      <Dialog.Trigger>🐻‍❄️</Dialog.Trigger>
-
-      <Dialog open>
-        🐻🐻‍❄️🦊🐱🐶
-        <Dialog.Menu>
-          <Dialog.Control>🐻</Dialog.Control>
-        </Dialog.Menu>
-      </Dialog>
-      <Dialog.Overlay />
-    </Dialog.Root>
+    <Page>
+      <Page.Content className="flex flex-column g-medium-30 align-center justify-center">
+        <div className="flex align-center justify-center g-medium-30 flex-wrap">
+          <Dialog.Root>
+            <Dialog.Trigger>Open Command Menu</Dialog.Trigger>
+            <Dialog open>
+              <DialogContent />
+            </Dialog>
+            <Dialog.Overlay closeOnInteract />
+          </Dialog.Root>
+        </div>
+      </Page.Content>
+    </Page>
   ),
 };
 export const NoOverlay = {
   render: ({ ...args }) => (
-    <Dialog.Root>
-      <Dialog.Trigger>🐻‍❄️</Dialog.Trigger>
-      <Dialog open>
-        🐻🐻‍❄️🦊🐱🐶
-        <Dialog.Menu>
-          <Dialog.Control>🐻</Dialog.Control>
-        </Dialog.Menu>
-      </Dialog>
-    </Dialog.Root>
+    <Page>
+      <Page.Content className="flex flex-column g-medium-30 align-center justify-center">
+        <div className="flex align-center justify-center g-medium-30 flex-wrap">
+          <Dialog.Root>
+            <Dialog.Trigger>🐻‍❄️</Dialog.Trigger>
+            <Dialog open>
+              <DialogContent />
+            </Dialog>
+          </Dialog.Root>
+        </div>
+      </Page.Content>
+    </Page>
   ),
 };

package/src/dialog/styles/index.ts

@@ -3,12 +3,19 @@ import styled, { css } from "styled-components";
 const DialogDefaultStyles = css`
   position: fixed;
   top: 15dvh;
-  padding: var(--measurement-medium-60);
+  bottom: auto;
+  left: auto;
+  right: auto;
+
+  padding: var(--measurement-medium-30);
   width: 100%;
 
-  border: var(--measurement-small-10) solid var(--font-color-alpha-10);
-  background-color: var(--body-color);
   border-radius: var(--measurement-medium-30);
+  background: var(--body-color);
+
+  border: var(--measurement-small-10) solid var(--contrast-color);
+  box-shadow: 0 var(--measurement-medium-40) var(--measurement-medium-60)
+    calc(var(--measurement-medium-60) * -1) rgba(0, 0, 0, 0.3);
 
   transition: all ease-in-out 0.2s;
   z-index: var(--depth-default-100);
@@ -23,7 +30,7 @@ const DialogSizeStyles = css`
     max-height: var(--max-height);
   }
   &[data-size="medium"] {
-    max-width: calc(var(--measurement-large-90) * 2.66);
+    max-width: calc(var(--measurement-large-90) * 2);
     max-height: var(--max-height);
   }
 
@@ -46,14 +53,14 @@ export const Menu = styled.menu<any>`
   }
 `;
 export const DialogWrapper = styled.dialog<any>`
-  @keyframes slide-in {
+  @keyframes scale-in {
     0% {
       opacity: 0;
-      transform: translateY(var(--measurement-medium-30));
+      transform: scale(0.95);
     }
     100% {
       opacity: 1;
-      transform: translateY(0);
+      transform: Scale(1);
     }
   }
 
@@ -66,7 +73,7 @@ export const DialogWrapper = styled.dialog<any>`
     ${DialogSizeStyles}
 
     animation-duration: 0.2s;
-    animation-name: slide-in;
+    animation-name: scale-in;
     animation-fill-mode: backwards;
   }
 `;