@usefui/components 1.6.0 → 1.7.0

package/src/button/styles/index.ts

@@ -79,39 +79,158 @@ const ButtonIconStyles = css`
     }
   }
 `;
+const ButtonSizeStyles = css`
+  &[data-size="small"] {
+    font-size: var(--fontsize-small-60);
+
+    gap: var(--measurement-medium-10);
+    padding: var(--measurement-medium-10) var(--measurement-medium-30);
+    min-width: var(--measurement-medium-60);
+    min-height: var(--measurement-medium-60);
+
+    svg {
+      width: var(--fontsize-medium-10);
+      height: var(--fontsize-medium-10);
+    }
+  }
+  &[data-size="medium"] {
+    padding: var(--measurement-medium-10) var(--measurement-medium-60);
+    min-width: var(--measurement-medium-60);
+    min-height: var(--measurement-medium-80);
+  }
+  &[data-size="large"] {
+    padding: var(--measurement-medium-10) var(--measurement-medium-60);
+    min-width: var(--measurement-medium-60);
+    min-height: var(--measurement-medium-90);
+  }
+`;
+const ButtonShapeStyles = css`
+  &[data-shape="square"] {
+    border-radius: 0;
+  }
+  &[data-shape="smooth"] {
+    border-radius: var(--measurement-medium-20);
+  }
+  &[data-shape="round"] {
+    border-radius: var(--measurement-large-90);
+  }
+`;
+const ButtonBeforeDefaultStyles = 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 ButtonVariantsStyles = css`
   &[data-variant="primary"] {
-    color: var(--body-color) !important;
+    color: var(--body-color-alpha-80);
     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 {
+      ${ButtonBeforeDefaultStyles}
+      border-color: var(--body-color-alpha-20);
+      mask-image: linear-gradient(var(--body-color-alpha-90), transparent);
+    }
 
     &:hover,
     &:focus,
     &:active {
       color: var(--body-color);
+      background-position: 0% 25%;
+
+      ::before {
+        border-color: var(--body-color-alpha-10);
+      }
     }
   }
   &[data-variant="secondary"] {
     color: var(--font-color-alpha-60);
-    background-color: transparent;
     border-color: var(--font-color-alpha-10);
 
+    background-color: var(--body-color);
+    background: linear-gradient(
+      180deg,
+      transparent 50%,
+      var(--contrast-color) 100%
+    );
+    background-size: 100% 200%;
+    background-position: 0% 50%;
+
+    ::before {
+      ${ButtonBeforeDefaultStyles}
+      border-color: var(--font-color-alpha-10);
+      mask-image: linear-gradient(var(--font-color-alpha-30), transparent);
+    }
+
     &:hover,
     &:focus,
     &:active {
       color: var(--font-color);
       background-color: var(--font-color-alpha-10);
+      background-position: 0% 75%;
       border-color: transparent;
     }
   }
   &[data-variant="tertiary"] {
-    color: var(--font-color-alpha-80);
+    color: var(--font-color-alpha-60);
+
     background-color: transparent;
+    background: linear-gradient(
+      -180deg,
+      transparent 50%,
+      var(--font-color-alpha-10) 100%
+    );
+    background-size: 100% 200%;
+    background-position: 0% 10%;
 
     &:hover,
     &:focus,
     &:active {
       color: var(--font-color);
       background-color: var(--font-color-alpha-10);
+      background-position: 0% 75%;
+
+      ::before {
+        ${ButtonBeforeDefaultStyles}
+        border-color: var(--font-color-alpha-10);
+        mask-image: linear-gradient(var(--font-color-alpha-30), transparent);
+      }
+    }
+  }
+  &[data-variant="mono"] {
+    color: var(--font-color-alpha-80);
+    background-color: var(--contrast-color);
+
+    ::before {
+      ${ButtonBeforeDefaultStyles}
+      border-color: var(--font-color-alpha-10);
+      mask-image: linear-gradient(var(--font-color-alpha-30), transparent);
+    }
+
+    &:hover,
+    &:focus,
+    &:active {
+      color: var(--font-color);
+
+      ::before {
+        border-color: var(--font-color-alpha-30);
+      }
     }
   }
   &[data-variant="border"] {
@@ -125,36 +244,213 @@ const ButtonVariantsStyles = css`
       color: var(--font-color);
       border-color: var(--font-color-alpha-20);
     }
