feat: complete select

.storybook/output.css

@@ -751,12 +751,12 @@ select {
   right: 0.75rem;
 }
 
-.isolate {
-  isolation: isolate;
+.right-2 {
+  right: 0.5rem;
 }
 
-.z-50 {
-  z-index: 50;
+.isolate {
+  isolation: isolate;
 }
 
 .m-0 {
@@ -799,10 +799,6 @@ select {
   height: 2px;
 }
 
-.h-10 {
-  height: 2.5rem;
-}
-
 .max-h-96 {
   max-height: 24rem;
 }
@@ -922,6 +918,10 @@ select {
   border-radius: 0.375rem;
 }
 
+.rounded-sm {
+  border-radius: 0.125rem;
+}
+
 .border-2 {
   border-width: 2px;
 }
@@ -1074,14 +1074,6 @@ select {
   padding-right: 0.75rem;
 }
 
-.pr-2 {
-  padding-right: 0.5rem;
-}
-
-.pl-8 {
-  padding-left: 2rem;
-}
-
 .text-left {
   text-align: left;
 }
@@ -1142,12 +1134,6 @@ select {
   opacity: 0;
 }
 
-.shadow-md {
-  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
 .outline-none {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -1191,19 +1177,28 @@ html {
   background-color: rgb(63 63 70 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-mono-hover:hover {
+.focus\:rounded-md:focus {
+  border-radius: 0.375rem;
+}
+
+.focus\:border-mono-primary:focus {
+  --tw-border-opacity: 1;
+  border-color: rgb(39 39 42 / var(--tw-border-opacity));
+}
+
+.focus\:bg-mono-hover:focus {
   --tw-bg-opacity: 1;
-  background-color: rgb(156 163 175 / var(--tw-bg-opacity));
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-mono-primary:hover {
+.focus\:bg-mono-primary:focus {
   --tw-bg-opacity: 1;
   background-color: rgb(39 39 42 / var(--tw-bg-opacity));
 }
 
-.focus\:border-mono-primary:focus {
-  --tw-border-opacity: 1;
-  border-color: rgb(39 39 42 / var(--tw-border-opacity));
+.focus\:text-white:focus {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
 .focus\:outline-none:focus {
@@ -1217,16 +1212,6 @@ html {
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
-.focus\:ring-2:focus {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-}
-
-.focus\:ring-offset-2:focus {
-  --tw-ring-offset-width: 2px;
-}
-
 .focus-visible\:ring-2:focus-visible {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -1242,16 +1227,22 @@ html {
   --tw-ring-offset-width: 2px;
 }
 
-.disabled\:cursor-not-allowed:disabled {
-  cursor: not-allowed;
+.data-\[disabled\]\:pointer-events-none[data-disabled] {
+  pointer-events: none;
 }
 
-.disabled\:opacity-50:disabled {
-  opacity: 0.5;
+.data-\[highlighted\]\:border-2[data-highlighted] {
+  border-width: 2px;
 }
 
-.data-\[disabled\]\:pointer-events-none[data-disabled] {
-  pointer-events: none;
+.data-\[highlighted\]\:border-mono-primary[data-highlighted] {
+  --tw-border-opacity: 1;
+  border-color: rgb(39 39 42 / var(--tw-border-opacity));
+}
+
+.data-\[highlighted\]\:bg-gray-400[data-highlighted] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(156 163 175 / var(--tw-bg-opacity));
 }
 
 .data-\[disabled\]\:text-mono-text\/50[data-disabled] {
@@ -1262,6 +1253,11 @@ html {
   opacity: 0.5;
 }
 
+.data-\[highlighted\]\:outline-none[data-highlighted] {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
 .data-\[focus\]\:outline[data-focus] {
   outline-style: solid;
 }

src/components/Input/Input.tsx

@@ -3,6 +3,7 @@ import dashify from "dashify";
 import { NumericFormat } from "react-number-format";
 import type * as T from "./Input.types";
 import { Box } from "../Box";
+import { Label } from "../Label";
 import { cx } from "../../utils";
 import { inputStyles } from "./Input.styles";
 import { match, P } from "ts-pattern";
@@ -42,17 +43,14 @@ const Input = React.forwardRef<HTMLInputElement, T.InputProps>(
 
     return (
       <Box className={cx(["relative"])}>
-        <label
-          className={cx(
-            ["text-sm", "font-semibold", "leading-6", "text-mono-primary"],
-            {
-              "sr-only": hideLabel,
-            }
-          )}
+        <Label
+          className={cx({
+            "sr-only": hideLabel,
+          })}
           htmlFor={htmlId}
         >
           {label}
-        </label>
+        </Label>
         <Box
           className={cx(["relative"], {
             "mt-1": !hideLabel,

src/components/Label.tsx

@@ -0,0 +1,28 @@
+import * as React from "react";
+import * as $ from "@radix-ui/react-label";
+import { cva } from "class-variance-authority";
+import { cx } from "../utils";
+
+type LabelElement = React.ElementRef<typeof $.Root>;
+
+type LabelProps = React.ComponentPropsWithoutRef<typeof $.Root>;
+
+const styles = cva([
+  "text-sm",
+  "font-semibold",
+  "leading-6",
+  "text-mono-primary",
+]);
+
+const Label = React.forwardRef<LabelElement, LabelProps>(
+  ({ children, ...props }, forwardRef) => {
+    const classes = cx(styles(), props.className);
+    return (
+      <$.Root {...props} className={classes} ref={forwardRef}>
+        {children}
+      </$.Root>
+    );
+  }
+);
+
+export { Label };

src/components/Select/Select.styles.ts

@@ -19,8 +19,8 @@ const content = [
   "relative",
   "max-h-96",
   "min-w-[8rem]",
-  "py-1.5",
-  "px-2",
+  // "py-1.5",
+  // "px-2",
   "border-2",
   "border-mono-border",
   "overflow-hidden",
@@ -50,13 +50,24 @@ const scroll = [
 
 const indicator = [
   "absolute",
-  "left-0",
+  "top-1/2",
+  "-translate-y-1/2",
+  "right-2",
   "inline-flex",
   "items-center",
   "justify-center",
 ];
 
-const selectStyles = cva(base);
+const selectStyles = cva(base, {
+  variants: {
+    fullWidth: {
+      true: "w-full",
+    },
+  },
+  defaultVariants: {
+    fullWidth: false,
+  },
+});
 
 const item = [
   "relative",
@@ -65,12 +76,15 @@ const item = [
   "cursor-default",
   "select-none",
   "items-center",
-  "py-1.5",
-  "pr-2",
-  "pl-8",
+  "py-0.5",
+  "px-2",
+  "rounded-sm",
   "data-[disabled]:pointer-events-none",
   "data-[disabled]:text-mono-text/50",
-  "focus:outline-none",
+  "outline-none",
+  "focus:rounded-md",
+  "focus:bg-mono-primary",
+  "focus:text-white",
   "focus:border-mono-primary",
 ];
 

src/components/Select/Select.tsx

@@ -1,20 +1,26 @@
 import * as React from "react";
 import * as $ from "@radix-ui/react-select";
-import { Label } from "@radix-ui/react-label";
 import { FaCheck, FaChevronDown, FaChevronUp } from "react-icons/fa";
 import * as T from "./Select.types";
 import * as styles from "./Select.styles";
 import { cx } from "../../utils";
 import { Box } from "../Box";
+import { Label } from "../Label";
 
 const Select = React.forwardRef<T.SelectElement, T.SelectProps>(
-  ({ children, className, ...props }, ref) => {
-    const classes = cx([styles.selectStyles()], className);
-    console.log("classes", classes);
+  ({ hideLabel = false, fullWidth, children, className, ...props }, ref) => {
+    const classes = cx([styles.selectStyles({ fullWidth })], className);
     return (
-      <Box>
-        <Label htmlFor={"select"}>Select</Label>
-        <Box>
+      <Box className={cx(["relative"])}>
+        <Label
+          htmlFor={"select"}
+          className={cx([""], {
+            "sr-only": hideLabel,
+          })}
+        >
+          Select
+        </Label>
+        <Box className={cx(["mt-1"])}>
           <$.Root>
             <$.Trigger id="select" {...props} className={classes} ref={ref}>
               <$.Value placeholder={props.placeholder} />
@@ -49,7 +55,7 @@ const SelectItem = React.forwardRef<T.SelectItemElement, T.SelectItemProps>(
   ({ children, className, ...props }, forwardedRef) => {
     const classes = cx([styles.itemStyles()], className);
     return (
-      <$.Item {...props} ref={forwardedRef}>
+      <$.Item {...props} className={classes} ref={forwardedRef}>
         <$.ItemText>{children}</$.ItemText>
         <$.ItemIndicator className={cx([styles.indicator])}>
           <FaCheck />

src/components/Select/Select.types.ts

@@ -16,7 +16,9 @@ type SelectSection = {
 type SelectElement = React.ElementRef<typeof $.Trigger>;
 
 type SelectProps = React.ComponentPropsWithoutRef<typeof $.Trigger> &
-  VariantProps<typeof selectStyles> & {};
+  VariantProps<typeof selectStyles> & {
+    hideLabel?: boolean;
+  };
 
 type SelectItemElement = React.ElementRef<typeof $.Item>;
 

tailwind.config.js

@@ -29,7 +29,7 @@ module.exports = {
           DEFAULT: colors.gray["500"],
         },
         "mono-hover": {
-          DEFAULT: colors.gray[400],
+          DEFAULT: colors.gray[200],
         },
         "mono-rounded": {
           DEFAULT: defaultTheme.borderRadius["lg"],