@usefui/components 1.6.0 → 1.7.1

package/src/message-bubble/index.tsx

@@ -10,7 +10,17 @@ import {
   MessageBubbleMetaWrapper,
 } from "./styles";
 
-import { IComponentStyling, IReactChildren } from "../../../../types";
+import {
+  ComponentShapeEnum,
+  ComponentSizeEnum,
+  ComponentVariantEnum,
+  IComponentShape,
+  IComponentSize,
+  IComponentStyling,
+  IReactChildren,
+  TComponentVariant,
+  TComponentVariantExtended,
+} from "../../../../types";
 
 export type MessageBubbleSide = "left" | "right";
 
@@ -24,7 +34,12 @@ export interface IMessageBubbleProperties
 }
 
 export interface IMessageBubbleContentProperties
-  extends IComponentStyling, React.HTMLAttributes<HTMLDivElement> {
+  extends
+    IComponentStyling,
+    IComponentShape,
+    IComponentSize,
+    React.HTMLAttributes<HTMLDivElement> {
+  variant?: TComponentVariant | TComponentVariantExtended;
   children: string;
 }
 
@@ -88,14 +103,16 @@ MessageBubble.displayName = "MessageBubble";
  * @returns {ReactElement} The MessageBubble.Content component.
  */
 const MessageBubbleContent = (props: IMessageBubbleContentProperties) => {
-  const { children, raw, ...restProps } = props;
+  const { sizing, shape, variant, children, raw, ...restProps } = props;
   const { id, states } = useMessageBubble();
 
   return (
     <MessageBubbleBadge
-      variant="secondary"
       data-raw={Boolean(raw)}
       data-side={states?.side}
+      variant={variant ?? ComponentVariantEnum.Border}
+      shape={shape ?? ComponentShapeEnum.Smooth}
+      sizing={sizing ?? ComponentSizeEnum.Medium}
       aria-label={`message-bubble-content-${id}`}
       {...restProps}
     >
@@ -133,6 +150,7 @@ const MessageBubbleMeta = (props: IMessageBubbleMetaProperties) => {
       data-raw={Boolean(raw)}
       data-side={states?.side}
       aria-label={`message-bubble-meta-${states?.side}`}
+      className="fs-small-60 opacity-default-60"
       {...restProps}
     >
       {formattedDate}

package/src/message-bubble/styles/index.ts

@@ -21,27 +21,24 @@ export const MessageBubbleBadge: React.FC<IBadgeProperties> = styled(Badge)`
   width: 100%;
   justify-self: flex-end;
   padding: var(--measurement-medium-30) var(--measurement-medium-50) !important;
-  border-radius: var(--measurement-medium-60) !important;
 
   &[data-side="left"] {
-    background-color: var(--contrast-color) !important;
-    border-bottom-left-radius: 0 !important;
+    border-top-left-radius: 0 !important;
   }
 
   &[data-side="right"] {
-    background-color: var(--font-color-alpha-10) !important;
-    border-bottom-right-radius: 0 !important;
+    border-top-right-radius: 0 !important;
   }
 `;
 
 export const MessageBubbleContentWrapper = styled.div`
-  line-height: 1.5;
+  line-height: 1.3;
   font-weight: 500;
   word-break: keep-all;
   width: 100%;
 
   * {
-    font-size: var(--fontsize-medium-10) !important;
+    font-size: inherit !important;
   }
 `;
 

package/src/otp-field/OTPField.stories.tsx

@@ -1,6 +1,4 @@
 import React from "react";
-import type { Meta, StoryObj } from "@storybook/react";
-
 import { Field, OTPField, Page } from "..";
 
 const meta = {
@@ -8,13 +6,17 @@ const meta = {
   component: OTPField,
   tags: ["autodocs"],
   decorators: [
-    (Story) => (
-      <div className="m-medium-30">
-        <Story />
-      </div>
+    (Story: any) => (
+      <Page>
+        <Page.Content className="p-medium-30">
+          <div className="flex flex-column align-center justify-center h-100">
+            <Story />
+          </div>
+        </Page.Content>
+      </Page>
     ),
   ],
-} satisfies Meta<typeof OTPField>;
+};
 export default meta;
 
 export const Default = {
@@ -27,24 +29,20 @@ export const Default = {
       setValue(value.trim());
     }, []);
     return (
-      <Page>
-        <Page.Content>
-          <form aria-label="story-form">
-            <Field.Wrapper className="w-100">
-              <Field.Label>Confirmation code</Field.Label>
-              <OTPField length={6} onComplete={handleComplete}>
-                <OTPField.Group>
-                  {Array.from({ length: 6 }).map((_, index) => (
-                    <OTPField.Slot key={index} index={index} />
-                  ))}
-                </OTPField.Group>
-              </OTPField>
+      <form aria-label="story-form" style={{ width: 325 }}>
+        <Field.Wrapper className="w-100">
+          <Field.Label>Confirmation code</Field.Label>
+          <OTPField length={6} onComplete={handleComplete}>
+            <OTPField.Group>
+              {Array.from({ length: 6 }).map((_, index) => (
+                <OTPField.Slot key={index} index={index} />
+              ))}
+            </OTPField.Group>
+          </OTPField>
 
-              {value}
-            </Field.Wrapper>
-          </form>
-        </Page.Content>
-      </Page>
+          {value}
+        </Field.Wrapper>
+      </form>
     );
   },
 };

package/src/otp-field/index.tsx

@@ -6,6 +6,11 @@ import { useOTPField, OTPFieldContext } from "./hooks";
 import { OTPCell } from "./styles";
 
 import type { OTPFieldProps, OTPFieldSlotProps } from "./types";
+import {
+  ComponentShapeEnum,
+  ComponentSizeEnum,
+  ComponentVariantEnum,
+} from "../../../../types";
 
 export interface IOTPFieldComposition {
   Slot: typeof OTPFieldSlot;
@@ -191,6 +196,8 @@ OTPFieldGroup.displayName = "OTPField.Group";
  */
 const OTPFieldSlot = ({
   index,
+  shape,
+  raw,
   ...props
 }: OTPFieldSlotProps & React.InputHTMLAttributes<HTMLInputElement>) => {
   const context = useOTPField();
@@ -215,6 +222,8 @@ const OTPFieldSlot = ({
       type="text"
       data-testid="otp-field-slot"
       data-active={activeIndex === index}
+      data-shape={shape ?? ComponentShapeEnum.Smooth}
+      data-raw={Boolean(raw)}
       autoComplete="one-time-code"
       maxLength={1}
       value={otp[index] || ""}

package/src/otp-field/styles/index.ts

@@ -1,33 +1,131 @@
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 
-export const OTPCell = styled.input`
+const OTPShapeStyles = 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);
+    padding-left: var(--measurement-medium-50) !important;
+  }
+`;
+
+const OTPCellDefaultStyles = css`
+  outline: none;
+  cursor: text;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  box-sizing: border-box;
+
+  font-size: var(--fontsize-medium-20);
+
+  padding: 0 var(--measurement-medium-30);
   width: var(--measurement-medium-90);
   height: var(--measurement-medium-90);
-  border: var(--measurement-small-10) solid var(--font-color-alpha-10);
 
-  border-radius: var(--measurement-medium-30);
+  line-height: 1;
+  letter-spacing: calc(
+    var(--fontsize-small-10) - ((var(--fontsize-small-10) * 1.066))
+  );
+
+  border: var(--measurement-small-10) solid transparent;
+
   backdrop-filter: blur(var(--measurement-small-10));
+  color: var(--font-color-alpha-60);
 
-  text-align: center;
-  font-size: var(--fontsize-medium-10);
-  font-weight: 500;
+  transition: all ease-in-out 0.2s;
 
-  color: var(--font-color-alpha-10);
-  text-shadow: 0 0 0 var(--font-color);
+  svg,
+  span,
+  img {
+    opacity: 0.6;
+  }
+
+  &:hover,
+  &:focus,
+  &:active,
+  &:focus-within,
+  &:has(:active) {
+    color: var(--font-color);
+    svg,
+    span,
+    img {
+      opacity: 1;
+    }
+  }
+
+  &::placeholder {
+    color: var(--font-color-alpha-30);
+  }
+
+  &:disabled,
+  &:has(:disabled) {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
 
   background-color: transparent;
-  transition: all 0.2s ease-in-out;
-  outline: none;
+  border-color: var(--font-color-alpha-10);
 
-  &:focus:not(:active) {
-    background-color: var(--font-color-alpha-10);
+  &:hover,
+  &:focus,
+  &:active,
+  &:focus-within,
+  &:has(:hover),
+  &:has(:active) {
+    border-color: var(--font-color-alpha-20);
   }
 
-  &:hover:not(:active) {
+  &:focus,
+  &:active,
+  &:focus-within,
+  &:has(:active) {
+    box-shadow: 0 0 0 var(--measurement-small-30) var(--alpha-accent-30);
+  }
+
+  background-color: transparent;
+  border-color: var(--font-color-alpha-10);
+
+  &:hover,
+  &:focus,
+  &:active,
+  &:focus-within,
+  &:has(:hover),
+  &:has(:active) {
     border-color: var(--font-color-alpha-20);
   }
 
-  &::placeholder {
-    opacity: var(--opacity-default-10);
+  &:focus,
+  &:active,
+  &:focus-within,
+  &:has(:active) {
+    box-shadow: 0 0 0 var(--measurement-small-30) var(--font-color-alpha-10);
+  }
+
+  &[data-error="true"] {
+    color: var(--color-red);
+    border-color: var(--alpha-red-10);
+
+    &:hover,
+    &:focus,
+    &:active,
+    &:focus-within,
+    &:has(:hover),
+    &:has(:active) {
+      background-color: var(--alpha-red-10);
+      box-shadow: 0 0 0 var(--measurement-small-30) var(--alpha-red-10);
+    }
+  }
+`;
+
+export const OTPCell = styled.input`
+  &[data-raw="false"] {
+    ${OTPCellDefaultStyles}
+    ${OTPShapeStyles}
   }
 `;

package/src/otp-field/types/index.ts

@@ -1,3 +1,10 @@
+import {
+  IComponentSize,
+  IComponentVariant,
+  IComponentShape,
+  IComponentStyling,
+} from "../../../../../types";
+
 export interface OTPFieldContextType {
   otp: string[];
   inputRefs: React.MutableRefObject<(HTMLInputElement | null)[]>;
@@ -18,6 +25,7 @@ export interface OTPFieldProps {
   onComplete?: (value: string) => void;
 }
 
-export interface OTPFieldSlotProps {
+export interface OTPFieldSlotProps
+  extends IComponentVariant, IComponentStyling, IComponentShape {
   index: number;
 }

package/src/overlay/styles/index.ts

@@ -19,6 +19,7 @@ export const OverlayWrapper = styled.div<any>`
 
   &[data-raw="false"] {
     background-color: rgba(0, 0, 0, 0.6); // Always forced to black
+
     animation-duration: 0.2s;
     animation-name: animate-fade;
     animation-fill-mode: backwards;

package/src/ruler/Ruler.stories.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Page } from "../";
+import { Ruler } from "./index";
+
+/**
+ * RulerCanvas renders a canvas area with horizontal and vertical rulers,
+ * allowing users to create and drag guides for precise alignment.
+ */
+const meta = {
+  title: "Components/Ruler",
+  component: Ruler,
+  tags: ["autodocs"],
+} satisfies Meta<typeof Ruler>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+  render: ({ ...args }) => (
+    <Page>
+      <Page.Content>
+        <Ruler.Root>
+          <Ruler>
+            <Ruler.Corner />
+            <Ruler.Row orientation="horizontal" />
+            <Ruler.Row orientation="vertical" />
+            <Ruler.Canvas>
+              <Ruler.Lines />
+              <div
+                className="h-100 w-100 flex align-center justify-center"
+                style={{ background: "var(--background-color)" }}
+              >
+                <p className="fs-medium-20">Canvas Content</p>
+              </div>
+            </Ruler.Canvas>
+          </Ruler>
+        </Ruler.Root>
+      </Page.Content>
+    </Page>
+  ),
+};

package/src/ruler/constants/index.ts

@@ -0,0 +1,3 @@
+export const RULER_SIZE = 16;
+export const MAJOR_TICK_INTERVAL = 100;
+export const MINOR_TICK_INTERVAL = 10;

package/src/ruler/hooks/index.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import React from "react";
+import type { RulerContextType, Guide } from "../types";
+
+const RulerContext = React.createContext<RulerContextType | null>(null);
+
+export function useRuler() {
+  const context = React.useContext(RulerContext);
+  if (!context) throw new Error("useRuler must be used within RulerProvider");
+  return context;
+}
+
+export function RulerProvider({ children }: { children: React.ReactNode }) {
+  const [guides, setGuides] = React.useState<Guide[]>([]);
+  const [activeGuide, setActiveGuide] = React.useState<Guide | null>(null);
+  const [isDragging, setIsDragging] = React.useState(false);
+  const canvasRef = React.useRef<HTMLDivElement>(null);
+
+  const addGuide = React.useCallback((guide: Omit<Guide, "id">) => {
+    const newGuide = { ...guide, id: crypto.randomUUID() };
+    setGuides((prev) => [...prev, newGuide]);
+    return newGuide;
+  }, []);
+
+  const updateGuide = React.useCallback((id: string, position: number) => {
+    setGuides((prev) =>
+      prev.map((g) => (g.id === id ? { ...g, position } : g)),
+    );
+  }, []);
+
+  const removeGuide = React.useCallback((id: string) => {
+    setGuides((prev) => prev.filter((g) => g.id !== id));
+  }, []);
+
+  return (
+    <RulerContext.Provider
+      value={{
+        guides,
+        addGuide,
+        updateGuide,
+        removeGuide,
+        activeGuide,
+        setActiveGuide,
+        isDragging,
+        setIsDragging,
+        canvasRef,
+      }}
+    >
+      {children}
+    </RulerContext.Provider>
+  );
+}