@basic-ui/material 1.0.0-alpha.52 → 1.0.0-alpha.54

package/src/NavRail/icons/test-icons.tsx

@@ -1,46 +1,46 @@
-import type { SVGAttributes } from 'react';
-
-export const ListIcon = (props: SVGAttributes<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    height={16}
-    width={16}
-    viewBox="0 0 24 24"
-    {...props}
-  >
-    <path
-      fill="currentColor"
-      d="M8 17q.425 0 .713-.288Q9 16.425 9 16t-.287-.713Q8.425 15 8 15t-.713.287Q7 15.575 7 16t.287.712Q7.575 17 8 17Zm0-4q.425 0 .713-.288Q9 12.425 9 12t-.287-.713Q8.425 11 8 11t-.713.287Q7 11.575 7 12t.287.712Q7.575 13 8 13Zm0-4q.425 0 .713-.288Q9 8.425 9 8t-.287-.713Q8.425 7 8 7t-.713.287Q7 7.575 7 8t.287.712Q7.575 9 8 9Zm3 8h6v-2h-6Zm0-4h6v-2h-6Zm0-4h6V7h-6ZM5 21q-.825 0-1.413-.587Q3 19.825 3 19V5q0-.825.587-1.413Q4.175 3 5 3h14q.825 0 1.413.587Q21 4.175 21 5v14q0 .825-.587 1.413Q19.825 21 19 21Zm0-2h14V5H5v14ZM5 5v14V5Z"
-    />
-  </svg>
-);
-
-export const KitchenIcon = (props: SVGAttributes<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    height={16}
-    width={16}
-    viewBox="0 0 24 24"
-    {...props}
-  >
-    <path
-      fill="currentColor"
-      d="M8 8V5h2v3Zm0 9v-5h2v5Zm-2 5q-.825 0-1.412-.587Q4 20.825 4 20V4q0-.825.588-1.413Q5.175 2 6 2h12q.825 0 1.413.587Q20 3.175 20 4v16q0 .825-.587 1.413Q18.825 22 18 22Zm0-2h12v-9H6v9ZM6 9h12V4H6Z"
-    />
-  </svg>
-);
-
-export const MenuIcon = (props: SVGAttributes<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    height={16}
-    width={16}
-    viewBox="0 0 24 24"
-    {...props}
-  >
-    <path
-      fill="currentColor"
-      d="M17 22v-8h-3V7q0-2.075 1.463-3.537Q16.925 2 19 2v20ZM7 22v-9.15q-1.275-.35-2.137-1.4Q4 10.4 4 9V2h2v7h1V2h2v7h1V2h2v7q0 1.4-.863 2.45-.862 1.05-2.137 1.4V22Z"
-    />
-  </svg>
-);
+import type { SVGAttributes } from 'react';
+
+export const ListIcon = (props: SVGAttributes<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height={16}
+    width={16}
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M8 17q.425 0 .713-.288Q9 16.425 9 16t-.287-.713Q8.425 15 8 15t-.713.287Q7 15.575 7 16t.287.712Q7.575 17 8 17Zm0-4q.425 0 .713-.288Q9 12.425 9 12t-.287-.713Q8.425 11 8 11t-.713.287Q7 11.575 7 12t.287.712Q7.575 13 8 13Zm0-4q.425 0 .713-.288Q9 8.425 9 8t-.287-.713Q8.425 7 8 7t-.713.287Q7 7.575 7 8t.287.712Q7.575 9 8 9Zm3 8h6v-2h-6Zm0-4h6v-2h-6Zm0-4h6V7h-6ZM5 21q-.825 0-1.413-.587Q3 19.825 3 19V5q0-.825.587-1.413Q4.175 3 5 3h14q.825 0 1.413.587Q21 4.175 21 5v14q0 .825-.587 1.413Q19.825 21 19 21Zm0-2h14V5H5v14ZM5 5v14V5Z"
+    />
+  </svg>
+);
+
+export const KitchenIcon = (props: SVGAttributes<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height={16}
+    width={16}
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M8 8V5h2v3Zm0 9v-5h2v5Zm-2 5q-.825 0-1.412-.587Q4 20.825 4 20V4q0-.825.588-1.413Q5.175 2 6 2h12q.825 0 1.413.587Q20 3.175 20 4v16q0 .825-.587 1.413Q18.825 22 18 22Zm0-2h12v-9H6v9ZM6 9h12V4H6Z"
+    />
+  </svg>
+);
+
+export const MenuIcon = (props: SVGAttributes<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height={16}
+    width={16}
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M17 22v-8h-3V7q0-2.075 1.463-3.537Q16.925 2 19 2v20ZM7 22v-9.15q-1.275-.35-2.137-1.4Q4 10.4 4 9V2h2v7h1V2h2v7h1V2h2v7q0 1.4-.863 2.45-.862 1.05-2.137 1.4V22Z"
+    />
+  </svg>
+);

