@ndla/primitives 0.0.18 → 0.0.20

package/lib/Tabs.d.ts

@@ -39,10 +39,9 @@ declare const tabsRecipe: import("@ndla/styled-system/types").SlotRecipeRuntimeF
             };
             indicator: {
                 background: "transparent";
-                outline: "4px solid";
+                outline: "3px solid";
                 outlineColor: "stroke.default";
-                pointerEvents: "none";
-                outlineOffset: "-4px";
+                outlineOffset: "-3px";
                 _peerFocusVisible: {
                     height: "var(--height)";
                     width: "var(--width)";
@@ -54,14 +53,17 @@ declare const tabsRecipe: import("@ndla/styled-system/types").SlotRecipeRuntimeF
                     };
                 };
                 _horizontal: {
-                    bottom: "0";
-                    height: "2";
+                    top: "calc(var(--top) + var(--height) - 6px)";
+                    _peerFocusVisible: {
+                        top: "var(--top)";
+                    };
+                    height: "3";
                     width: "var(--width)";
                 };
                 _vertical: {
                     height: "var(--height)";
                     left: "0";
-                    width: "2";
+                    width: "3";
                 };
             };
             content: {

package/lib/Tabs.js

@@ -17,7 +17,9 @@ var _jsxRuntime = require("react/jsx-runtime");
  */
 
 const tabsRecipe = (0, _css.sva)({
-  slots: _react.tabsAnatomy.keys(),
+  // TODO: This still doesn't work. Need to figure out why we need to pass keys manually.
+  // slots: tabsAnatomy.keys(),
+  slots: ["root", "list", "trigger", "content", "indicator"],
   base: {
     root: {
       position: "relative",
@@ -34,7 +36,7 @@ const tabsRecipe = (0, _css.sva)({
       position: "relative",
       display: "flex",
       flexShrink: "0",
-      overflow: "auto",
+      flexWrap: "wrap",
       _horizontal: {
         flexDirection: "row"
       },
@@ -112,10 +114,9 @@ const tabsRecipe = (0, _css.sva)({
         },
         indicator: {
           background: "transparent",
-          outline: "4px solid",
+          outline: "3px solid",
           outlineColor: "stroke.default",
-          pointerEvents: "none",
-          outlineOffset: "-4px",
+          outlineOffset: "-3px",
           _peerFocusVisible: {
             height: "var(--height)",
             width: "var(--width)",
@@ -127,14 +128,17 @@ const tabsRecipe = (0, _css.sva)({
             }
           },
           _horizontal: {
-            bottom: "0",
-            height: "2",
+            top: "calc(var(--top) + var(--height) - 6px)",
+            _peerFocusVisible: {
+              top: "var(--top)"
+            },
+            height: "3",
             width: "var(--width)"
           },
           _vertical: {
             height: "var(--height)",
             left: "0",
-            width: "2"
+            width: "3"
           }
         },
         content: {

package/lib/index.d.ts

@@ -18,8 +18,8 @@ export { Button, IconButton, buttonBaseRecipe, buttonRecipe, iconButtonRecipe }
 export { CardRoot, CardHeading, CardContent, CardImage } from "./Card/Card";
 export type { CheckboxVariantProps, CheckboxRootProps } from "./Checkbox";
 export { CheckboxRoot, CheckboxIndicator, CheckboxLabel, CheckboxControl, CheckboxGroup, CheckboxHiddenInput, } from "./Checkbox";
-export type { ComboboxVariantProps, ComboboxRootProps, ComboboxClearTriggerProps, ComboboxContentProps, ComboboxControlProps, ComboboxInputProps, ComboboxItemGroupLabelProps, ComboboxItemGroupProps, ComboboxItemProps, ComboboxItemIndicatorProps, ComboboxItemTextProps, ComboboxLabelProps, ComboboxPositionerProps, ComboboxTriggerProps, } from "./Combobox";
-export { ComboboxRoot, ComboboxClearTrigger, ComboboxContent, ComboboxControl, ComboboxInput, ComboboxItemGroupLabel, ComboboxItemGroup, ComboboxItemIndicator, ComboboxItem, ComboboxItemText, ComboboxLabel, ComboboxPositioner, ComboboxTrigger, } from "./Combobox";
+export type { ComboboxVariantProps, ComboboxRootProps, ComboboxClearTriggerProps, ComboboxContentProps, ComboboxControlProps, ComboboxInputProps, ComboboxItemGroupLabelProps, ComboboxItemGroupProps, ComboboxItemProps, ComboboxItemIndicatorProps, ComboboxItemTextProps, ComboboxLabelProps, ComboboxPositionerProps, ComboboxTriggerProps, ComboboxListProps, } from "./Combobox";
+export { ComboboxRoot, ComboboxClearTrigger, ComboboxContent, ComboboxControl, ComboboxInput, ComboboxItemGroupLabel, ComboboxItemGroup, ComboboxItemIndicator, ComboboxItem, ComboboxItemText, ComboboxLabel, ComboboxPositioner, ComboboxTrigger, ComboboxList, } from "./Combobox";
 export type { DialogVariantProps, DialogRootProps } from "./Dialog";
 export { DialogRoot, DialogBackdrop, DialogStandaloneContent, DialogPositioner, DialogContent, DialogDescription, DialogTitle, DialogTrigger, DialogCloseTrigger, DialogHeader, DialogBody, } from "./Dialog";
 export type { ExpandableBoxProps, ExpandableBoxSummaryProps } from "./ExpandableBox";
@@ -31,6 +31,8 @@ export type { FigureSize, FigureVariantProps, FigureProps, FigureFloat } from ".
 export { Figure } from "./Figure";
 export type { FramedContentVariantProps, FramedContentProps } from "./FramedContent";
 export { FramedContent } from "./FramedContent";
+export type { HeroVariantProps, HeroVariant, HeroProps, HeroBackgroundProps, HeroContentProps } from "./Hero";
+export { Hero, HeroBackground, HeroContent } from "./Hero";
 export type { ImageCrop, ImageFocalPoint, PictureProps, ImgProps, ImageProps } from "./Image";
 export { Picture, Img, Image, makeSrcQueryString, getSrcSet } from "./Image";
 export { Input, FieldInput, InputContainer, TextArea, FieldTextArea } from "./Input";
@@ -49,7 +51,7 @@ export { PopoverRoot, PopoverAnchor, PopoverArrowStandalone, PopoverArrow, Popov
 export type { RadioGroupRootProps } from "./RadioGroup";
 export { RadioGroupRoot, RadioGroupIndicator, RadioGroupItemControl, RadioGroupItem, RadioGroupItemText, RadioGroupLabel, RadioGroupItemHiddenInput, } from "./RadioGroup";
 export type { SelectRootProps } from "./Select";
-export { SelectRoot, SelectClearTrigger, SelectContent, SelectControl, SelectIndicator, SelectItemGroupLabel, SelectItemGroup, SelectItemIndicator, SelectItem, SelectItemText, SelectLabel, SelectPositioner, SelectTrigger, SelectValueText, } from "./Select";
+export { SelectRoot, SelectClearTrigger, SelectContent, SelectControl, SelectIndicator, SelectItemGroupLabel, SelectItemGroup, SelectItemIndicator, SelectItem, SelectItemText, SelectLabel, SelectPositioner, SelectTrigger, SelectValueText, SelectList, } from "./Select";
 export type { SkeletonProps } from "./Skeleton";
 export { Skeleton } from "./Skeleton";
 export type { SliderRootProps } from "./Slider";

package/lib/index.js

@@ -171,6 +171,12 @@ Object.defineProperty(exports, "ComboboxLabel", {
     return _Combobox.ComboboxLabel;
   }
 });
+Object.defineProperty(exports, "ComboboxList", {
+  enumerable: true,
+  get: function () {
+    return _Combobox.ComboboxList;
+  }
+});
 Object.defineProperty(exports, "ComboboxPositioner", {
   enumerable: true,
   get: function () {
@@ -327,6 +333,24 @@ Object.defineProperty(exports, "Heading", {
     return _Text.Heading;
   }
 });
+Object.defineProperty(exports, "Hero", {
+  enumerable: true,
+  get: function () {
+    return _Hero.Hero;
+  }
+});
+Object.defineProperty(exports, "HeroBackground", {
+  enumerable: true,
+  get: function () {
+    return _Hero.HeroBackground;
+  }
+});
+Object.defineProperty(exports, "HeroContent", {
+  enumerable: true,
+  get: function () {
+    return _Hero.HeroContent;
+  }
+});
 Object.defineProperty(exports, "IconButton", {
   enumerable: true,
   get: function () {
@@ -663,6 +687,12 @@ Object.defineProperty(exports, "SelectLabel", {
     return _Select.SelectLabel;
   }
 });
+Object.defineProperty(exports, "SelectList", {
+  enumerable: true,
+  get: function () {
+    return _Select.SelectList;
+  }
+});
 Object.defineProperty(exports, "SelectPositioner", {
   enumerable: true,
   get: function () {
@@ -1002,6 +1032,7 @@ var _FieldErrorMessage = require("./FieldErrorMessage");
 var _FieldHelper = require("./FieldHelper");
 var _Figure = require("./Figure");
 var _FramedContent = require("./FramedContent");
+var _Hero = require("./Hero");
 var _Image = require("./Image");
 var _Input = require("./Input");
 var _Label = require("./Label");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/primitives",
-  "version": "0.0.18",
+  "version": "0.0.20",
   "description": "Primitive components for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -33,7 +33,7 @@
     "@ndla/util": "^4.1.0"
   },
   "devDependencies": {
-    "@ndla/preset-panda": "^0.0.11",
+    "@ndla/preset-panda": "^0.0.12",
     "@pandacss/dev": "^0.42.0"
   },
   "peerDependencies": {
@@ -43,5 +43,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6fdfbed9f18bbd725c837fb74de2f093e80d5605"
+  "gitHead": "557f718324916e39e3b04d6a7196679d31056e00"
 }