@noya-app/noya-designsystem 0.1.36 → 0.1.37

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-designsystem",
-  "version": "0.1.36",
+  "version": "0.1.37",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",

package/src/components/Checkbox.tsx

@@ -0,0 +1,76 @@
+import React, { forwardRef, InputHTMLAttributes, memo } from "react";
+
+interface CheckboxProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
+  colorScheme?: "primary" | "secondary";
+}
+
+const colorSchemeStyles = {
+  normal: "text-text-subtle",
+  primary: "text-primary",
+  secondary: "text-secondary",
+};
+
+export const Checkbox = memo(
+  forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(
+    { className, colorScheme = "secondary", ...props },
+    ref
+  ) {
+    return (
+      <div
+        className={`relative inline-flex w-[19px] h-[19px] ${colorSchemeStyles[colorScheme]} ${className ?? ""}`}
+      >
+        <input
+          ref={ref}
+          type="checkbox"
+          className={`
+            w-full
+            h-full
+            peer
+            appearance-none
+            rounded
+            bg-input-background
+            transition-colors
+            border
+            border-input-border
+            disabled:opacity-50
+            disabled:cursor-not-allowed
+            focus:ring-2
+            focus:ring-primary
+            focus:ring-offset-1
+          `}
+          style={{
+            width: "27px",
+            ...props.style,
+          }}
+          {...props}
+        />
+        <svg
+          className={`
+            absolute 
+            inset-0
+            h-[27px] 
+            w-[27px] 
+            pointer-events-none
+            stroke-white
+            opacity-0
+            peer-checked:opacity-100
+          `}
+          style={{
+            strokeWidth: "1.3",
+          }}
+          viewBox="0 0 16 16"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M3 6L4.5 7.5L8 4"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            stroke="currentColor"
+          />
+        </svg>
+      </div>
+    );
+  })
+);

package/src/components/Label.tsx

@@ -1,31 +1,18 @@
-import React, { memo, ReactNode } from "react";
-import { Spacer } from "./Spacer";
-import { textStyles } from "./Text";
+import React, { forwardRef, LabelHTMLAttributes, memo } from "react";
 
-/* ----------------------------------------------------------------------------
- * Root
- * ------------------------------------------------------------------------- */
+interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {}
 
-interface LabelRootProps {
-  label: ReactNode;
-  children: ReactNode;
-}
-
-function LabelRoot({ label, children }: LabelRootProps) {
-  return (
-    <span className={`flex-none relative outline-none border-0 min-w-0 text-left flex flex-col items-center`}>
-      {children}
-      {label && (
-        <>
-          <Spacer.Vertical size={2} />
-          <span className={`${textStyles.small} text-text-muted text-xs flex-none min-w-0 tracking-[0.4px] whitespace-pre`}>{label}</span>
-
-        </>
-      )}
-    </span>
-  );
-}
-
-export namespace Label {
-  export const Root = memo(LabelRoot);
-}
+export const Label = memo(
+  forwardRef<HTMLLabelElement, LabelProps>(function Label(
+    { className, ...props },
+    ref
+  ) {
+    return (
+      <label
+        ref={ref}
+        className={`font-sans text-label uppercase flex items-center leading-[19px] select-none font-bold text-text-muted ${className ?? ""}`}
+        {...props}
+      />
+    );
+  })
+);

package/src/components/SelectMenu.tsx

@@ -1,11 +1,15 @@
-import { DropdownChevronIcon } from "@noya-app/noya-icons";
+import {
+  ChevronDownIcon,
+  ChevronUpIcon,
+  DropdownChevronIcon,
+} from "@noya-app/noya-icons";
 import * as Select from "@radix-ui/react-select";
 import { type SelectProps } from "@radix-ui/react-select";
 import React, { CSSProperties, memo, useMemo } from "react";
 import { Button } from "./Button";
 import { renderIcon } from "./Icons";
-import { Spacer } from "./Spacer";
 import { MenuItem, RegularMenuItem, styles } from "./internal/Menu";
