@vygruppen/spor-react 11.3.10 → 12.0.0

package/src/button/IconButton.tsx

@@ -1,25 +1,26 @@
 import {
   IconButton as ChakraIconButton,
-  IconButtonProps as ChakraIconButtonProps,
-  forwardRef,
+  type IconButtonProps as ChakraIconButtonProps,
 } from "@chakra-ui/react";
-import React from "react";
-import { ColorSpinner } from "..";
-import { As } from "@chakra-ui/system";
+import React, { forwardRef, PropsWithChildren } from "react";
+import { ButtonVariantProps, ColorSpinner } from "..";
+
+export type IconButtonProps = Exclude<
+  ChakraIconButtonProps,
+  "variant" | "spinner" | "icon"
+> &
+  PropsWithChildren<ButtonVariantProps> & {
+    /** The button variant.
+     *
+     */
+    variant: "primary" | "secondary" | "tertiary" | "ghost" | "floating";
+    spinner?: React.JSX.Element;
+    icon?: React.JSX.Element;
+    loading?: boolean;
+    download?: string;
+    href?: string;
+  };
 
-export type IconButtonProps = Omit<ChakraIconButtonProps, "variant"> & {
-  /** The button variant.
-   *
-   * "control" is deprecated
-   */
-  variant:
-    | "control"
-    | "primary"
-    | "secondary"
-    | "tertiary"
-    | "ghost"
-    | "floating";
-};
 /**
  * An icon-only button.
  *
@@ -27,7 +28,6 @@ export type IconButtonProps = Omit<ChakraIconButtonProps, "variant"> & {
  *
  * There are several icon button variants. You can specify which one you want with the `variant` prop. The available variants are:
  *
- * - `control`: This button is used for ticket controls only.
  * - `primary`: This is our main button. It's used for the main actions in a view, like a call to action. There should only be a single primary button in each view.
  * - `secondary`: Used for secondary actions in a view, and when you need to make several actions available at the same time.
  * - `tertiary`: Used for additional choices, like a less important secondary action.
@@ -55,15 +55,19 @@ export type IconButtonProps = Omit<ChakraIconButtonProps, "variant"> & {
  * />
  * ```
  */
-export const IconButton = forwardRef<IconButtonProps, As>(
-  ({ ...props }, ref) => (
-    <ChakraIconButton
-      title={props["aria-label"]}
-      {...props}
-      spinner={
-        <ColorSpinner width="80%" height="80%" marginX={1} marginTop={1} />
-      }
-      ref={ref}
-    />
-  ),
+export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
+  (props, ref) => {
+    const { icon, size = "sm", loading = false, ...rest } = props;
+    return (
+      <ChakraIconButton
+        aria-label={props["aria-label"]}
+        size={size}
+        ref={ref}
+        position={"relative"}
+        {...rest}
+      >
+        {loading ? <ColorSpinner width="2em" height="2em" margin={1} /> : icon}
+      </ChakraIconButton>
+    );
+  },
 );

package/src/button/index.tsx

@@ -3,3 +3,4 @@ export * from "./ButtonGroup";
 export * from "./CloseButton";
 export * from "./FloatingActionButton";
 export * from "./IconButton";
+export * from "./Clipboard";

