⬆️ Update chakra snippets

Signed-off-by: Muhammed Hussein Karimi <info@karimi.dev>
ParminCloud · Dec 15, 2024 · 796d480 · 796d480
1 parent 81fac35
commit 796d480
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 28 deletions.
diff --git a/src/components/ui/close-button.tsx b/src/components/ui/close-button.tsx
@@ -1,9 +1,9 @@
-import type { ButtonProps as ChakraCloseButtonProps } from "@chakra-ui/react"
+import type { ButtonProps } from "@chakra-ui/react"
 import { IconButton as ChakraIconButton } from "@chakra-ui/react"
 import * as React from "react"
 import { LuX } from "react-icons/lu"
 
-export interface CloseButtonProps extends ChakraCloseButtonProps {}
+export type CloseButtonProps = ButtonProps
 
 export const CloseButton = React.forwardRef<
   HTMLButtonElement,

diff --git a/src/components/ui/input-group.tsx b/src/components/ui/input-group.tsx
@@ -8,6 +8,8 @@ export interface InputGroupProps extends BoxProps {
   startElement?: React.ReactNode
   endElement?: React.ReactNode
   children: React.ReactElement
+  startOffset?: InputElementProps["paddingStart"]
+  endOffset?: InputElementProps["paddingEnd"]
 }
 
 export const InputGroup = React.forwardRef<HTMLDivElement, InputGroupProps>(
@@ -18,19 +20,26 @@ export const InputGroup = React.forwardRef<HTMLDivElement, InputGroupProps>(
       endElement,
       endElementProps,
       children,
+      startOffset = "6px",
+      endOffset = "6px",
       ...rest
     } = props
 
+    const child =
+      React.Children.only<React.ReactElement<InputElementProps>>(children)
+
     return (
       <Group ref={ref} {...rest}>
         {startElement && (
           <InputElement pointerEvents="none" {...startElementProps}>
             {startElement}
           </InputElement>
         )}
-        {React.cloneElement(children, {
-          ...(startElement && { ps: "calc(var(--input-height) - 6px)" }),
-          ...(endElement && { pe: "calc(var(--input-height) - 6px)" }),
+        {React.cloneElement(child, {
+          ...(startElement && {
+            ps: `calc(var(--input-height) - ${startOffset})`,
+          }),
+          ...(endElement && { pe: `calc(var(--input-height) - ${endOffset})` }),
           ...children.props,
         })}
         {endElement && (

diff --git a/src/components/ui/slider.tsx b/src/components/ui/slider.tsx
@@ -1,4 +1,4 @@
-import { Slider as ChakraSlider, HStack } from "@chakra-ui/react"
+import { Slider as ChakraSlider, For, HStack } from "@chakra-ui/react"
 import * as React from "react"
 
 export interface SliderProps extends ChakraSlider.RootProps {
@@ -22,39 +22,61 @@ export const Slider = React.forwardRef<HTMLDivElement, SliderProps>(
     return (
       <ChakraSlider.Root ref={ref} thumbAlignment="center" {...rest}>
         {label && !showValue && (
-          <ChakraSlider.Label fontWeight="medium">{label}</ChakraSlider.Label>
+          <ChakraSlider.Label>{label}</ChakraSlider.Label>
         )}
         {label && showValue && (
           <HStack justify="space-between">
-            <ChakraSlider.Label fontWeight="medium">{label}</ChakraSlider.Label>
+            <ChakraSlider.Label>{label}</ChakraSlider.Label>
             <ChakraSlider.ValueText />
           </HStack>
         )}
-        <ChakraSlider.Control mb={hasMarkLabel ? "4" : undefined}>
+        <ChakraSlider.Control data-has-mark-label={hasMarkLabel || undefined}>
           <ChakraSlider.Track>
             <ChakraSlider.Range />
           </ChakraSlider.Track>
-          {value?.map((_, index) => (
-            <ChakraSlider.Thumb key={index} index={index}>
-              <ChakraSlider.HiddenInput />
-            </ChakraSlider.Thumb>
-          ))}
+          <SliderThumbs value={value} />
+          <SliderMarks marks={marks} />
         </ChakraSlider.Control>
-        {marks?.length && (
-          <ChakraSlider.MarkerGroup>
-            {marks.map((mark, index) => {
-              const value = typeof mark === "number" ? mark : mark.value
-              const label = typeof mark === "number" ? undefined : mark.label
-              return (
-                <ChakraSlider.Marker key={index} value={value}>
-                  <ChakraSlider.MarkerIndicator />
-                  {label}
-                </ChakraSlider.Marker>
-              )
-            })}
-          </ChakraSlider.MarkerGroup>
-        )}
       </ChakraSlider.Root>
     )
   },
 )
+
+function SliderThumbs(props: { value?: number[] }) {
+  const { value } = props
+  return (
+    <For each={value}>
+      {(_, index) => (
+        <ChakraSlider.Thumb key={index} index={index}>
+          <ChakraSlider.HiddenInput />
+        </ChakraSlider.Thumb>
+      )}
+    </For>
+  )
+}
+
+interface SliderMarksProps {
+  marks?: Array<number | { value: number; label: React.ReactNode }>
+}
+
+const SliderMarks = React.forwardRef<HTMLDivElement, SliderMarksProps>(
+  function SliderMarks(props, ref) {
+    const { marks } = props
+    if (!marks?.length) return null
+
+    return (
+      <ChakraSlider.MarkerGroup ref={ref}>
+        {marks.map((mark, index) => {
+          const value = typeof mark === "number" ? mark : mark.value
+          const label = typeof mark === "number" ? undefined : mark.label
+          return (
+            <ChakraSlider.Marker key={index} value={value}>
+              <ChakraSlider.MarkerIndicator />
+              {label}
+            </ChakraSlider.Marker>
+          )
+        })}
+      </ChakraSlider.MarkerGroup>
+    )
+  },
+)