@tipp/ui 2.2.2 → 2.2.3

package/dist/molecules/time-select.js

@@ -8,57 +8,51 @@ import "../chunk-NWJSLIQ3.js";
 import "../chunk-BXX3B3E4.js";
 import "../chunk-HBF6IIVZ.js";
 import "../chunk-A5S42XBJ.js";
-import "../chunk-OYM4XCHQ.js";
-import "../chunk-YJ7ZFOYL.js";
-import "../chunk-5ZITU5L7.js";
 import "../chunk-3F45OPXG.js";
 import "../chunk-5KDNSBO5.js";
 import "../chunk-26ZU5KUR.js";
-import "../chunk-MUPK4L3U.js";
-import "../chunk-MUNMDHRF.js";
-import "../chunk-TVDKGMBI.js";
 import "../chunk-AP52M2Z5.js";
 import "../chunk-5H3YPCZK.js";
 import "../chunk-FR2GDOU2.js";
 import "../chunk-74DX4CU7.js";
-import "../chunk-3SK5EPKI.js";
-import "../chunk-BXQCEPIO.js";
-import "../chunk-5AVBYDPB.js";
+import "../chunk-OYM4XCHQ.js";
+import "../chunk-YJ7ZFOYL.js";
+import "../chunk-5ZITU5L7.js";
 import "../chunk-365QMK4D.js";
 import "../chunk-YO3BQW6S.js";
 import "../chunk-6IVCARWS.js";
 import "../chunk-6DJOIRMF.js";
 import "../chunk-FPD73OHW.js";
-import "../chunk-EGEQY3KT.js";
-import "../chunk-O3T3TM3V.js";
+import "../chunk-MUPK4L3U.js";
+import "../chunk-MUNMDHRF.js";
+import "../chunk-TVDKGMBI.js";
 import "../chunk-XQOL7UBI.js";
 import "../chunk-TULWX7D6.js";
 import "../chunk-TQOQC4PZ.js";
-import "../chunk-VTJZMOSP.js";
-import "../chunk-22326A76.js";
-import "../chunk-34OQDUQR.js";
-import "../chunk-ZMHUWLB2.js";
-import "../chunk-DDUKEE5E.js";
-import "../chunk-HYITAA4J.js";
-import "../chunk-U7N2PWMO.js";
-import "../chunk-ZOFENAZJ.js";
+import "../chunk-7NH52DGC.js";
+import "../chunk-BXQCEPIO.js";
+import "../chunk-5AVBYDPB.js";
 import "../chunk-HYE34QEM.js";
 import "../chunk-AIYMJYCT.js";
 import "../chunk-CYPER4YW.js";
 import "../chunk-PT57HCAI.js";
 import "../chunk-2DZ2Y3JI.js";
 import "../chunk-KXF3A4OR.js";
-import "../chunk-B6XJN6EC.js";
-import "../chunk-HEDMSFPW.js";
-import "../chunk-MIMJ7LON.js";
+import "../chunk-EGEQY3KT.js";
+import "../chunk-O3T3TM3V.js";
 import "../chunk-RMTJMZBQ.js";
 import "../chunk-DGAB7BIE.js";
 import "../chunk-OHMOP5PV.js";
 import "../chunk-NFDQJVFA.js";
 import "../chunk-Q37G2GS6.js";
-import "../chunk-XTHDFSN3.js";
-import "../chunk-FC7WH2S6.js";
-import "../chunk-FCIHNIOH.js";
+import "../chunk-VTJZMOSP.js";
+import "../chunk-22326A76.js";
+import "../chunk-34OQDUQR.js";
+import "../chunk-ZMHUWLB2.js";
+import "../chunk-DDUKEE5E.js";
+import "../chunk-HYITAA4J.js";
+import "../chunk-U7N2PWMO.js";
+import "../chunk-ZOFENAZJ.js";
 import "../chunk-YGL6SWKN.js";
 import "../chunk-4Y5BEXVN.js";
 import "../chunk-I7UUXACJ.js";
@@ -68,6 +62,9 @@ import "../chunk-25HMMI7R.js";
 import "../chunk-BW46WIN5.js";
 import "../chunk-LQY4RKWI.js";
 import "../chunk-ZD7MNMED.js";
+import "../chunk-B6XJN6EC.js";
+import "../chunk-HEDMSFPW.js";
+import "../chunk-MIMJ7LON.js";
 import "../chunk-V5XKNSCK.js";
 import "../chunk-WJ34ZHTU.js";
 import "../chunk-PVL7SJYR.js";