package/src/NavRail/index.ts

@@ -1 +1 @@
-export * from './NavRailItem';
+export * from './NavRailItem';

package/src/NotchedOutline/NotchedOutline.story.tsx

@@ -1,99 +1,99 @@
-import {} from './';
-import { rem } from 'polished';
-
-import { NotchedOutline } from './NotchedOutline';
-import { Box } from '../Box';
-import { FloatingLabel } from '../FloatingLabel';
-// import './styles.css';
-
-export default {
-  title: 'helper components/NotchedOutline',
-};
-
-const Example = () => {
-  const labelWidth = 68.27;
-
-  return (
-    <>
-      <Box
-        m={3}
-        display="inline-block"
-        sx={{ position: 'relative', bg: 'muted', borderRadius: 'extra-small' }}
-      >
-        <NotchedOutline
-          borderColor="primary"
-          borderWidth={1}
-          borderRadius={4}
-          notchWidth={labelWidth * 0.75}
-          notchActive={false}
-          label={<FloatingLabel offsetX={12}>Standard</FloatingLabel>}
-        >
-          <Box width={rem(200)} height={rem(56)} />
-        </NotchedOutline>
-      </Box>
-      <Box>
-        <Box
-          m={3}
-          display="inline-block"
-          sx={{ position: 'relative', bg: 'muted', borderRadius: 4 }}
-        >
-          <NotchedOutline
-            borderColor="primary"
-            borderWidth={1}
-            borderRadius={4}
-            notchWidth={labelWidth * 0.75}
-            notchActive={true}
-            label={
-              <FloatingLabel active offsetX={12}>
-                Standard
-              </FloatingLabel>
-            }
-          >
-            <Box width={rem(200)} height={rem(56)} />
-          </NotchedOutline>
-        </Box>
-      </Box>
-      {/* With offset */}
-      <Box
-        m={3}
-        display="inline-block"
-        sx={{ position: 'relative', bg: 'muted', borderRadius: 4 }}
-      >
-        <NotchedOutline
-          borderColor="primary"
-          borderWidth={1}
-          borderRadius={4}
-          notchWidth={labelWidth * 0.75}
-          notchActive={false}
-          label={<FloatingLabel offsetX={12}>Standard</FloatingLabel>}
-        >
-          <Box width={rem(200)} height={rem(56)} />
-        </NotchedOutline>
-      </Box>
-      <Box>
-        <Box
-          m={3}
-          display="inline-block"
-          sx={{ position: 'relative', bg: 'muted', borderRadius: 4 }}
-        >
-          <NotchedOutline
-            borderColor="primary"
-            borderWidth={1}
-            borderRadius={4}
-            notchWidth={labelWidth * 0.75}
-            notchActive={true}
-            label={
-              <FloatingLabel active offsetX={12}>
-                Standard
-              </FloatingLabel>
-            }
-          >
-            <Box width={rem(200)} height={rem(56)} />
-          </NotchedOutline>
-        </Box>
-      </Box>
-    </>
-  );
-};
-
-export const Controlled = () => <Example />;
+import {} from './';
+import { rem } from 'polished';
+
+import { NotchedOutline } from './NotchedOutline';
+import { Box } from '../Box';
+import { FloatingLabel } from '../FloatingLabel';
+// import './styles.css';
+
+export default {
+  title: 'helper components/NotchedOutline',
+};
+
+const Example = () => {
+  const labelWidth = 68.27;
+
+  return (
+    <>
+      <Box
+        m={3}
+        display="inline-block"
+        sx={{ position: 'relative', bg: 'muted', borderRadius: 'extra-small' }}
+      >
+        <NotchedOutline
+          borderColor="primary"
+          borderWidth={1}
+          borderRadius={4}
+          notchWidth={labelWidth * 0.75}
+          notchActive={false}
+          label={<FloatingLabel offsetX={12}>Standard</FloatingLabel>}
+        >
+          <Box width={rem(200)} height={rem(56)} />
+        </NotchedOutline>
+      </Box>
+      <Box>
+        <Box
+          m={3}
+          display="inline-block"
+          sx={{ position: 'relative', bg: 'muted', borderRadius: 4 }}
+        >
+          <NotchedOutline
+            borderColor="primary"
+            borderWidth={1}
+            borderRadius={4}
+            notchWidth={labelWidth * 0.75}
+            notchActive={true}
+            label={
+              <FloatingLabel active offsetX={12}>
+                Standard
+              </FloatingLabel>
+            }
+          >
+            <Box width={rem(200)} height={rem(56)} />
+          </NotchedOutline>
+        </Box>
+      </Box>
+      {/* With offset */}
+      <Box
+        m={3}
+        display="inline-block"
+        sx={{ position: 'relative', bg: 'muted', borderRadius: 4 }}
+      >
+        <NotchedOutline
+          borderColor="primary"
+          borderWidth={1}
+          borderRadius={4}
+          notchWidth={labelWidth * 0.75}
+          notchActive={false}
+          label={<FloatingLabel offsetX={12}>Standard</FloatingLabel>}
+        >
+          <Box width={rem(200)} height={rem(56)} />
+        </NotchedOutline>
+      </Box>
+      <Box>
+        <Box
+          m={3}
+          display="inline-block"
+          sx={{ position: 'relative', bg: 'muted', borderRadius: 4 }}
+        >
+          <NotchedOutline
+            borderColor="primary"
+            borderWidth={1}
+            borderRadius={4}
+            notchWidth={labelWidth * 0.75}
+            notchActive={true}
+            label={
+              <FloatingLabel active offsetX={12}>
+                Standard
+              </FloatingLabel>
+            }
+          >
+            <Box width={rem(200)} height={rem(56)} />
+          </NotchedOutline>
+        </Box>
+      </Box>
+    </>
+  );
+};
+
+export const Controlled = () => <Example />;

