@basic-ui/material 0.1.14 → 0.1.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@basic-ui/material",
-  "version": "0.1.14",
+  "version": "0.1.15",
   "description": "Accessible React Components used as building blocks for UI patterns",
   "author": "Lucas Terra <lucasterra7@gmail.com>",
   "license": "MIT",
@@ -14,20 +14,20 @@
   ],
   "sideEffects": false,
   "scripts": {
-    "build": "concurrently \"yarn:build:*\"",
-    "build:dts": "tsc -p ./tsconfig.json --isolatedModules false --declaration --emitDeclarationOnly",
-    "build:cjs": "rollup -c ../../rollup.config.js",
-    "build:esm": "cross-env NODE_ENV=production BABEL_ENV=esm babel --config-file ../../babel.config.js ./src --extensions \".ts,.tsx,.js,.jsx\" --source-maps --out-dir ./build/esm --ignore \"**/*.story.tsx,**/*.story.ts,**/*.test.tsx,**/*.test.ts\"",
-    "build-storybook": "build-storybook -c ../../scripts/storybook -o .out",
-    "lint": "eslint 'src/**/*.{js,jsx,ts,tsx}' --fix",
-    "format": "prettier --write '**/*.js'",
-    "start": "yarn run -T start-storybook -p 9001 -c ./scripts/storybook",
-    "serve": "http-server .out",
-    "typecheck": "tsc --noEmit",
+    "build": "run -T concurrently \"yarn:build:*\"",
+    "build:dts": "run -T tsc -p ./tsconfig.json --isolatedModules false --declaration --emitDeclarationOnly",
+    "build:cjs": "run -T rollup -c ../../rollup.config.js",
+    "build:esm": "run -T cross-env NODE_ENV=production BABEL_ENV=esm run -T babel --config-file ../../babel.config.js ./src --extensions \".ts,.tsx,.js,.jsx\" --source-maps --out-dir ./build/esm --ignore \"**/*.story.tsx,**/*.story.ts,**/*.test.tsx,**/*.test.ts\"",
+    "build-storybook": "run -T build-storybook -c ../../scripts/storybook -o .out",
+    "lint": "run -T eslint 'src/**/*.{js,jsx,ts,tsx}' --fix",
+    "format": "run -T prettier --write '**/*.js'",
+    "start": "run -T start-storybook -p 9001 -c ./scripts/storybook",
+    "serve": "run -T http-server .out",
+    "typecheck": "run -T tsc --noEmit -p ./tsconfig.json",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "dependencies": {
-    "@basic-ui/core": "^0.0.37",
+    "@basic-ui/core": "^0.0.38",
     "@styled-system/should-forward-prop": "5.1.5",
     "@types/styled-system": "^5.1.10",
     "@types/styled-system__css": "^5.0.14",
@@ -50,5 +50,5 @@
     "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0",
     "react-spring": "^9.0.0"
   },
-  "gitHead": "78b668ff80ce86a4672b3f34ca2c1aaaf79c56eb"
+  "gitHead": "f3a2affbe87fb4f5e59f5528f9e3af53fc311120"
 }

package/src/Chip/ButtonChip.tsx

@@ -77,7 +77,9 @@ export const ButtonChip = forwardRef<HTMLDivElement, ButtonChipProps>(
           <Box as="span" pl={rem(4)} pr={rem(8)}>
             {leftIcon}
           </Box>
-          <Box as="span">{children}</Box>
+          <Box as="span" __css={{ minWidth: 'auto', whiteSpace: 'nowrap' }}>
+            {children}
+          </Box>
           <Box as="span" pl={rem(6)} pr={rem(6)}>
             {rightIcon}
           </Box>

package/src/Chip/Chip.story.tsx

@@ -4,6 +4,7 @@ import { Text } from '../Text';
 import { alpha } from '../color';
 import { RadioGroup } from '../RadioButton';
 import { ChoiceChip } from './ChoiceChip';
+import { LoremIpsum } from '../Text/LoremIpsum';
 
 export default {
   title: 'components/Chip',
@@ -167,3 +168,54 @@ export const AllVariants = () => {
     </>
   );
 };
+
+export const HorizontallyScrollableExample = () => {
+  const texts = [
+    'Temakis',
+    'Sushis',
+    'Beers',
+    'Wine',
+    'Soft drinks',
+    'Cold drinks',
+  ];
+  return (
+    <Box maxWidth="300px" sx={{ backgroundColor: '#ccc' }}>
+      <Box
+        as="nav"
+        sx={{
+          position: 'sticky',
+          top: 0,
+          overflowX: 'auto',
+          bg: 'surface',
+          py: 3,
+          zIndex: 1,
+          borderColor: '#aeaeae',
+          borderWidth: '1px',
+          borderStyle: 'solid',
+        }}
+      >
+        <Box
+          sx={{
+            px: 3,
+            display: 'flex',
+            minWidth: 'auto',
+            width: 'auto',
+            scrollbarWidth: 'none',
+            '& > :not(first-of-type)': {
+              marginLeft: 2,
+            },
+          }}
+        >
+          {texts.map((text) => (
+            <Box key={text} sx={{ minWidth: 'auto' }}>
+              <Chip key={text}>{text}</Chip>
+            </Box>
+          ))}
+        </Box>
+      </Box>
+      <Box>
+        <LoremIpsum count={20} />
+      </Box>
+    </Box>
+  );
+};

package/src/Combobox/Combobox.story.tsx

@@ -2,7 +2,6 @@ import { useMemo, useState } from 'react';
 import type * as React from 'react';
 import {
   Combobox,
-  ComboboxLabel,
   ComboboxOption,
   ComboboxList,
   ComboboxPopover,
@@ -107,8 +106,6 @@ function ControlledClientSideExample({ initialValue = '' }) {
       <p>Selection: {selected}</p>
       <p>Term: {term}</p>
       <Combobox onSelect={handleSelect} selectOnBlur>
-        <ComboboxLabel>Enter a city name</ComboboxLabel>
-        <br />
         <Box position="relative">
           <ComboboxInput
             onChange={handleChange}

package/src/Select/Select.tsx

@@ -5,12 +5,12 @@ import {
   ForwardRefExoticComponent,
   RefAttributes,
   useEffect,
+  useId,
 } from 'react';
 
 import type * as React from 'react';
 import {
   wrapEvent,
-  useId,
   assignMultipleRefs,
   useControlledState,
 } from '@basic-ui/core';

package/src/Text/LoremIpsum.tsx

@@ -1,8 +1,10 @@
+import { FC } from 'react';
 import { Text } from '.';
 
 const phrase =
   'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt sem ut tincidunt eleifend. Cras eget sem nisi. Mauris at orci pretium, auctor ex non, vestibulum mauris. Etiam at nisi eu enim volutpat semper. Phasellus interdum tincidunt eleifend. Suspendisse potenti. Nulla dapibus felis in purus tristique pharetra. Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
-export const LoremIpsum = ({ count = 50 }) => {
+
+export const LoremIpsum: FC<{ count: number }> = ({ count = 50 }) => {
   const phrases = [];
   for (let i = 0; i < count; i++) {
     phrases.push(

package/src/TextField/TextField.tsx

@@ -1,6 +1,6 @@
-import { forwardRef, useState } from 'react';
+import { forwardRef, useState, useId } from 'react';
 import type * as React from 'react';
-import { wrapEvent, useId, useControlledState } from '@basic-ui/core';
+import { wrapEvent, useControlledState } from '@basic-ui/core';
 import { Input, InputProps } from './Input';
 import { useTheme } from '../theme';
 import { FilledContainer } from './FilledContainer';