@usefui/components 1.6.0 → 1.7.1

package/src/field/styles/index.ts

@@ -10,15 +10,17 @@ export const FieldDefaultStyles = css`
 
   font-size: var(--fontsize-medium-20);
 
-  line-height: 1.1;
+  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);
-  width: fit-content;
+
+  width: 100%;
   height: fit-content;
 
   transition: all ease-in-out 0.2s;
@@ -31,7 +33,9 @@ export const FieldDefaultStyles = css`
 
   &:hover,
   &:focus,
-  &:active {
+  &:active,
+  &:focus-within,
+  &:has(:active) {
     color: var(--font-color);
     svg,
     span,
@@ -44,26 +48,46 @@ export const FieldDefaultStyles = css`
     color: var(--font-color-alpha-30);
   }
 
-  &:disabled {
+  &:disabled,
+  &:has(:disabled) {
     cursor: not-allowed;
     opacity: 0.6;
   }
 `;
 export const FieldVariantsStyles = css`
   &[data-variant="primary"] {
-    background-color: var(--font-color-alpha-10);
+    background-color: transparent;
     border-color: var(--font-color-alpha-10);
 
+    &:hover,
     &:focus,
-    &:active {
-      box-shadow: 0 0 0 var(--measurement-small-30) var(--font-color-alpha-10);
+    &:active,
+    &:focus-within,
+    &:has(:hover),
+    &:has(:active) {
+      border-color: var(--font-color-alpha-20);
+    }
+
+    &:focus,
+    &:active,
+    &:focus-within,
+    &:has(:active) {
+      box-shadow: 0 0 0 var(--measurement-small-30) var(--alpha-accent-30);
     }
 
     &[data-error="true"] {
       color: var(--color-red);
-      background-color: var(--alpha-red-10);
       border-color: var(--alpha-red-10);
-      box-shadow: 0 0 0 var(--measurement-small-30) 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);
+      }
     }
   }
 
@@ -73,12 +97,17 @@ export const FieldVariantsStyles = css`
 
     &:hover,
     &:focus,
-    &:active {
+    &:active,
+    &:focus-within,
+    &:has(:hover),
+    &:has(:active) {
       border-color: var(--font-color-alpha-20);
     }
 
     &:focus,
-    &:active {
+    &:active,
+    &:focus-within,
+    &:has(:active) {
       box-shadow: 0 0 0 var(--measurement-small-30) var(--font-color-alpha-10);
     }
 
@@ -88,7 +117,10 @@ export const FieldVariantsStyles = css`
 
       &:hover,
       &:focus,
-      &:active {
+      &: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);
       }
@@ -105,7 +137,10 @@ export const FieldVariantsStyles = css`
 
     &:hover,
     &:focus,
-    &:active {
+    &:active,
+    &:focus-within,
+    &:has(:hover),
+    &:has(:active) {
       color: var(--font-color);
     }
 
@@ -126,7 +161,6 @@ export const FieldSizeStyles = css`
     padding: 0 var(--measurement-medium-30);
     min-width: var(--measurement-medium-90);
     min-height: var(--measurement-medium-90);
-    width: fit-content;
   }
   &[data-size="large"] {
     padding: var(--measurement-medium-50);
@@ -143,6 +177,7 @@ export const FieldShapeStyles = css`
   }
   &[data-shape="round"] {
     border-radius: var(--measurement-large-90);
+    padding-left: var(--measurement-medium-50) !important;
   }
 `;
 
@@ -190,3 +225,200 @@ export const Def = styled.dfn<any>`
     }
   }
 `;
+
+export const ParentContainer = styled.div<any>`
+  position: relative;
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+  height: 100%;
+
+  input[type="number"]::-webkit-inner-spin-button,
+  input[type="number"]::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  input {
+    width: 100% !important;
+  }
+  input[type="number"] {
+    appearance: textfield;
+    -moz-appearance: textfield;
+  }
+`;
+export const ParentWrapper = styled.div<any>`
+  &[data-raw="false"] {
+    ${FieldDefaultStyles}
+    ${FieldVariantsStyles}
+    ${FieldSizeStyles}
+    ${FieldShapeStyles}
+
+    cursor: default;
+    display: flex;
+    align-items: center;
+    justify-content: start;
+    gap: var(--measurement-small-30);
+    width: 100% !important;
+    text-align: left !important;
+
+    &[data-error="true"] {
+      &::placeholder {
+        color: var(--alpha-red-30);
+      }
+    }
+
+    &[data-wrap="true"] {
+      flex-wrap: wrap;
+      align-items: center;
+      align-content: center;
+      height: auto;
+      padding-top: var(--measurement-small-60);
+      padding-bottom: var(--measurement-small-60);
+    }
+  }
+`;
+
+export const InnerDivider = styled.div<any>`
+  height: var(--measurement-small-10);
+  width: 100%;
+  background-color: var(--font-color-alpha-10);
+`;
+export const InnerWrapper = styled.div<any>`
+  &[data-raw="false"] {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+
+    right: 0;
+    &[data-multiple="true"] {
+      right: var(--measurement-small-10) !important;
+    }
+
+    top: var(--measurement-small-10);
+    bottom: var(--measurement-small-10);
+
+    border-left: var(--measurement-small-10) solid var(--font-color-alpha-10);
+    border-color: var(--font-color-alpha-10);
+
+    overflow: hidden;
+
+    &[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;
+    }
+    &[data-shape="smooth"] {
+      border-radius: 0 var(--measurement-medium-20) var(--measurement-medium-20)
+        0;
+    }
+    &[data-shape="square"] {
+      border-radius: 0;
+    }
+  }
+`;
+export const InnerTrigger = styled.button<any>`
+  all: unset;
+
+  position: relative;
+  display: flex;
+  flex: 1;
+
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  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));
+
+  cursor: pointer;
+  transition: all ease-in-out 0.2s;
+
+  svg {
+    opacity: 0.6;
+    transition: all ease-in-out 0.2s;
+  }
+
+  ::before {
+    content: "";
+    inset: 0;
+
+    border-radius: inherit;
+    position: absolute;
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+
+    mask-composite: intersect;
+
+    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%;
+
+    svg {
+      opacity: 0.8;
+    }
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.3;
+  }
+`;
+
+export const InnerSegment = styled.span<any>`
+  &[data-raw="false"] {
+    border-radius: inherit;
+
+    text-align: center;
+    outline: none;
+    color: inherit;
+    transition: background-color ease-in-out 0.2s;
+
+    &[data-placeholder="true"] {
+      color: var(--font-color-alpha-30);
+    }
+
+    &:hover,
+    &:focus,
+    &:active,
+    &:focus-within,
+    &:has(:active) {
+      background-color: var(--font-color-alpha-10);
+      color: var(--font-color);
+    }
+  }
+`;
+export const Muted = styled.span<any>`
+  &[data-raw="false"] {
+    color: var(--font-color-alpha-30);
+    user-select: none;
+  }
+`;
+export const HiddenInput = styled.input<any>`
+  border: none;
+  outline: none;
+  background: transparent;
+  flex: 1;
+  font: inherit;
+  color: inherit;
+  padding: 0;
+  min-width: var(--measurement-medium-60);
+`;

package/src/field/types/index.ts

@@ -0,0 +1,31 @@
+export type TDateSegmentType =
+  | "day"
+  | "month"
+  | "year"
+  | "hour"
+  | "minute"
+  | "literal";
+
+export interface ISegment {
+  type: TDateSegmentType;
+  value: string;
+}
+
+export interface DateState {
+  day: number;
+  month: number;
+  year: number;
+  hour: number;
+  minute: number;
+}
+
+export const SegmentRanges: Record<
+  Exclude<TDateSegmentType, "literal">,
+  { min: number; max: (date: DateState) => number }
+> = {
+  day: { min: 1, max: () => 31 },
+  month: { min: 1, max: () => 12 },
+  year: { min: 1, max: () => 9999 },
+  hour: { min: 0, max: () => 23 },
+  minute: { min: 0, max: () => 59 },
+};

package/src/field/utils/index.ts

@@ -0,0 +1,201 @@
+import {
+  SegmentRanges,
+  type DateState,
+  type ISegment,
+  type TDateSegmentType,
+} from "../types";
+
+/**
+ * Converts a `Date` object into a flat `DateState` record.
+ *
+ * Month is normalized from the zero-based `Date` API (0–11) to a
+ * human-readable value (1–12) so that segment values always match
+ * what is displayed to the user.
+ *
+ * @param date - The `Date` instance to decompose.
+ * @returns A `DateState` object with individual `day`, `month`, `year`,
+ *   `hour`, and `minute` fields.
+ *
+ * @example
+ * dateToState(new Date(2026, 2, 28, 9, 54));
+ * // → { day: 28, month: 3, year: 2026, hour: 9, minute: 54 }
+ */
+export function dateToState(date: Date): DateState {
+  return {
+    day: date.getDate(),
+    month: date.getMonth() + 1, // Normalize: Date months are 0-indexed
+    year: date.getFullYear(),
+    hour: date.getHours(),
+    minute: date.getMinutes(),
+  };
+}
+
+/**
+ * Reconstructs a `Date` object from a flat `DateState` record.
+ *
+ * Month is converted back from human-readable (1–12) to the zero-based
+ * value expected by the `Date` constructor.
+ *
+ * @param state - The `DateState` to recompose.
+ * @returns A `Date` instance representing the given state.
+ *
+ * @example
+ * stateToDate({ day: 28, month: 3, year: 2026, hour: 9, minute: 54 });
+ * // → Date { Sat Mar 28 2026 09:54:00 }
+ */
+export function stateToDate(state: DateState): Date {
+  return new Date(
+    state.year,
+    state.month - 1, // Normalize: Date constructor expects 0-indexed months
+    state.day,
+    state.hour,
+    state.minute,
+  );
+}
+
+/**
+ * Builds an ordered array of display segments for the date (and optionally
+ * time) input, using `Intl.DateTimeFormat.formatToParts` to resolve the
+ * correct part order for the given locale.
+ *
+ * Each segment is either an editable unit (`day`, `month`, `year`, `hour`,
+ * `minute`) or a non-interactive separator (`literal`). Empty literals are
+ * filtered out to avoid rendering invisible nodes.
+ *
+ * When `withTime` is `true`, time segments are appended after a double-space
+ * literal separator so they can be visually distinguished from date segments
+ * without introducing a hard-coded character.
+ *
+ * @param state - Current `DateState` used as the formatting probe date.
+ * @param locale - BCP 47 locale tag (e.g. `"en-US"`, `"fr-FR"`) that controls
+ *   the segment order returned by `Intl.DateTimeFormat`.
+ * @param withTime - When `true`, hour and minute segments are appended.
+ * @returns An ordered `ISegment[]` array ready to be rendered.
+ *
+ * @example
+ * // French locale → day before month
+ * buildSegments({ day: 28, month: 3, year: 2026, hour: 9, minute: 54 }, "fr-FR", true);
+ * // → [
+ * //     { type: "day",     value: "28" },
+ * //     { type: "literal", value: "/"  },
+ * //     { type: "month",   value: "03" },
+ * //     { type: "literal", value: "/"  },
+ * //     { type: "year",    value: "2026" },
+ * //     { type: "literal", value: "  " },   ← date/time separator
+ * //     { type: "hour",    value: "09" },
+ * //     { type: "literal", value: ":"  },
+ * //     { type: "minute",  value: "54" },
+ * //   ]
+ */
+export function buildSegments(
+  state: DateState,
+  locale: string,
+  withTime: boolean,
+): ISegment[] {
+  // Format only the date parts (day / month / year) in locale order
+  const dateFormatter = new Intl.DateTimeFormat(locale, {
+    day: "2-digit",
+    month: "2-digit",
+    year: "numeric",
+  });
+
+  // Format only the time parts (hour / minute) using 24-hour clock so
+  // we never have to deal with am/pm segments
+  const timeFormatter = new Intl.DateTimeFormat(locale, {
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: false,
+  });
+
+  // Use the current state as the probe date so formatted values match
+  // what is actually stored
+  const probe = stateToDate(state);
+
+  const dateParts = dateFormatter
+    .formatToParts(probe)
+    // Discard whitespace-only literals to avoid invisible DOM nodes
+    .filter((p) => p.type !== "literal" || p.value.trim() !== "")
+    .map((p): ISegment => {
+      if (p.type === "day") return { type: "day", value: p.value };
+      if (p.type === "month") return { type: "month", value: p.value };
+      if (p.type === "year") return { type: "year", value: p.value };
+
+      // Any remaining part (e.g. "/" or ".") becomes a non-interactive literal
+      return { type: "literal", value: p.value };
+    });
+
+  // Return date-only segments when time display is not requested
+  if (!withTime) return dateParts;
+
+  const timeParts = timeFormatter
+    .formatToParts(probe)
+    .filter((p) => p.type !== "literal" || p.value.trim() !== "")
+    .map((p): ISegment => {
+      if (p.type === "hour") return { type: "hour", value: p.value };
+      if (p.type === "minute") return { type: "minute", value: p.value };
+      return { type: "literal", value: p.value };
+    });
+
+  // Separate date and time groups with a double-space literal so they are
+  // visually distinct without coupling to any locale-specific character
+  return [...dateParts, { type: "literal", value: "  " }, ...timeParts];
+}
+
+/**
+ * Applies a new `DateState` to both the internal React state and the
+ * external `onChange` callback, respecting the controlled / uncontrolled
+ * pattern.
+ *
+ * - **Uncontrolled**: updates `internalState` directly so the component
+ *   re-renders with the new value.
+ * - **Controlled**: skips the internal update and lets the parent drive the
+ *   value through the `onChange` → `value` prop cycle.
+ * - In both modes, `onChange` is always called when provided, so consumers
+ *   receive every change regardless of control mode.
+ *
+ * @param isControlled - Whether the component is in controlled mode
+ *   (`value` prop is defined).
+ * @param next - The new `DateState` to commit.
+ * @param setInternalState - React `useState` setter for the internal state.
+ * @param onChange - Optional external change handler provided by the consumer.
+ */
+export const commitState = (
+  isControlled: boolean,
+  next: DateState,
+  setInternalState: (value: React.SetStateAction<DateState>) => void,
+  onChange: ((date: Date) => void) | undefined,
+) => {
+  // Only mutate internal state when uncontrolled; controlled components rely
+  // on the parent re-rendering with the updated `value` prop
+  if (!isControlled) setInternalState(next);
+
+  // Always fire onChange so the consumer can react in both modes
+  onChange?.(stateToDate(next));
+};
+
+/**
+ * Clamps a raw numeric value to the valid range for a given date/time segment.
+ *
+ * Ranges are looked up from `SegmentRanges`, whose `max` functions accept the
+ * full `DateState` so month-aware day limits (e.g., 28 for February) can be
+ * applied in the future without changing this function's signature.
+ *
+ * @param val - The raw number to clamp (e.g. from a keyboard buffer).
+ * @param seg - The target segment type (excludes `"literal"`).
+ * @param internalState - The current `DateState`, forwarded to the `max`
+ *   function so context-sensitive limits can be computed.
+ * @returns The value clamped to `[min, max]` for the given segment.
+ *
+ * @example
+ * clamp(45, "month", state); // → 12
+ * clamp(0,  "day",   state); // → 1
+ * clamp(7,  "hour",  state); // → 7
+ */
+export const clamp = (
+  val: number,
+  seg: Exclude<TDateSegmentType, "literal">,
+  internalState: DateState,
+): number => {
+  const { min, max } = SegmentRanges[seg];
+  return Math.min(Math.max(val, min), max(internalState));
+};

package/src/index.ts

@@ -16,7 +16,6 @@ export * from "./otp-field";
 export * from "./overlay";
 export * from "./page";
 export * from "./portal";
-export * from "./privacy-field";
 export * from "./resizable";
 export * from "./sheet";
 export * from "./shimmer";
@@ -31,6 +30,7 @@ export * from "./toggle";
 export * from "./toolbar";
 export * from "./tooltip";
 export * from "./tree";
+export * from "./select";
 
 export { useAccordion } from "./accordion/hooks";
 export { useCheckbox } from "./checkbox/hooks";
@@ -45,3 +45,4 @@ 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

@@ -1,7 +1,7 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { MessageBubble } from "..";
+import { Avatar, Field, MessageBubble, Page, ScrollArea, Textarea } from "..";
 
 const meta = {
   title: "Components/MessageBubble",
@@ -9,9 +9,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 MessageBubble>;
@@ -70,22 +72,67 @@ export const Right: Story = {
 
 export const Conversation: Story = {
   render: () => (
-    <React.Fragment>
+    <ScrollArea className="h-100 w-100 flex flex-column g-medium-30 " scrollbar>
       {(
         [
-          { side: "left", message: "Hey, how are you doing?" },
-          { side: "right", message: "All good! What about you?" },
-          { side: "left", message: "Pretty great, thanks for asking 🐻" },
-          { side: "right", message: "Glad to hear it! 🐻❄️" },
+          {
+            variant: "border",
+            side: "left",
+            message: "Hey, how are you doing?",
+          },
+          {
+            variant: "primary",
+            side: "right",
+            message: "All good! What about you?",
+          },
+          {
+            variant: "border",
+            side: "left",
+            message: "Pretty great, thanks for asking",
+          },
+          {
+            variant: "primary",
+            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: "hint",
+            side: "right",
+            message: "Hic dolorum esse magnam sint quibusdam.",
+          },
+          {
+            variant: "meta",
+            side: "right",
+            message: "Ipsa nisi fugiat doloribus.",
+          },
         ] as const
-      ).map(({ side, message }, index) => (
+      ).map(({ variant, side, message }, index) => (
         <MessageBubble.Root key={index}>
           <MessageBubble side={side}>
-            <MessageBubble.Content>{message}</MessageBubble.Content>
+            {side === "left" && (
+              <Field.Meta variant="hint">
+                <Avatar
+                  sizing="small"
+                  alt="foundation-logo"
+                  src="https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80"
+                  shape="smooth"
+                >
+                  <Avatar.Badge
+                    alt="foundation-logo"
+                    src="https://www.untitledui.com/logos/images/Layers.jpg"
+                  />
+                </Avatar>
+              </Field.Meta>
+            )}
+
+            <MessageBubble.Content variant={variant} className="fs-medium-20">
+              {message}
+            </MessageBubble.Content>
             <MessageBubble.Meta createdAt={MOCK_DATE} />
           </MessageBubble>
         </MessageBubble.Root>
       ))}
-    </React.Fragment>
+    </ScrollArea>
   ),
 };