@vygruppen/spor-react 12.5.5 → 12.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vygruppen/spor-react",
-  "version": "12.5.5",
+  "version": "12.6.0",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",

package/src/accordion/Expandable.tsx

@@ -28,7 +28,7 @@ export const Expandable = forwardRef<HTMLDivElement, ExpandableProps>(
   (props, ref) => {
     const { title, children, headingLevel, startElement, ...rest } = props;
     return (
-      <Accordion {...props} ref={ref} {...rest}>
+      <Accordion ref={ref} {...rest}>
         <ExpandableItem
           title={title}
           headingLevel={headingLevel}

package/src/accordion/types.ts

@@ -48,8 +48,10 @@ export type AccordionItemContentProps = ChakraAccordion.ItemContentProps & {
   children?: React.ReactNode;
 };
 
-export type ExpandableProps = AccordionProps &
-  AccordionItemTriggerProps &
+export type ExpandableProps = Omit<
+  AccordionProps & AccordionItemTriggerProps,
+  "title"
+> &
   HeadingLevel & {
     title: ReactNode;
   };

package/src/alert/Alert.tsx

@@ -70,7 +70,7 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>((props, ref) => {
         <HStack gap="1" alignItems="flex-start">
           {showIndicator && (
             <ChakraAlert.Indicator asChild>
-              <AlertIcon variant={props.variant} customIcon={icon} />
+              <AlertIcon variant={props.variant ?? "info"} customIcon={icon} />
             </ChakraAlert.Indicator>
           )}
           {title && (

package/src/datepicker/Calendar.tsx

@@ -9,8 +9,6 @@ import {
 } from "react-aria";
 import { useCalendarState } from "react-stately";
 
-import { datePickerSlotRecipe } from "@/theme/slot-recipes/datepicker";
-
 import { createTexts, useTranslation } from "../i18n";
 import { CalendarGrid } from "./CalendarGrid";
 import { CalendarHeader } from "./CalendarHeader";
@@ -33,9 +31,9 @@ export function Calendar({
     locale,
     createCalendar,
   });
+
   const recipe = useSlotRecipe({
     key: "datePicker",
-    recipe: datePickerSlotRecipe,
   });
   const styles = recipe({ variant });
   const { calendarProps } = useCalendar(props, state);

package/src/datepicker/CalendarCell.tsx

@@ -11,7 +11,6 @@ import { PropsWithChildren, useEffect, useRef } from "react";
 import { useCalendarCell } from "react-aria";
 import { CalendarState, RangeCalendarState } from "react-stately";
 
-import { datePickerSlotRecipe } from "../theme/slot-recipes/datepicker";
 import { DatePickerVariantProps } from "./DatePicker";
 import { CalendarVariants } from "./types";
 
@@ -38,9 +37,9 @@ export function CalendarCell({
   } = useCalendarCell({ date }, state, ref);
 
   const isOutsideMonth = !isSameMonth(currentMonth, date);
+
   const recipe = useSlotRecipe({
     key: "datePicker",
-    recipe: datePickerSlotRecipe,
   });
   const styles = recipe({ variant });
 

package/src/datepicker/CalendarGrid.tsx

@@ -6,7 +6,6 @@ import { AriaCalendarGridProps, useCalendarGrid } from "react-aria";
 import { CalendarState, RangeCalendarState } from "react-stately";
 
 import { Language, useTranslation } from "../i18n";
-import { datePickerSlotRecipe } from "../theme/slot-recipes/datepicker";
 import { Text } from "../typography";
 import { CalendarCell } from "./CalendarCell";
 import { CalendarVariants } from "./types";
@@ -46,9 +45,9 @@ export function CalendarGrid({
   const weeksInMonthRange = Array.from({ length: weeksInMonth })
     .fill(0)
     .map((_, i) => i);
+
   const recipe = useSlotRecipe({
     key: "datePicker",
-    recipe: datePickerSlotRecipe,
   });
   const styles = recipe({ variant });
 

package/src/datepicker/CalendarTriggerButton.tsx

@@ -11,7 +11,6 @@ import {
   IconButton,
   useTranslation,
 } from "..";
-import { datePickerSlotRecipe } from "../theme/slot-recipes/datepicker";
 import { CalendarVariants } from "./types";
 
 type CalendarTriggerButtonProps = AriaButtonProps<"button"> &
@@ -26,9 +25,9 @@ export const CalendarTriggerButton = forwardRef<
   CalendarTriggerButtonProps
 >(({ variant, disabled, ariaLabelledby, ...buttonProps }, ref) => {
   const { t } = useTranslation();
+
   const recipe = useSlotRecipe({
     key: "datePicker",
-    recipe: datePickerSlotRecipe,
   });
   const styles = recipe({ variant });
 

package/src/datepicker/DateField.tsx

@@ -7,7 +7,6 @@ import { AriaDateFieldProps, useDateField } from "react-aria";
 import { DateSegment, useDateFieldState } from "react-stately";
 
 import { createTexts, useTranslation } from "../i18n";
-import { datePickerSlotRecipe } from "../theme/slot-recipes/datepicker";
 import { DatePickerVariantProps } from "./DatePicker";
 import { DateTimeSegment } from "./DateTimeSegment";
 import { useCurrentLocale } from "./utils";
@@ -33,9 +32,9 @@ type DateFieldProps = AriaDateFieldProps<DateValue> &
 export const DateField = forwardRef<HTMLDivElement, DateFieldProps>(
   ({ labelId, ...props }, externalRef) => {
     const locale = useCurrentLocale();
+
     const recipe = useSlotRecipe({
       key: "datePicker",
-      recipe: datePickerSlotRecipe,
     });
     const styles = recipe({});
     const state = useDateFieldState({

package/src/datepicker/DatePicker.tsx

@@ -93,8 +93,8 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
 
     const recipe = useSlotRecipe({
       key: "datePicker",
-      recipe: datePickerSlotRecipe,
     });
+
     const styles = recipe({ variant });
     const locale = useCurrentLocale();
 

package/src/datepicker/DateRangePicker.tsx

@@ -20,7 +20,6 @@ import {
 import { useDateRangePickerState } from "react-stately";
 
 import { Field, FieldBaseProps } from "../input/Field";
-import { datePickerSlotRecipe } from "../theme/slot-recipes/datepicker";
 import { CalendarTriggerButton } from "./CalendarTriggerButton";
 import { DateField } from "./DateField";
 import { DatePickerVariantProps } from "./DatePicker";
@@ -94,7 +93,6 @@ type DateRangePickerProps = Omit<
 
   const recipe = useSlotRecipe({
     key: "datePicker",
-    recipe: datePickerSlotRecipe,
   });
   const styles = recipe({ variant });
   const locale = useCurrentLocale();

package/src/datepicker/DateTimeSegment.tsx

@@ -5,7 +5,6 @@ import { useDateSegment } from "react-aria";
 import { DateFieldState, DateSegment } from "react-stately";
 
 import { DatePickerVariantProps } from "..";
-import { datePickerSlotRecipe } from "../theme/slot-recipes/datepicker";
 
 type DateTimeSegmentProps = PropsWithChildren<DatePickerVariantProps> & {
   segment: DateSegment;
@@ -33,8 +32,8 @@ export const DateTimeSegment = forwardRef<HTMLDivElement, DateTimeSegmentProps>(
 
     const recipe = useSlotRecipe({
       key: "datePicker",
-      recipe: datePickerSlotRecipe,
     });
+
     const styles = recipe({
       isPlaceholder: segment.isPlaceholder,
       isEditable: segment.isEditable,

package/src/datepicker/RangeCalendar.tsx

@@ -8,8 +8,6 @@ import {
 } from "react-aria";
 import { useRangeCalendarState } from "react-stately";
 
-import { datePickerSlotRecipe } from "@/theme/slot-recipes/datepicker";
-
 import { CalendarGrid } from "./CalendarGrid";
 import { CalendarHeader } from "./CalendarHeader";
 import { CalendarVariants } from "./types";
@@ -26,9 +24,9 @@ export function RangeCalendar(props: RangeCalendarProps) {
     locale,
     createCalendar,
   });
+
   const recipe = useSlotRecipe({
     key: "datePicker",
-    recipe: datePickerSlotRecipe,
   });
   const styles = recipe({});
   const ref = useRef(null);

package/src/datepicker/StyledField.tsx

@@ -7,7 +7,6 @@ import {
 } from "@chakra-ui/react";
 import { forwardRef, PropsWithChildren } from "react";
 
-import { datePickerSlotRecipe } from "../theme/slot-recipes/datepicker";
 import { DatePickerVariantProps } from "./DatePicker";
 import { CalendarVariants } from "./types";
 
@@ -27,7 +26,6 @@ export const StyledField = forwardRef<HTMLDivElement, StyledFieldProps>(
 
     const recipe = useSlotRecipe({
       key: "datePicker",
-      recipe: datePickerSlotRecipe,
     });
     const styles = recipe({ variant });
 

package/src/datepicker/index.tsx

@@ -1,4 +1,5 @@
 export * from "./DatePicker";
 export * from "./DateRangePicker";
+export * from "./RangeCalendar";
 export * from "./TimePicker";
 export { Time } from "@internationalized/date";

package/src/input/NativeSelect.tsx

@@ -55,7 +55,7 @@ export const NativeSelect = React.forwardRef<
     ...rest
   } = props;
 
-  const recipe = useSlotRecipe({ recipe: nativeSelectSlotRecipe });
+  const recipe = useSlotRecipe({ key: "nativeSelect" });
   const styles = recipe({ variant });
 
   return (

package/src/input/NumericStepper.tsx

@@ -88,7 +88,7 @@ export const NumericStepper = React.forwardRef<
 
   const addButtonRef = useRef<HTMLButtonElement>(null);
   const { t } = useTranslation();
-  const recipe = useSlotRecipe({ recipe: numericStepperRecipe });
+  const recipe = useSlotRecipe({ key: "numericStepper" });
   const styles = recipe();
   const [value, onChange] = useControllableState<number>({
     value: valueProp,
@@ -209,7 +209,7 @@ const VerySmallButton = React.forwardRef<
   HTMLButtonElement,
   VerySmallButtonProps
 >((props, ref) => {
-  const recipe = useSlotRecipe({ recipe: numericStepperRecipe });
+  const recipe = useSlotRecipe({ key: "numericStepper" });
   const styles = recipe({ colorPalette: "default" });
   return (
     <IconButton

package/src/layout/Separator.tsx

@@ -26,7 +26,7 @@ export const Separator = forwardRef<HTMLDivElement, SeparatorProps>(
       orientation = "horizontal",
     } = props;
 
-    const recipe = useRecipe({ recipe: separatorRecipe });
+    const recipe = useRecipe({ key: "seperator" });
     const styles = recipe({ size, variant, orientation });
     return <ChakraSeparator css={styles} {...props} ref={ref} />;
   },

package/src/loader/Skeleton.tsx

@@ -26,7 +26,7 @@ export const SkeletonCircle = React.forwardRef<
   HTMLDivElement,
   SkeletonCircleProps
 >(function SkeletonCircle(props, ref) {
-  const recipe = useRecipe({ recipe: skeletonRecipe });
+  const recipe = useRecipe({ key: "skeleton" });
 
   const [recipeProps, restProps] = recipe.splitVariantProps({
     loading: true,
@@ -50,7 +50,7 @@ export type SkeletonTextProps = ChakraSkeletonProps &
 
 export const SkeletonText = forwardRef<HTMLDivElement, SkeletonTextProps>(
   function SkeletonText(props, ref) {
-    const recipe = useRecipe({ recipe: skeletonRecipe });
+    const recipe = useRecipe({ key: "skeleton" });
     const [recipeProps, restProps] = recipe.splitVariantProps({
       loading: true,
       variant: "pulse",
@@ -78,7 +78,7 @@ export type SkeletonProps = ChakraSkeletonProps & SkeletonVariantProps;
 
 export const Skeleton = forwardRef<HTMLDivElement, SkeletonTextProps>(
   function SkeletonText(props, ref) {
-    const recipe = useRecipe({ recipe: skeletonRecipe });
+    const recipe = useRecipe({ key: "skeleton" });
     const [recipeProps, restProps] = recipe.splitVariantProps({
       loading: true,
       variant: "pulse",

package/src/table/Table.tsx

@@ -35,7 +35,7 @@ export type TableProps = Exclude<ChakraTableProps, "variant" | "colorPalette"> &
 export const Table = forwardRef<HTMLTableElement, TableProps>((props, ref) => {
   const { variant = "ghost", size, colorPalette = "green", children } = props;
 
-  const recipe = useSlotRecipe({ recipe: tableSlotRecipe });
+  const recipe = useSlotRecipe({ key: "table" });
   const styles = recipe({ variant, size });
   return (
     <ChakraTable.Root

package/src/typography/Text.tsx

@@ -13,6 +13,31 @@ export type TextProps = Omit<ChakraTextProps, "textStyle"> & {
   variant?: ChakraTextProps["textStyle"];
 };
 
+/**
+ * Determines the correct props to pass to ChakraText,
+ * based on the user's intent and sensible defaults.
+ */
+function resolveTextProps({
+  variant,
+  fontSize,
+  lineHeight,
+}: Pick<TextProps, "variant" | "fontSize" | "lineHeight">) {
+  // If user provides a variant, use it (overrides fontSize/lineHeight)
+  if (variant) return { textStyle: variant };
+
+  // If neither fontSize nor lineHeight is provided, default to "sm"
+  if (!fontSize && !lineHeight) return { textStyle: "sm" };
+
+  // If only lineHeight is provided, default fontSize to "sm"
+  if (lineHeight && !fontSize) return { lineHeight, fontSize: "sm" };
+
+  // If only fontSize is provided, use it and let Chakra handle lineHeight
+  if (fontSize && !lineHeight) return { fontSize };
+
+  // If both are provided, use both
+  return { fontSize, lineHeight };
+}
+
 /**
  * A paragraph of text.
  *
@@ -20,10 +45,11 @@ export type TextProps = Omit<ChakraTextProps, "textStyle"> & {
  * <Text>Welcome to this paragraph of text.</Text>
  * ```
  */
-
 export const Text = forwardRef<HTMLParagraphElement, TextProps>(
   function Text(props, ref) {
-    const { variant = "sm", ...rest } = props;
-    return <ChakraText {...rest} textStyle={variant} ref={ref} />;
+    const { variant, lineHeight, fontSize, ...rest } = props;
+    const resolvedProps = resolveTextProps({ variant, fontSize, lineHeight });
+
+    return <ChakraText {...resolvedProps} {...rest} ref={ref} />;
   },
 );