package/src/NotchedOutline/NotchedOutline.tsx

@@ -1,80 +1,80 @@
-import type { HTMLAttributes, ReactNode } from 'react';
-import { forwardRef } from 'react';
-import { rem } from 'polished';
-
-import { NotchedOutlineProvider } from './context';
-import { useTheme } from '../theme';
-import { NOTCH_PADDING, InnerContainer } from './styledComponents';
-
-export interface NotchedOutlineProps extends HTMLAttributes<HTMLDivElement> {
-  borderColor: string;
-  borderStyle?: string;
-  borderWidth: number;
-  borderRadius?: number;
-  notchStart?: number;
-  notchWidth: number;
-  notchActive?: boolean;
-  forceActive?: boolean;
-  label?: ReactNode;
-  children?: ReactNode;
-}
-
-export const NotchedOutline = forwardRef<HTMLDivElement, NotchedOutlineProps>(
-  function NotchedOutline(props, forwardedRef) {
-    let {
-      /* eslint-disable prefer-const */
-      borderRadius = 0,
-      borderColor = 'primary',
-      borderWidth = 0,
-      borderStyle = 'solid',
-      notchStart = 0,
-      notchWidth = 0,
-      notchActive = false,
-      forceActive = false,
-      children,
-      label,
-      ...otherProps
-      /* eslint-enable prefer-const */
-    } = props;
-
-    // Minimum notch start position that makes sense. Otherwise it will mess up with the border/border radii
-    const MIN_NOTCH_POSX = (props.borderRadius || 0) + NOTCH_PADDING;
-
-    const theme = useTheme();
-
-    notchStart = Math.max(MIN_NOTCH_POSX, notchStart);
-
-    return (
-      <NotchedOutlineProvider value={{ notchStart }}>
-        {children}
-        <InnerContainer
-          ref={forwardedRef}
-          {...otherProps}
-          color={borderColor}
-          theme={theme}
-          borderRadius={borderRadius}
-          borderWidth={borderWidth}
-          borderWidthWhenFocused={borderWidth * 2}
-          borderStyle={borderStyle}
-          notchStart={notchStart}
-          forceActive={forceActive}
-        >
-          <div data-notch-outline-item="start" />
-          {label && (
-            <div
-              data-notch-outline-item="middle"
-              style={{
-                width: notchActive
-                  ? `calc(${notchWidth}px + ${rem(NOTCH_PADDING * 2)})`
-                  : 0,
-              }}
-            >
-              {label}
-            </div>
-          )}
-          <div data-notch-outline-item="end" />
-        </InnerContainer>
-      </NotchedOutlineProvider>
-    );
-  }
-);
+import type { HTMLAttributes, ReactNode } from 'react';
+import { forwardRef } from 'react';
+import { rem } from 'polished';
+
+import { NotchedOutlineProvider } from './context';
+import { useTheme } from '../theme';
+import { NOTCH_PADDING, InnerContainer } from './styledComponents';
+
+export interface NotchedOutlineProps extends HTMLAttributes<HTMLDivElement> {
+  borderColor: string;
+  borderStyle?: string;
+  borderWidth: number;
+  borderRadius?: number;
+  notchStart?: number;
+  notchWidth: number;
+  notchActive?: boolean;
+  forceActive?: boolean;
+  label?: ReactNode;
+  children?: ReactNode;
+}
+
+export const NotchedOutline = forwardRef<HTMLDivElement, NotchedOutlineProps>(
+  function NotchedOutline(props, forwardedRef) {
+    let {
+      /* eslint-disable prefer-const */
+      borderRadius = 0,
+      borderColor = 'primary',
+      borderWidth = 0,
+      borderStyle = 'solid',
+      notchStart = 0,
+      notchWidth = 0,
+      notchActive = false,
+      forceActive = false,
+      children,
+      label,
+      ...otherProps
+      /* eslint-enable prefer-const */
+    } = props;
+
+    // Minimum notch start position that makes sense. Otherwise it will mess up with the border/border radii
+    const MIN_NOTCH_POSX = (props.borderRadius || 0) + NOTCH_PADDING;
+
+    const theme = useTheme();
+
+    notchStart = Math.max(MIN_NOTCH_POSX, notchStart);
+
+    return (
+      <NotchedOutlineProvider value={{ notchStart }}>
+        {children}
+        <InnerContainer
+          ref={forwardedRef}
+          {...otherProps}
+          color={borderColor}
+          theme={theme}
+          borderRadius={borderRadius}
+          borderWidth={borderWidth}
+          borderWidthWhenFocused={borderWidth * 2}
+          borderStyle={borderStyle}
+          notchStart={notchStart}
+          forceActive={forceActive}
+        >
+          <div data-notch-outline-item="start" />
+          {label && (
+            <div
+              data-notch-outline-item="middle"
+              style={{
+                width: notchActive
+                  ? `calc(${notchWidth}px + ${rem(NOTCH_PADDING * 2)})`
+                  : 0,
+              }}
+            >
+              {label}
+            </div>
+          )}
+          <div data-notch-outline-item="end" />
+        </InnerContainer>
+      </NotchedOutlineProvider>
+    );
+  }
+);

package/src/NotchedOutline/context.ts

@@ -1,12 +1,12 @@
-import { createContext, useContext } from 'react';
-
-// NotchedOutline Component
-export interface NotchedOutlineContextProps {
-  notchStart: number;
-}
-
-const notchedoutlineContext = createContext<NotchedOutlineContextProps | null>(
-  null
-);
-export const { Provider: NotchedOutlineProvider } = notchedoutlineContext;
-export const useNotchedOutlineContext = () => useContext(notchedoutlineContext);
+import { createContext, useContext } from 'react';
+
+// NotchedOutline Component
+export interface NotchedOutlineContextProps {
+  notchStart: number;
+}
+
+const notchedoutlineContext = createContext<NotchedOutlineContextProps | null>(
+  null
+);
+export const { Provider: NotchedOutlineProvider } = notchedoutlineContext;
+export const useNotchedOutlineContext = () => useContext(notchedoutlineContext);

package/src/NotchedOutline/index.ts

@@ -1 +1 @@
-export * from './NotchedOutline';
+export * from './NotchedOutline';