package/src/color-mode/color-mode.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import type { IconButtonProps } from "@chakra-ui/react";
+import { ClientOnly, IconButton, Skeleton } from "@chakra-ui/react";
+import { ThemeProvider, useTheme } from "next-themes";
+import type { ThemeProviderProps } from "next-themes";
+import * as React from "react";
+import { LuMoon, LuSun } from "react-icons/lu";
+
+export interface ColorModeProviderProps extends ThemeProviderProps {}
+
+export function ColorModeProvider(props: ColorModeProviderProps) {
+  return (
+    <ThemeProvider attribute="class" disableTransitionOnChange {...props} />
+  );
+}
+
+export type ColorMode = "light" | "dark";
+
+export interface UseColorModeReturn {
+  colorMode: ColorMode;
+  setColorMode: (colorMode: ColorMode) => void;
+  toggleColorMode: () => void;
+}
+
+export function useColorMode(): UseColorModeReturn {
+  const { resolvedTheme, setTheme } = useTheme();
+  const toggleColorMode = () => {
+    setTheme(resolvedTheme === "light" ? "dark" : "light");
+  };
+  return {
+    colorMode: resolvedTheme as ColorMode,
+    setColorMode: setTheme,
+    toggleColorMode,
+  };
+}
+
+export function useColorModeValue<T>(light: T, dark: T) {
+  const { colorMode } = useColorMode();
+  return colorMode === "dark" ? dark : light;
+}
+
+export function ColorModeIcon() {
+  const { colorMode } = useColorMode();
+  return colorMode === "dark" ? <LuMoon /> : <LuSun />;
+}
+
+interface ColorModeButtonProps extends Omit<IconButtonProps, "aria-label"> {}
+
+export const ColorModeButton = React.forwardRef<
+  HTMLButtonElement,
+  ColorModeButtonProps
+>(function ColorModeButton(props, ref) {
+  const { toggleColorMode } = useColorMode();
+  return (
+    <ClientOnly fallback={<Skeleton boxSize="8" />}>
+      <IconButton
+        onClick={toggleColorMode}
+        variant="ghost"
+        aria-label="Toggle color mode"
+        size="sm"
+        ref={ref}
+        {...props}
+        css={{
+          _icon: {
+            width: "5",
+            height: "5",
+          },
+        }}
+      >
+        <ColorModeIcon />
+      </IconButton>
+    </ClientOnly>
+  );
+});

package/src/color-mode/index.ts

@@ -0,0 +1 @@
+export * from "./color-mode";

package/src/datepicker/Calendar.tsx

@@ -1,20 +1,25 @@
-import { Box, ResponsiveValue } from "@chakra-ui/react";
-import { DateValue, createCalendar } from "@internationalized/date";
+"use client";
+
+import { Box, useSlotRecipe } from "@chakra-ui/react";
+import { createCalendar } from "@internationalized/date";
 import React from "react";
 import {
   CalendarProps as ReactAriaCalendarProps,
   useCalendar,
+  DateValue,
 } from "react-aria";
 import { useCalendarState } from "react-stately";
 import { createTexts, useTranslation } from "../i18n";
 import { CalendarGrid } from "./CalendarGrid";
 import { CalendarHeader } from "./CalendarHeader";
 import { useCurrentLocale } from "./utils";
+import { CalendarVariants } from "./types";
+import { datePickerSlotRecipe } from "@/theme/slot-recipes/datepicker";
 