+import { Spacer } from "./Spacer";
 
 type Props<T extends string> = {
   id?: string;
@@ -25,11 +29,17 @@ const readOnlyStyle: CSSProperties = {
   textAlign: "left",
 };
 
-const textStyle: CSSProperties = {
-  fontSize: "0.85rem",
-};
+const labelStyles = `font-sans text-label uppercase text-text-disabled leading-[19px] font-bold text-[60%] pointer-events-none flex items-center mr-1.5`;
 
-const labelStyles = `font-sans text-label uppercase text-text-disabled leading-[19px] absolute inset-0 font-bold text-[60%] pointer-events-none flex items-center justify-end pr-6`;
+const scrollButtonStyles = `
+  flex 
+  items-center 
+  justify-center 
+  h-[25px] 
+  cursor-default
+  text-text-muted
+  hover:text-text
+`;
 
 export const SelectMenu = memo(function SelectMenu<T extends string = string>({
   id,
@@ -65,9 +75,7 @@ export const SelectMenu = memo(function SelectMenu<T extends string = string>({
             <Spacer.Horizontal inline size={6} />
           </>
         )}
-        <span style={{ ...textStyle }} className="flex flex-1">
-          {selectedItem?.title ?? value}
-        </span>
+        <span className="flex flex-1">{selectedItem?.title ?? value}</span>
       </Button>
     ),
     [icon, id, style, className, disabled, value, selectedItem]
@@ -78,7 +86,7 @@ export const SelectMenu = memo(function SelectMenu<T extends string = string>({
       <Select.SelectTrigger asChild>
         <Button
           id={id}
-          style={{ ...textStyle, ...style }}
+          style={style}
           className={`${className ?? "w-full"} flex-1`}
           disabled={disabled}
         >
@@ -88,25 +96,22 @@ export const SelectMenu = memo(function SelectMenu<T extends string = string>({
               <Spacer.Horizontal inline size={6} />
             </>
           )}
-          <span className="flex flex-1">
+          <span className="flex flex-1 mr-1.5">
             <Select.Value placeholder={placeholder} />
           </span>
-          <Spacer.Horizontal inline size={6} />
+          {label && <span className={labelStyles}>{label}</span>}
           <DropdownChevronIcon />
         </Button>
       </Select.SelectTrigger>
     ),
-    [icon, id, style, className, disabled, placeholder]
+    [id, style, className, disabled, icon, placeholder, label]
   );
 
   if (readOnly) {
     return label ? (
       <div className="flex flex-col relative">
         {readOnlyButton}
-        <label
-          className={labelStyles}
-          htmlFor={id}
-        >
+        <label className={labelStyles} htmlFor={id}>
           {label}
         </label>
       </div>
@@ -117,20 +122,12 @@ export const SelectMenu = memo(function SelectMenu<T extends string = string>({
 
   return (
     <Select.Root value={value} onValueChange={onSelect} open={open}>
-      {label ? (
-        <div className="flex-1 flex-col relative">
-          {trigger}
-          {label && (
-            <label className={labelStyles} htmlFor={id}>
-              {label}
-            </label>
-          )}
-        </div>
-      ) : (
-        trigger
-      )}
+      {trigger}
       <Select.Portal>
         <Select.Content className={styles.contentStyle}>
+          <Select.ScrollUpButton className={scrollButtonStyles}>
+            <ChevronUpIcon />
+          </Select.ScrollUpButton>
           <Select.Viewport>
             {menuItems.map((menuItem) => {
               if (typeof menuItem === "string") {
@@ -146,6 +143,9 @@ export const SelectMenu = memo(function SelectMenu<T extends string = string>({
               );
             })}
           </Select.Viewport>
+          <Select.ScrollDownButton className={scrollButtonStyles}>
+            <ChevronDownIcon />
+          </Select.ScrollDownButton>
         </Select.Content>
       </Select.Portal>
     </Select.Root>
@@ -156,21 +156,27 @@ const SelectItem = React.forwardRef(
   (
     {
       children,
-      icon, disabled,
+      icon,
+      disabled,
       ...props
     }: Select.SelectItemProps & { icon?: React.ReactNode },
     forwardedRef: React.ForwardedRef<HTMLDivElement>
   ) => {
     return (
-      <Select.Item className={styles.itemStyle({disabled})} disabled={disabled} {...props} ref={forwardedRef}>
+      <Select.Item
+        className={styles.itemStyle({ disabled })}
+        disabled={disabled}
+        {...props}
+        ref={forwardedRef}
+      >
         {icon && (
           <>
             {renderIcon(icon)}
             <Spacer.Horizontal size={8} />
           </>
         )}
-        <Select.ItemText style={textStyle}>{children}</Select.ItemText>
+        <Select.ItemText>{children}</Select.ItemText>
       </Select.Item>
     );
   }
-);
+);

package/src/components/Switch.tsx

@@ -4,6 +4,7 @@ import React from "react";
 type SwitchColorScheme = "normal" | "primary" | "secondary";
 
 interface Props {
+  id?: string;
   value: boolean;
   onChange: (value: boolean) => void;
   /** @default normal */
@@ -12,6 +13,7 @@ interface Props {
 }
 
 export const Switch = function Switch({
+  id,
   value,
   onChange,
   colorScheme = "normal",
@@ -19,14 +21,15 @@ export const Switch = function Switch({
 }: Props) {
   return (
     <SwitchPrimitive.Root
+      id={id}
       checked={value}
       disabled={disabled}
       onCheckedChange={(newValue) => {
         onChange(newValue);
       }}
-      className={`all-unset w-8 h-[19px] bg-active-background rounded-full relative cursor-pointer [webkit-tap-highlight-color:rgba(0,0,0,0)] focus:ring-2 focus:outline-primary focus:ring-offset-[1px] data-[state=checked]:bg-primary ${colorScheme === "secondary" && "data-[state=checked]:bg-secondary"}`}
+      className={`all-unset w-8 h-[19px] bg-active-background rounded-full relative cursor-pointer [webkit-tap-highlight-color:rgba(0,0,0,0)] focus:ring-2 focus:ring-primary focus:ring-offset-[1px] outline-none data-[state=checked]:bg-primary ${colorScheme === "secondary" && "data-[state=checked]:bg-secondary"}`}
     >
-      <SwitchPrimitive.Thumb className="block w-[15px] h-[15px] bg-white rounded-full transition-transform translate-x-[2px] data-[state=checked]:translate-x-[15px]"/>
+      <SwitchPrimitive.Thumb className="block w-[15px] h-[15px] bg-white rounded-full transition-transform translate-x-[2px] data-[state=checked]:translate-x-[15px]" />
     </SwitchPrimitive.Root>
   );
 };

package/src/index.tsx

@@ -17,6 +17,7 @@ declare module "react" {
 export * from "./components/ActivityIndicator";
 export * from "./components/Avatar";
 export * from "./components/Button";
+export * from "./components/Checkbox";
 export * from "./components/Chip";
 export * from "./components/ContextMenu";
 export * from "./components/Dialog";

package/src/utils/withSeparatorElements.ts

@@ -1,4 +1,26 @@
-import { Children, cloneElement, isValidElement, ReactNode } from "react";
+import {
+  Children,
+  cloneElement,
+  Fragment,
+  isValidElement,
+  ReactNode,
+} from "react";
+
+interface SeparatorOptions {
+  traverseFragments?: boolean;
+}
+
+function flattenChildren(
+  children: ReactNode,
+  traverseFragments: boolean
+): ReactNode[] {
+  return Children.toArray(children).flatMap((child) => {
+    if (traverseFragments && isValidElement(child) && child.type === Fragment) {
+      return flattenChildren(child.props.children, traverseFragments);
+    }
+    return child;
+  });
+}
 
 function createKey(key: string | number) {
   return `s-${key}`;
@@ -6,9 +28,13 @@ function createKey(key: string | number) {
 
 export default function withSeparatorElements(
   elements: ReactNode,
-  separator: ReactNode | (() => ReactNode)
+  separator: ReactNode | (() => ReactNode),
+  options?: SeparatorOptions
 ) {
-  const childrenArray = Children.toArray(elements);
+  const childrenArray = flattenChildren(
+    elements,
+    options?.traverseFragments ?? true
+  );
 
   for (let i = childrenArray.length - 1; i > 0; i--) {
     let sep =

package/tailwind.config.ts

@@ -216,8 +216,9 @@ const config: Config = {
     "underline",
     "-left-2.5",
     "-mr-2",
-    "border-gray-200"
+    "border-gray-200",
+    "gap-1.5",
   ],
 };
 
-export default config
+export default config;

package/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "extends": "@repo/typescript-config/library.json",
   "compilerOptions": {
-    "types": ["tailwindcss/types"],
+    "types": ["tailwindcss/types", "bun-types"],
   },
   "exclude": ["node_modules", "dist"],
 }