+
+    ::before {
+      ${ButtonBeforeDefaultStyles}
+      border-color: var(--font-color-alpha-10);
+      mask-image: linear-gradient(var(--font-color-alpha-20), transparent);
+    }
+  }
+
+  &[data-variant="accent"] {
+    background-color: var(--color-accent);
+    background: linear-gradient(
+      180deg,
+      var(--color-accent) 50%,
+      var(--shade-accent-30) 100%
+    );
+    background-size: 100% 200%;
+    background-position: 0% 50%;
+
+    ::before {
+      ${ButtonBeforeDefaultStyles}
+      border-color: var(--shade-accent-10);
+      mask-image: linear-gradient(var(--shade-accent-10), transparent);
+    }
+
+    &:hover,
+    &:focus,
+    &:active {
+      background-color: var(--tint-accent-10);
+
+      background-position: 0% 75%;
+    }
+  }
+
+  &[data-variant="meta"] {
+    color: var(--alpha-mono-white-80);
+    background-color: var(--color-blue);
+    background: linear-gradient(
+      180deg,
+      var(--tint-blue-10) 50%,
+      var(--alpha-blue-60) 100%
+    );
+    background-size: 100% 200%;
+    background-position: 0% 50%;
+
+    ::before {
+      ${ButtonBeforeDefaultStyles}
+      border-color: var(--tint-blue-30);
+      mask-image: linear-gradient(var(--tint-blue-10), transparent);
+    }
+
+    &:hover,
+    &:focus,
+    &:active {
+      color: var(--color-mono-white);
+      background-color: var(--shade-blue-10);
+
+      background-position: 0% 25%;
+
+      ::before {
+        border-color: var(--tint-blue-40);
+      }
+    }
+  }
+  &[data-variant="hint"] {
+    color: var(--alpha-mono-white-80);
+    background-color: var(--color-purple);
+    background: linear-gradient(
+      180deg,
+      var(--shade-purple-10) 50%,
+      var(--alpha-purple-60) 100%
+    );
+    background-size: 100% 200%;
+    background-position: 0% 50%;
+
+    ::before {
+      ${ButtonBeforeDefaultStyles}
+      border-color: var(--shade-purple-20);
+      mask-image: linear-gradient(var(--shade-purple-10), transparent);
+    }
+
+    &:hover,
+    &:focus,
+    &:active {
+      color: var(--color-mono-white);
+      background-color: var(--shade-purple-10);
+
+      background-position: 0% 25%;
+    }
+  }
+  &[data-variant="success"] {
+    color: var(--alpha-mono-white-90);
+    background-color: var(--shade-green-30);
+    background: linear-gradient(
+      180deg,
+      var(--shade-green-10) 50%,
+      var(--alpha-green-60) 100%
+    );
+    background-size: 100% 200%;
+    background-position: 0% 50%;
+
+    ::before {
+      ${ButtonBeforeDefaultStyles}
+      border-color: var(--shade-green-20);
+      mask-image: linear-gradient(var(--shade-green-10), transparent);
+    }
+
+    &:hover,
+    &:focus,
+    &:active {
+      color: var(--color-mono-white);
+      background-color: var(--shade-green-10);
+
+      background-position: 0% 75%;
+    }
   }
   &[data-variant="danger"] {
-    color: var(--color-mono-white);
+    color: var(--alpha-mono-white-80);
     background-color: var(--color-red);
+    background: linear-gradient(
+      180deg,
+      var(--tint-red-10) 50%,
+      var(--alpha-red-60) 100%
+    );
+    background-size: 100% 200%;
+    background-position: 0% 50%;
+
+    ::before {
+      ${ButtonBeforeDefaultStyles}
+      border-color: var(--tint-red-60);
+      mask-image: linear-gradient(var(--tint-red-10), transparent);
+    }
 
     &:hover,
     &:focus,
     &:active {
+      color: var(--color-mono-white);
       background-color: var(--shade-red-10);
+      background-position: 0% 25%;
+
+      ::before {
+        border-color: var(--tint-red-80);
+      }
     }
   }
   &[data-variant="warning"] {
-    color: var(--color-mono-dark);
+    color: var(--alpha-mono-dark-80);
     background-color: var(--color-orange);
+    background: linear-gradient(
+      180deg,
+      var(--tint-orange-10) 50%,
+      var(--alpha-orange-60) 100%
+    );
+    background-size: 100% 200%;
+    background-position: 0% 50%;
+
+    ::before {
+      ${ButtonBeforeDefaultStyles}
+      border-color: var(--tint-orange-30);
+      mask-image: linear-gradient(var(--tint-orange-10), transparent);
+    }
 
     &:hover,
     &:focus,
     &:active {
+      color: var(--color-mono-dark);
       background-color: var(--shade-orange-10);
+
+      background-position: 0% 25%;
+
+      ::before {
+        border-color: var(--tint-orange-40);
+      }
     }
   }