-type CalendarProps = ReactAriaCalendarProps<DateValue> & {
-  showYearNavigation?: boolean;
-  variant: ResponsiveValue<"base" | "floating" | "ghost">;
-};
+type CalendarProps = ReactAriaCalendarProps<DateValue> &
+  CalendarVariants & {
+    showYearNavigation?: boolean;
+  };
 export function Calendar({
   showYearNavigation,
   variant,
@@ -27,7 +32,11 @@ export function Calendar({
     locale,
     createCalendar,
   });
-
+  const recipe = useSlotRecipe({
+    key: "datePicker",
+    recipe: datePickerSlotRecipe,
+  });
+  const styles = recipe({ variant });
   const { calendarProps } = useCalendar(props, state);
   const calendarAriaLabel = calendarProps["aria-label"];
 
@@ -35,7 +44,7 @@ export function Calendar({
     t(texts.calendar) + (calendarAriaLabel ? ` ${calendarAriaLabel}` : "");
 
   return (
-    <Box {...calendarProps} aria-label={ariaLabel}>
+    <Box {...calendarProps} aria-label={ariaLabel} css={styles.box}>
       <CalendarHeader state={state} showYearNavigation={showYearNavigation} />
       <CalendarGrid variant={variant} state={state} />
     </Box>

package/src/datepicker/CalendarCell.tsx

@@ -1,20 +1,25 @@
-import { Box, ResponsiveValue, useMultiStyleConfig } from "@chakra-ui/react";
+"use client";
+
+import { Box, ConditionalValue, useSlotRecipe } from "@chakra-ui/react";
 import {
   CalendarDate,
   DateValue,
   isSameMonth,
   isToday,
 } from "@internationalized/date";
-import React, { useEffect, useRef } from "react";
+import React, { PropsWithChildren, useEffect, useRef } from "react";
 import { useCalendarCell } from "react-aria";
 import { CalendarState, RangeCalendarState } from "react-stately";
+import { DatePickerVariantProps } from "./DatePicker";
+import { datePickerSlotRecipe } from "../theme/slot-recipes/datepicker";
+import { CalendarVariants } from "./types";
 
-type CalendarCellProps = {
-  variant: ResponsiveValue<"base" | "floating" | "ghost">;
-  state: CalendarState | RangeCalendarState;
-  date: CalendarDate;
-  currentMonth: DateValue;
-};
+type CalendarCellProps = PropsWithChildren<DatePickerVariantProps> &
+  CalendarVariants & {
+    state: CalendarState | RangeCalendarState;
+    date: CalendarDate;
+    currentMonth: DateValue;
+  };
 export function CalendarCell({
   state,
   date,
@@ -32,7 +37,11 @@ export function CalendarCell({
   } = useCalendarCell({ date }, state, ref);
 
   const isOutsideMonth = !isSameMonth(currentMonth, date);
-  const styles = useMultiStyleConfig("Datepicker", { variant });
+  const recipe = useSlotRecipe({
+    key: "datePicker",
+    recipe: datePickerSlotRecipe,
+  });
+  const styles = recipe({ variant });
 
   const stateProps: Record<string, any> = {};
   if (isSelected) {
@@ -64,16 +73,14 @@ export function CalendarCell({
   }, []);
 
   return (
-    <Box as="td" {...cellProps} textAlign="center" sx={styles.cell}>
+    <Box as="td" {...cellProps} textAlign="center" css={styles.cell}>
       <Box
         as="button"
-        type="button"
         {...buttonProps}
         {...stateProps}
         ref={ref}
-        sx={styles.dateCell}
+        css={styles.dateCell}
         hidden={isOutsideVisibleRange}
-        width="100%"
       >
         {date.day}
       </Box>

package/src/datepicker/CalendarGrid.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { endOfMonth, getWeeksInMonth } from "@internationalized/date";
 import React from "react";
 import { AriaCalendarGridProps, useCalendarGrid } from "react-aria";
@@ -6,7 +8,9 @@ import { Language, useTranslation } from "../i18n";
 import { Text } from "../typography";
 import { CalendarCell } from "./CalendarCell";
 import { useCurrentLocale } from "./utils";
-import { ResponsiveValue, useMultiStyleConfig } from "@chakra-ui/react";
+import { Box, useSlotRecipe } from "@chakra-ui/react";
+import { datePickerSlotRecipe } from "../theme/slot-recipes/datepicker";
+import { CalendarVariants } from "./types";
 
 const weekDays: Record<Language, string[]> = {
   nb: ["Ma", "Ti", "On", "To", "Fr", "Lø", "Sø"],
@@ -15,11 +19,11 @@ const weekDays: Record<Language, string[]> = {
   en: ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"],
 };
 
-type CalendarGridProps = AriaCalendarGridProps & {
-  variant: ResponsiveValue<"base" | "floating" | "ghost">;
-  state: CalendarState | RangeCalendarState;
-  offset?: { months?: number };
-};
+type CalendarGridProps = AriaCalendarGridProps &
+  CalendarVariants & {
+    state: CalendarState | RangeCalendarState;
+    offset?: { months?: number };
+  };
 export function CalendarGrid({
   state,
   variant,
@@ -40,10 +44,14 @@ export function CalendarGrid({
   // Get the number of weeks in the month so we can render the proper number of rows.
   const weeksInMonth = getWeeksInMonth(state.visibleRange.start, locale);
   const weeksInMonthRange = new Array(weeksInMonth).fill(0).map((_, i) => i);
-  const styles = useMultiStyleConfig("Datepicker", { variant });
+  const recipe = useSlotRecipe({
+    key: "datePicker",
+    recipe: datePickerSlotRecipe,
+  });
+  const styles = recipe({ variant });
 
   return (
-    <table {...gridProps}>
+    <Box as="table" {...gridProps} css={styles.box}>
       <thead {...headerProps}>
         <tr>
           {weekDays[language].map((day, index) => {
@@ -51,7 +59,7 @@ export function CalendarGrid({
               <Text
                 as="th"
                 key={index}
-                sx={index < 5 ? styles.weekdays : styles.weekend}
+                css={index < 5 ? styles.weekdays : styles.weekend}
                 variant="sm"
               >
                 {day}
@@ -81,6 +89,6 @@ export function CalendarGrid({
           </tr>
         ))}
       </tbody>
-    </table>
+    </Box>
   );
 }

package/src/datepicker/CalendarHeader.tsx

@@ -1,3 +1,4 @@
+"use client";
 import { Box, Flex } from "@chakra-ui/react";
 import { getLocalTimeZone } from "@internationalized/date";
 import {
@@ -110,6 +111,7 @@ export const CalendarNavigator = ({
         fontWeight="bold"
         flex="1"
         textAlign="center"
+        color={"core.text"}
       >
         {capitalize(title)}
       </Box>

package/src/datepicker/CalendarNavigationButton.tsx

@@ -1,3 +1,4 @@
+"use client";
 import React, { useRef } from "react";
 import { AriaButtonProps, useButton } from "react-aria";
 import { IconButton } from "..";

package/src/datepicker/CalendarTriggerButton.tsx

@@ -1,53 +1,51 @@
-import {
-  Box,
-  PopoverAnchor,
-  useMultiStyleConfig,
-  forwardRef,
-  ResponsiveValue,
-} from "@chakra-ui/react";
+"use client";
+
+import { BoxProps, PopoverAnchor, useSlotRecipe } from "@chakra-ui/react";
 import { CalendarOutline24Icon } from "@vygruppen/spor-icon-react";
-import React, { KeyboardEventHandler } from "react";
+import React, { forwardRef, PropsWithChildren } from "react";
 import { AriaButtonProps } from "react-aria";
-import { IconButton, createTexts, useTranslation } from "..";
-import { As } from "@chakra-ui/system";
-
-type CalendarTriggerButtonProps = AriaButtonProps<"button"> & {
-  variant: ResponsiveValue<"base" | "floating" | "ghost">;
-  isDisabled?: boolean;
-  ariaLabelledby?: string;
-};
-export const CalendarTriggerButton = forwardRef<CalendarTriggerButtonProps, As>(
-  ({ variant, isDisabled, ariaLabelledby, ...buttonProps }, ref) => {
-    const { t } = useTranslation();
-    const styles = useMultiStyleConfig("Datepicker", { variant });
+import {
+  createTexts,
+  DatePickerVariantProps,
+  IconButton,
+  useTranslation,
+} from "..";
+import { datePickerSlotRecipe } from "../theme/slot-recipes/datepicker";
+import { CalendarVariants } from "./types";
 
-    const { onPress, ...filteredButtonProps } = buttonProps;
+type CalendarTriggerButtonProps = AriaButtonProps<"button"> &
+  PropsWithChildren<DatePickerVariantProps> &
+  BoxProps &
+  CalendarVariants & {
+    disabled?: boolean;
+    ariaLabelledby?: string;
+  };
+export const CalendarTriggerButton = forwardRef<
+  HTMLDivElement,
+  CalendarTriggerButtonProps
+>(({ variant, disabled, ariaLabelledby, ...buttonProps }, ref) => {
+  const { t } = useTranslation();
+  const recipe = useSlotRecipe({
+    key: "datePicker",
+    recipe: datePickerSlotRecipe,
+  });
+  const styles = recipe({ variant });
 
-    const handleCommand: KeyboardEventHandler = (event) => {
-      if (event.key === "Enter" || event.key === " ") {
-        event.preventDefault();
-        onPress?.(event as any);
-      }
-    };
+  const { onPress, ...filteredButtonProps } = buttonProps;
 
-    return (
-      <PopoverAnchor>
-        <IconButton
-          ref={ref}
-          role="button"
-          icon={<CalendarOutline24Icon />}
-          aria-label={t(texts.openCalendar)}
-          sx={styles.calendarTriggerButton}
-          variant="ghost"
-          {...filteredButtonProps}
-          isDisabled={isDisabled}
-          onKeyDown={handleCommand}
-          aria-labelledby={ariaLabelledby}
-        />
-      </PopoverAnchor>
-    );
-  },
-);
+  return (
+    <PopoverAnchor {...buttonProps}>
+      <IconButton
+        icon={<CalendarOutline24Icon />}
+        aria-label={t(texts.openCalendar)}
+        css={styles.calendarTriggerButton}
+        variant="ghost"
+        disabled={disabled}
+        aria-labelledby={ariaLabelledby}
+      />
+    </PopoverAnchor>
+  );
+});
 
 const texts = createTexts({
   openCalendar: {

package/src/datepicker/DateField.tsx

@@ -1,12 +1,15 @@
-import { Box, Flex, FormLabel, useMultiStyleConfig } from "@chakra-ui/react";
+"use client";
+import { Box, Flex, useSlotRecipe } from "@chakra-ui/react";
 import { DateValue, GregorianCalendar } from "@internationalized/date";
 import { DOMAttributes, FocusableElement } from "@react-types/shared";
-import React, { RefObject, forwardRef, useId, useRef } from "react";
+import React, { PropsWithChildren, RefObject, forwardRef, useRef } from "react";
 import { AriaDateFieldProps, useDateField } from "react-aria";
 import { DateSegment, useDateFieldState } from "react-stately";
 import { DateTimeSegment } from "./DateTimeSegment";
 import { useCurrentLocale } from "./utils";
 import { createTexts, useTranslation } from "../i18n";
+import { DatePickerVariantProps } from "./DatePicker";
+import { datePickerSlotRecipe } from "../theme/slot-recipes/datepicker";
 
 function createCalendar(identifier: string) {
   switch (identifier) {
@@ -17,16 +20,21 @@ function createCalendar(identifier: string) {
   }
 }
 
-type DateFieldProps = AriaDateFieldProps<DateValue> & {
-  label?: React.ReactNode;
-  labelProps?: DOMAttributes<FocusableElement>;
-  name?: string;
-  labelId?: string;
-};
+type DateFieldProps = AriaDateFieldProps<DateValue> &
+  PropsWithChildren<DatePickerVariantProps> & {
+    label?: React.ReactNode;
+    labelProps?: DOMAttributes<FocusableElement>;
+    name?: string;
+    labelId?: string;
+  };
 export const DateField = forwardRef<HTMLDivElement, DateFieldProps>(
   ({ labelId, ...props }, externalRef) => {
     const locale = useCurrentLocale();
-    const styles = useMultiStyleConfig("Datepicker", {});
+    const recipe = useSlotRecipe({
+      key: "datePicker",
+      recipe: datePickerSlotRecipe,
+    });
+    const styles = recipe({});
     const state = useDateFieldState({
       ...props,
       locale,
@@ -46,14 +54,15 @@ export const DateField = forwardRef<HTMLDivElement, DateFieldProps>(
     return (
       <Box minWidth="6rem" width="100%">
         {props.label && (
-          <FormLabel
-            sx={styles.inputLabel}
+          <Box
+            as="label"
+            css={styles.inputLabel}
             position="absolute"
             paddingTop="2px"
             id={labelId}
           >
             {props.label}
-          </FormLabel>
+          </Box>
         )}
         <Flex {...fieldProps} ref={ref} paddingTop="3" paddingBottom="0.5">
           {state.segments.map((segment, i) => (