@@ -85,6 +82,9 @@ import "../chunk-UQN63IRS.js";
 import "../chunk-K25BYIJ7.js";
 import "../chunk-J242TTFH.js";
 import "../chunk-EAXUQEO5.js";
+import "../chunk-XTHDFSN3.js";
+import "../chunk-FC7WH2S6.js";
+import "../chunk-FCIHNIOH.js";
 import "../chunk-2NMEKWO5.js";
 export {
   TimeSelect

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tipp/ui",
-  "version": "2.2.2",
+  "version": "2.2.3",
   "private": false,
   "type": "module",
   "exports": {
@@ -57,8 +57,8 @@
     "ts-jest": "^29.2.2",
     "ts-node": "^10.9.2",
     "tsup": "^8.0.2",
-    "@tipp/typescript-config": "1.0.1",
-    "@tipp/eslint-config": "1.1.2"
+    "@tipp/eslint-config": "1.1.2",
+    "@tipp/typescript-config": "1.0.1"
   },
   "peerDependencies": {
     "@types/react": "*",

package/src/atoms/list.tsx

@@ -1,61 +1,83 @@
-import type { Responsive } from '@radix-ui/themes/props'
-import React, { createContext, useContext, useMemo } from 'react'
+import type { Responsive } from '@radix-ui/themes/props';
+import React, { createContext, useContext, useMemo } from 'react';
+import { clsx } from 'clsx';
 import { mapWithResponsive } from '@/utils/map-with-responsive';
 import { Typo } from './typo';
 import { Flex } from './flex';
 
 export interface ListRootProps {
-  variant?: 'ol' | 'ul'
-  size?: Responsive<'small' | 'large'>
-  children?: React.ReactNode
+  variant?: 'ol' | 'ul';
+  size?: Responsive<'small' | 'large'>;
+  children?: React.ReactNode;
+  preSpace?: 'regular' | 'small';
+  className?: string;
+  style?: React.CSSProperties;
 }
 
-function Root(props: ListRootProps):React.ReactElement {
-  const {variant, size = 'large', children} = props;
-  const Comp = variant === 'ol' ? 'ol' : "ul";
-  return (
-    <ListContext.Provider value={{size}}> 
-    <Flex direction="column" asChild gap="1">
+function Root(props: ListRootProps): React.ReactElement {
+  const {
+    variant,
+    size = 'large',
+    children,
+    preSpace,
+    className: propsClassName,
+    ...rest
+  } = props;
+  const Comp = variant === 'ol' ? 'ol' : 'ul';
+
+  const className = useMemo(
+    () =>
+      clsx(
+        {
+          'pre-space-small': preSpace === 'small',
+        },
+        propsClassName
+      ),
+    [preSpace, propsClassName]
+  );
 
-    <Comp>
-      {children}
-    </Comp>
-    </Flex>
+  return (
+    <ListContext.Provider value={{ size }}>
+      <Flex asChild direction="column" gap="1" {...rest} className={className}>
+        <Comp>{children}</Comp>
+      </Flex>
     </ListContext.Provider>
-  )
+  );
 }
 
 export interface ListItemProps {
-  children?: React.ReactNode
+  children?: React.ReactNode;
 }
 
-function Item(props: ListItemProps):React.ReactElement {
-  const {children} = props;
-  const {size} = useList();
+function Item(props: ListItemProps): React.ReactElement {
+  const { children } = props;
+  const { size } = useList();
 
-  const variant = useMemo(()=>{
+  const variant = useMemo(() => {
     return mapWithResponsive({
       value: size,
       mapFn: (sizeValue) => {
         return sizeValue === 'small' ? 'caption' : 'body';
       },
     });
-  },[
-    size
-  ])
+  }, [size]);
 
-  return <Typo asChild variant={variant}>
-    <li>{children}</li>
-  </Typo>
+  return (
+    <Typo asChild variant={variant}>
+      <li>{children}</li>
+    </Typo>
+  );
 }
 
-const ListContext = createContext<{size: Responsive<'small' | 'large'>}>({size: 'large'});
+const ListContext = createContext<{ size: Responsive<'small' | 'large'> }>({
+  size: 'large',
+});
 
-export function useList(): {size: Responsive<'small' | 'large'>} {
+export function useList(): { size: Responsive<'small' | 'large'> } {
   return useContext(ListContext);
 }
 
 export const List = {
   Root,
-  Item
-}
+  Item,
+};