@vygruppen/spor-react 12.3.4 → 12.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vygruppen/spor-react",
-  "version": "12.3.4",
+  "version": "12.4.0",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./src/index.d.ts",
@@ -15,7 +15,8 @@
   "dependencies": {
     "@ark-ui/react": "^4.9.2",
     "@chakra-ui/anatomy": "^2.3.4",
-    "@chakra-ui/react": "^3.9.0",
+    "@chakra-ui/react": "^3.19.1",
+    "@chakra-ui/cli": "^3.8.0",
     "@chakra-ui/react-use-size": "^2.1.0",
     "@chakra-ui/styled-system": "^2.12.0",
     "@chakra-ui/system": "^2.6.2",
@@ -36,11 +37,10 @@
     "react-swipeable": "^7.0.1",
     "usehooks-ts": "^3.1.0",
     "@vygruppen/spor-design-tokens": "4.0.6",
-    "@vygruppen/spor-icon-react": "4.0.4",
+    "@vygruppen/spor-icon-react": "4.1.0",
     "@vygruppen/spor-loader": "0.6.0"
   },
   "devDependencies": {
-    "@chakra-ui/cli": "^3.8.0",
     "@react-types/datepicker": "^3.10.0",
     "@react-types/shared": "^3.27.0",
     "@testing-library/jest-dom": "^6.4.5",

package/src/input/Select.tsx

@@ -2,13 +2,14 @@
 
 import type {
   CollectionItem,
-  RecipeVariantProps,
+  SelectLabelProps,
   SelectRootProps as ChakraSelectRootProps,
 } from "@chakra-ui/react";
 import {
   Box,
   Portal,
   Select as ChakraSelect,
+  useSelectContext,
   useSlotRecipe,
 } from "@chakra-ui/react";
 import {
@@ -16,18 +17,13 @@ import {
   DropdownDownFill24Icon,
 } from "@vygruppen/spor-icon-react";
 import * as React from "react";
-import { PropsWithChildren } from "react";
 
 import { CloseButton } from "@/button";
-import { selectSlotRecipe } from "@/theme/slot-recipes/select";
 
 import { Field, FieldProps } from "./Field";
 
-type SelectVariantProps = RecipeVariantProps<typeof selectSlotRecipe>;
-
 export type SelectProps = ChakraSelectRootProps &
-  FieldProps &
-  PropsWithChildren<SelectVariantProps> & {
+  FieldProps & {
     label?: string;
   };
 
@@ -94,13 +90,24 @@ export const Select = React.forwardRef<HTMLDivElement, SelectProps>(
     );
   },
 );
+
+export const SelectLabel = (props: SelectLabelProps) => {
+  const { value } = useSelectContext();
+
+  return (
+    <ChakraSelect.Label
+      {...props}
+      data-selected={value.length > 0 ? true : undefined}
+    />
+  );
+};
+
 Select.displayName = "Select";
 
-type SelectItemProps = ChakraSelect.ItemProps &
-  React.PropsWithChildren<SelectVariantProps> & {
-    children: React.ReactNode;
-    description?: React.ReactNode;
-  };
+type SelectItemProps = ChakraSelect.ItemProps & {
+  children: React.ReactNode;
+  description?: React.ReactNode;
+};
 
 export const SelectItem = React.forwardRef<HTMLDivElement, SelectItemProps>(
   (props, ref) => {
@@ -109,7 +116,7 @@ export const SelectItem = React.forwardRef<HTMLDivElement, SelectItemProps>(
     const styles = recipe();
     return (
       <ChakraSelect.Item item={item} {...rest} ref={ref} css={styles.item}>
-        <Box>
+        <Box width="100%">
           <ChakraSelect.ItemText display="flex">
             {children}
           </ChakraSelect.ItemText>
@@ -125,11 +132,10 @@ export const SelectItem = React.forwardRef<HTMLDivElement, SelectItemProps>(
 );
 SelectItem.displayName = "SelectItem";
 
-type SelectItemGroupProps = ChakraSelect.ItemGroupProps &
-  React.PropsWithChildren<SelectVariantProps> & {
-    label: React.ReactNode;
-    children: React.ReactNode;
-  };
+type SelectItemGroupProps = ChakraSelect.ItemGroupProps & {
+  label: React.ReactNode;
+  children: React.ReactNode;
+};
 
 export const SelectItemGroup = React.forwardRef<
   HTMLDivElement,
@@ -144,11 +150,10 @@ export const SelectItemGroup = React.forwardRef<
   );
 });
 
-type SelectTriggerProps = ChakraSelect.ControlProps &
-  React.PropsWithChildren<SelectVariantProps> & {
-    clearable?: boolean;
-    children?: React.ReactNode;
-  };
+type SelectTriggerProps = ChakraSelect.ControlProps & {
+  clearable?: boolean;
+  children?: React.ReactNode;
+};
 
 export const SelectTrigger = React.forwardRef<
   HTMLButtonElement,
@@ -172,10 +177,9 @@ export const SelectTrigger = React.forwardRef<
   );
 });
 