-  &[data-variant="mono"] {
-    color: var(--font-color-alpha-80);
-    background-color: var(--font-color-alpha-10);
+
+  &[data-variant="link"] {
+    position: relative;
+    border: none;
+    padding: 0;
+    background-color: transparent;
+    min-width: fit-content;
+    min-height: var(--measurement-medium-60);
+    color: currentColor;
+    opacity: 0.6;
+
+    ::before {
+      content: "";
+      position: absolute;
+      width: 0;
+      height: var(--measurement-small-30);
+      background-color: transparent;
+      bottom: calc(var(--measurement-small-80) * -1);
+      left: var(--measurement-small-10);
+
+      transition: all ease-in-out 0.2s;
+      transform-origin: left left;
+    }
 
     &:hover,
     &:focus,
     &:active {
-      color: var(--font-color);
-      border-color: var(--font-color-alpha-10);
+      opacity: 1;
+
+      ::before {
+        width: calc(100% - var(--measurement-small-10));
+        background-color: currentColor;
+      }
     }
   }
   &[data-variant="ghost"] {
@@ -162,8 +458,9 @@ const ButtonVariantsStyles = css`
     padding: 0;
     background-color: transparent;
     min-width: fit-content;
-    min-height: var(--measurement-medium-60);
+    min-height: fit-content;
     color: var(--font-color-alpha-60);
+    line-height: 0;
 
     &:hover,
     &:focus,
@@ -172,42 +469,6 @@ const ButtonVariantsStyles = css`
     }
   }
 `;
-const ButtonSizeStyles = css`
-  &[data-size="small"] {
-    font-size: var(--fontsize-small-60);
-
-    gap: var(--measurement-medium-10);
-    padding: var(--measurement-medium-10) var(--measurement-medium-30);
-    min-width: var(--measurement-medium-60);
-    min-height: var(--measurement-medium-60);
-
-    svg {
-      width: var(--fontsize-medium-10);
-      height: var(--fontsize-medium-10);
-    }
-  }
-  &[data-size="medium"] {
-    padding: var(--measurement-medium-10) var(--measurement-medium-60);
-    min-width: var(--measurement-medium-90);
-    min-height: var(--measurement-medium-80);
-  }
-  &[data-size="large"] {
-    padding: var(--measurement-medium-10) var(--measurement-medium-60);
-    min-width: var(--measurement-medium-90);
-    min-height: var(--measurement-medium-90);
-  }
-`;
-const ButtonShapeStyles = css`
-  &[data-shape="square"] {
-    border-radius: 0;
-  }
-  &[data-shape="smooth"] {
-    border-radius: var(--measurement-medium-20);
-  }
-  &[data-shape="round"] {
-    border-radius: var(--measurement-large-90);
-  }
-`;
 
 export const ButtonWrapper = styled.button`
   &[data-raw="false"] {

package/src/card/index.tsx

@@ -3,7 +3,7 @@
 import React from "react";
 import { CardContainer, CardWrapper, CardsGrid } from "./styles";
 
-import type { IComponentSize, TComponentShape } from "../../../../types";
+import type { IComponentShape, IComponentSize } from "../../../../types";
 
 export interface CardComposition {
   Body: typeof CardBody;
@@ -12,9 +12,7 @@ export interface CardComposition {
 }
 
 interface CardGridProps extends React.ComponentProps<"div">, IComponentSize {}
-interface CardProps extends React.ComponentProps<"div"> {
-  shape?: TComponentShape;
-}
+interface CardProps extends IComponentShape, React.ComponentProps<"div"> {}
 
 const CardGrid = (props: CardGridProps) => {
   const { sizing = "medium", children } = props;

package/src/checkbox/Checkbox.stories.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { Checkbox } from "..";
+import { Checkbox, Field, Page } from "..";
 import { ComponentVariantEnum, ComponentSizeEnum } from "../../../../types";
 
 const meta = {
@@ -10,9 +10,13 @@ const meta = {
   tags: ["autodocs"],
   decorators: [
     (Story) => (
-      <div className="m-medium-30">
-        <Story />
-      </div>
+      <Page>
+        <Page.Content className="p-medium-30">
+          <div className="flex flex-column align-center justify-center h-100 g-medium-30">
+            <Story />
+          </div>
+        </Page.Content>
+      </Page>
     ),
   ],
 } satisfies Meta<typeof Checkbox>;
@@ -41,7 +45,7 @@ export const Default: Story = {
   },
   render: ({ ...args }) => (
     <Checkbox.Root>
-      <Checkbox>
+      <Checkbox variant="primary">
         <Checkbox.Indicator />
       </Checkbox>
     </Checkbox.Root>
@@ -56,43 +60,78 @@ export const DefaultChecked: Story = {
     </Checkbox.Root>
   ),
 };
-export const Group: Story = {
-  render: ({ ...args }) => (
-    <div className="flex g-medium-30">
-      {[false, false, true].map((item: boolean, key: number) => (
-        <Checkbox.Root key={`${item}-${key}`}>
-          <Checkbox defaultChecked={item} onChange={() => null}>
-            <Checkbox.Indicator />
-          </Checkbox>
-        </Checkbox.Root>
-      ))}
-    </div>
-  ),
-};
+
 export const Sizes: Story = {
   render: ({ ...args }) => (
     <div className="flex g-medium-30">
-      {["large", "medium", "small"].map((item: string) => (
-        <Checkbox.Root key={item}>
-          <Checkbox sizing={item} onChange={() => null}>
-            <Checkbox.Indicator />
-          </Checkbox>
-        </Checkbox.Root>
-      ))}
+      <div className="flex flex-column g-medium-30">
+        {["small", "medium", "large"].map((item: string) => (
+          <Checkbox.Root key={item}>
+            <Field.Label
+              id={`${item}-label`}
+              htmlFor={item}
+              className="flex align-center g-medium-30"
+              optional
+            >
+              <Checkbox
+                defaultChecked
+                id={item}
+                name={item}
+                sizing={item as "small"}
+              >
+                <Checkbox.Indicator />
+              </Checkbox>
+
+              <div className="flex flex-column">
+                <Field.Meta variant="emphasis">{item}</Field.Meta>
+                <Field.Meta variant="hint" className="fs-small-60">
+                  The {item} Checkbox variant
+                </Field.Meta>
+              </div>
+            </Field.Label>
+          </Checkbox.Root>
+        ))}
+      </div>
     </div>
   ),
 };
 export const Variants: Story = {
   render: ({ ...args }) => (
-    <div className="flex g-medium-30">
-      {["primary", "mono", "border", "ghost"].map((item: string) => (
+    <div className="flex flex-column g-medium-30">
+      {[
+        "accent",
+        "primary",
+        "secondary",
+        "tertiary",
+        "hint",
+        "meta",
+        "success",
+        "danger",
+        "warning",
+      ].map((item: string) => (
         <Checkbox.Root key={item}>
-          <Checkbox name={item} variant={item}>
-            <Checkbox.Indicator />
-          </Checkbox>
-          <label id={`${item}-label`} htmlFor={item}>
-            <small>{item}</small>
-          </label>
+          <Field.Label
+            id={`${item}-label`}
+            htmlFor={item}
+            className="flex align-center g-medium-30"
+            optional
+          >
+            <Checkbox
+              defaultChecked
+              id={item}
+              name={item}
+              variant={item as "primary"}
+            >
+              <Checkbox.Indicator />
+            </Checkbox>
+
+            <div className="flex flex-column">
+              <Field.Meta variant="emphasis">{item}</Field.Meta>
+              <Field.Meta variant="hint" className="fs-small-60">
+                The {item} Checkbox variant
+              </Field.Meta>
+            </div>
+          </Field.Label>
         </Checkbox.Root>
       ))}
     </div>

package/src/checkbox/index.tsx

@@ -1,15 +1,18 @@
 "use client";
 
 import React from "react";
+
 import { CheckboxProvider, useCheckbox } from "./hooks";
 import { CheckboxWrapper, NativeInput, Indicator } from "./styles";
+
 import {
   IReactChildren,
   IComponentStyling,
   ComponentSizeEnum,
   IComponentSize,
   ComponentVariantEnum,
-  IComponentVariant,
+  TComponentVariant,
+  TComponentVariantExtended,
 } from "../../../../types";
 
 export interface ICheckboxComposition {
@@ -18,10 +21,9 @@ export interface ICheckboxComposition {
 }
 
 export interface ICheckboxProperties
-  extends IComponentStyling,
-    IComponentSize,
-    IComponentVariant,
-    React.ComponentProps<"input"> {}
+  extends IComponentStyling, IComponentSize, React.ComponentProps<"input"> {
+  variant?: TComponentVariant | TComponentVariantExtended | "accent";
+}
 
 /**
  * Checkbox are used to select one or more options from a set.
@@ -44,7 +46,7 @@ const Checkbox = (props: ICheckboxProperties) => {
   const {
     raw,
     sizing = ComponentSizeEnum.Medium,
-    variant = ComponentVariantEnum.Mono,
+    variant = ComponentVariantEnum.Secondary,
     name,
     disabled,
     required,