-type SelectClearTriggerProps = ChakraSelect.ClearTriggerProps &
-  React.PropsWithChildren<SelectVariantProps> & {
-    children?: React.ReactNode;
-  };
+type SelectClearTriggerProps = ChakraSelect.ClearTriggerProps & {
+  children?: React.ReactNode;
+};
 
 const SelectClearTrigger = React.forwardRef<
   HTMLButtonElement,
@@ -193,11 +197,10 @@ const SelectClearTrigger = React.forwardRef<
   );
 });
 
-type SelectContentProps = ChakraSelect.ContentProps &
-  React.PropsWithChildren<SelectVariantProps> & {
-    portalled?: boolean;
-    portalRef?: React.RefObject<HTMLElement>;
-  };
+type SelectContentProps = ChakraSelect.ContentProps & {
+  portalled?: boolean;
+  portalRef?: React.RefObject<HTMLElement>;
+};
 
 export const SelectContent = React.forwardRef<
   HTMLDivElement,
@@ -213,12 +216,11 @@ export const SelectContent = React.forwardRef<
   );
 });
 
-type SelectValueTextProps = Omit<ChakraSelect.ValueTextProps, "children"> &
-  React.PropsWithChildren<SelectVariantProps> & {
-    children?(items: CollectionItem[]): React.ReactNode;
-    placeholder?: string;
-    withPlaceholder?: boolean;
-  };
+type SelectValueTextProps = Omit<ChakraSelect.ValueTextProps, "children"> & {
+  children?(items: CollectionItem[]): React.ReactNode;
+  placeholder?: string;
+  withPlaceholder?: boolean;
+};
 
 export const SelectValueText = React.forwardRef<
   HTMLSpanElement,
@@ -253,6 +255,5 @@ export const SelectValueText = React.forwardRef<
   );
 });
 
-export const SelectLabel = ChakraSelect.Label;
 export const SelectItemText = ChakraSelect.ItemText;
 export const SelectRoot = ChakraSelect.Root;

package/src/theme/slot-recipes/alert.ts

@@ -40,9 +40,6 @@ export const alertSlotRecipe = defineSlotRecipe({
       border: "sm",
     },
     description: {
-      display: "flex",
-      alignItems: "flex-start",
-      gap: 1.5,
       color: "text",
     },
     content: {
@@ -54,6 +51,7 @@ export const alertSlotRecipe = defineSlotRecipe({
     title: {
       fontWeight: "bold",
     },
+    closeButton: {},
   },
   variants: {
     variant: {

package/src/theme/slot-recipes/select.ts

@@ -12,16 +12,6 @@ export const selectSlotRecipe = defineSlotRecipe({
       position: "relative",
       cursor: "pointer",
       zIndex: "dropdown",
-      "& [data-state='open']": {
-        "& + label": {
-          transform: ["scale(0.825) translateY(-10px)"],
-        },
-      },
-      "&:has(button span:not(:empty))": {
-        "& label": {
-          transform: ["scale(0.825) translateY(-10px)"],
-        },
-      },
     },
     label: {
       fontSize: ["mobile.sm", "desktop.sm"],
@@ -29,7 +19,13 @@ export const selectSlotRecipe = defineSlotRecipe({
       left: 3,
       zIndex: 0,
       position: "absolute",
+      color: "text",
       marginY: 2,
+
+      _selected: {
+        transform: ["scale(0.825) translateY(-10px)"],
+      },
+
       transitionProperty: "transform",
       transitionDuration: "fast",
       transformOrigin: "top left",
@@ -41,8 +37,10 @@ export const selectSlotRecipe = defineSlotRecipe({
       appearance: "none",
       width: "100%",
       height: 8,
+      color: "text",
       paddingY: 1.5,
       paddingX: 3,
+
       justifyContent: "space-between",
       alignItems: "center",
       fontSize: "mobile.md",
@@ -64,6 +62,7 @@ export const selectSlotRecipe = defineSlotRecipe({
       top: "0",
       bottom: "0",
       paddingX: 2,
+
       pointerEvents: "none",
     },
     indicator: {