@mks2508/mks-ui 0.1.3 → 0.2.0

package/src/react/ui/Input/index.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { Input as InputPrimitive } from '@base-ui/react/input';
+
+import { cn } from '@/react/lib/utils';
+import { inputStyles } from './Input.styles';
+import type { IInputProps } from './Input.types';
+
+/**
+ * Input — styled text input wrapping Base UI Input primitive.
+ *
+ * @param type - HTML input type
+ * @param slots - Override classes for input visual regions
+ *
+ * @example
+ * ```tsx
+ * <Input type="email" placeholder="Enter email" />
+ * ```
+ */
+function Input({ className, type, slots, ...props }: IInputProps) {
+  return (
+    <InputPrimitive
+      type={type}
+      data-slot="input"
+      className={cn(inputStyles.root, slots?.root, className)}
+      {...props}
+    />
+  );
+}
+
+export { Input };
+export type { IInputProps } from './Input.types';
+export type { InputSlot } from './Input.styles';

package/src/react/ui/InputGroup/InputGroup.styles.ts

@@ -0,0 +1,53 @@
+import { cva } from 'class-variance-authority';
+import type { StyleSlots } from '@/core/types';
+
+/** Visual regions for the InputGroup component family. */
+type InputGroupSlot = 'root' | 'addon' | 'button' | 'text' | 'input' | 'textarea';
+
+const inputGroupStyles: StyleSlots<InputGroupSlot> = {
+  root: 'border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-disabled:bg-input/50 dark:has-disabled:bg-input/80 h-8 rounded-lg border transition-colors in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-3 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[data-align=inline-start]]:[&>input]:pl-1.5 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto',
+  addon: 'text-muted-foreground h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*=\'size-\'])]:size-4 flex cursor-text items-center justify-center select-none',
+  button: 'gap-2 text-sm shadow-none flex items-center',
+  text: 'text-muted-foreground gap-2 text-sm [&_svg:not([class*=\'size-\'])]:size-4 flex items-center [&_svg]:pointer-events-none',
+  input: 'rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1',
+  textarea: 'rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1 resize-none',
+};
+
+/** CVA variants for InputGroupAddon alignment. */
+const inputGroupAddonVariants = cva(inputGroupStyles.addon, {
+  variants: {
+    align: {
+      'inline-start': 'pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem] order-first',
+      'inline-end': 'pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem] order-last',
+      'block-start':
+        'px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start',
+      'block-end':
+        'px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start',
+    },
+  },
+  defaultVariants: {
+    align: 'inline-start',
+  },
+});
+
+/** CVA variants for InputGroupButton sizing. */
+const inputGroupButtonVariants = cva(inputGroupStyles.button, {
+  variants: {
+    size: {
+      xs: 'h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*=\'size-\'])]:size-3.5',
+      sm: '',
+      'icon-xs': 'size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0',
+      'icon-sm': 'size-8 p-0 has-[>svg]:p-0',
+    },
+  },
+  defaultVariants: {
+    size: 'xs',
+  },
+});
+
+export {
+  inputGroupStyles,
+  inputGroupAddonVariants,
+  inputGroupButtonVariants,
+};
+export type { InputGroupSlot };

package/src/react/ui/InputGroup/InputGroup.types.ts

@@ -0,0 +1,44 @@
+import type { VariantProps } from 'class-variance-authority';
+import type { SlotOverrides } from '@/core/types';
+import type { inputGroupAddonVariants, inputGroupButtonVariants, InputGroupSlot } from './InputGroup.styles';
+
+/** Props for the InputGroup container. */
+interface IInputGroupProps extends React.ComponentProps<'div'> {
+  /** Override classes for input group visual regions. */
+  slots?: SlotOverrides<InputGroupSlot>;
+}
+
+/** Props for InputGroupAddon. */
+interface IInputGroupAddonProps
+  extends React.ComponentProps<'div'>,
+    VariantProps<typeof inputGroupAddonVariants> {}
+
+/** Props for InputGroupButton. */
+interface IInputGroupButtonProps
+  extends Omit<React.ComponentProps<'button'>, 'size'>,
+    VariantProps<typeof inputGroupButtonVariants> {
+  /** Button size variant. */
+  size?: 'xs' | 'sm' | 'icon-xs' | 'icon-sm';
+  /** Button visual variant (passed to Button). */
+  variant?: string;
+  /** Disabled state. */
+  disabled?: boolean;
+}
+
+/** Props for InputGroupText. */
+type IInputGroupTextProps = React.ComponentProps<'span'>;
+
+/** Props for InputGroupInput. */
+type IInputGroupInputProps = React.ComponentProps<'input'>;
+
+/** Props for InputGroupTextarea. */
+type IInputGroupTextareaProps = React.ComponentProps<'textarea'>;
+
+export type {
+  IInputGroupProps,
+  IInputGroupAddonProps,
+  IInputGroupButtonProps,
+  IInputGroupTextProps,
+  IInputGroupInputProps,
+  IInputGroupTextareaProps,
+};

package/src/react/ui/InputGroup/index.tsx

@@ -0,0 +1,147 @@
+import * as React from 'react';
+
+import { cn } from '@/react/lib/utils';
+import { Button } from '@/react/ui/Button';
+import { Input } from '@/react/ui/Input';
+import { Textarea } from '@/react/ui/Textarea';
+import {
+  inputGroupStyles,
+  inputGroupAddonVariants,
+  inputGroupButtonVariants,
+} from './InputGroup.styles';
+import type {
+  IInputGroupProps,
+  IInputGroupAddonProps,
+  IInputGroupButtonProps,
+  IInputGroupTextProps,
+  IInputGroupInputProps,
+  IInputGroupTextareaProps,
+} from './InputGroup.types';
+
+/**
+ * InputGroup — container for composing inputs with addons and buttons.
+ *
+ * @example
+ * ```tsx
+ * <InputGroup>
+ *   <InputGroupAddon align="inline-start">$</InputGroupAddon>
+ *   <InputGroupInput placeholder="Amount" />
+ * </InputGroup>
+ * ```
+ */
+function InputGroup({ className, slots, ...props }: IInputGroupProps) {
+  return (
+    <div
+      data-slot="input-group"
+      role="group"
+      className={cn(inputGroupStyles.root, slots?.root, className)}
+      {...props}
+    />
+  );
+}
+
+/** InputGroupAddon — decorative addon element within an input group. */
+function InputGroupAddon({
+  className,
+  align = 'inline-start',
+  ...props
+}: IInputGroupAddonProps) {
+  return (
+    <div
+      role="group"
+      data-slot="input-group-addon"
+      data-align={align}
+      className={cn(inputGroupAddonVariants({ align }), className)}
+      onClick={(e) => {
+        if ((e.target as HTMLElement).closest('button')) {
+          return;
+        }
+        e.currentTarget.parentElement?.querySelector('input')?.focus();
+      }}
+      {...props}
+    />
+  );
+}
+
+/** InputGroupButton — button element within an input group. */
+function InputGroupButton({
+  className,
+  size = 'xs',
+  ...props
+}: IInputGroupButtonProps) {
+  const buttonSize =
+    size === 'xs'
+      ? 'sm'
+      : size === 'icon-xs' || size === 'icon-sm'
+        ? 'icon'
+        : 'default';
+
+  return (
+    <Button
+      type="button"
+      data-slot="input-group-button"
+      data-size={size}
+      size={buttonSize as any}
+      variant="ghost"
+      className={cn(inputGroupButtonVariants({ size }), className)}
+      {...(props as any)}
+    />
+  );
+}
+
+/** InputGroupText — text element within an input group. */
+function InputGroupText({ className, ...props }: IInputGroupTextProps) {
+  return (
+    <span
+      className={cn(inputGroupStyles.text, className)}
+      {...props}
+    />
+  );
+}
+
+/** InputGroupInput — input element within an input group (no border/ring). */
+function InputGroupInput({ className, ...props }: IInputGroupInputProps) {
+  return (
+    <Input
+      data-slot="input-group-control"
+      className={cn(inputGroupStyles.input, className)}
+      {...props}
+    />
+  );
+}
+
+/** InputGroupTextarea — textarea element within an input group (no border/ring). */
+function InputGroupTextarea({
+  className,
+  ...props
+}: IInputGroupTextareaProps) {
+  return (
+    <Textarea
+      data-slot="input-group-control"
+      className={cn(inputGroupStyles.textarea, className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupText,
+  InputGroupInput,
+  InputGroupTextarea,
+  inputGroupAddonVariants,
+  inputGroupButtonVariants,
+};
+
+export type {
+  IInputGroupProps,
+  IInputGroupAddonProps,
+  IInputGroupButtonProps,
+  IInputGroupTextProps,
+  IInputGroupInputProps,
+  IInputGroupTextareaProps,
+} from './InputGroup.types';
+
+export type { InputGroupSlot } from './InputGroup.styles';

package/src/react/ui/Label/Label.styles.ts

@@ -0,0 +1,10 @@
+import type { StyleSlots } from '@/core/types';
+
+type LabelSlot = 'root';
+
+const labelStyles: StyleSlots<LabelSlot> = {
+  root: 'gap-2 text-sm leading-none font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed',
+};
+
+export { labelStyles };
+export type { LabelSlot };

package/src/react/ui/Label/Label.types.ts

@@ -0,0 +1,9 @@
+import type { SlotOverrides } from '@/core/types';
+import type { LabelSlot } from './Label.styles';
+
+/** Props for the Label component. */
+interface ILabelProps extends React.ComponentProps<'label'> {
+  slots?: SlotOverrides<LabelSlot>;
+}
+
+export type { ILabelProps };

package/src/react/ui/Label/index.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+
+import { cn } from '@/react/lib/utils';
+import { labelStyles } from './Label.styles';
+import type { ILabelProps } from './Label.types';
+
+/**
+ * Label — accessible form label element.
+ *
+ * @example
+ * ```tsx
+ * <Label htmlFor="email">Email</Label>
+ * ```
+ */
+function Label({ className, slots, ...props }: ILabelProps) {
+  return (
+    <label
+      data-slot="label"
+      className={cn(labelStyles.root, slots?.root, className)}
+      {...props}
+    />
+  );
+}
+
+export { Label };
+export type { ILabelProps } from './Label.types';
+export type { LabelSlot } from './Label.styles';

package/src/react/ui/Menu/Menu.styles.ts

@@ -0,0 +1,71 @@
+/**
+ * Style slots and defaults for the Menu component.
+ *
+ * Each slot maps to a visual region of the Menu. Consumers override
+ * individual slots via the `slots` prop without touching internals.
+ *
+ * @module @mks2508/mks-ui/react/ui/Menu/Menu.styles
+ *
+ * @example
+ * ```tsx
+ * import { menuStyles } from './Menu.styles';
+ * // menuStyles.popup => default popup classes
+ * ```
+ */
+
+import type { StyleSlots } from '@/core/types';
+
+/**
+ * Union of all visual regions (slots) in the Menu component tree.
+ *
+ * @example
+ * ```typescript
+ * const overrides: SlotOverrides<MenuSlot> = {
+ *   popup: 'bg-zinc-900 border-cyan-500/30',
+ *   item: 'hover:bg-white/5',
+ * };
+ * ```
+ */
+export type MenuSlot =
+  | 'root'
+  | 'popup'
+  | 'trigger'
+  | 'item'
+  | 'checkboxItem'
+  | 'radioItem'
+  | 'group'
+  | 'groupLabel'
+  | 'separator'
+  | 'shortcut'
+  | 'arrow'
+  | 'highlight'
+  | 'submenuTrigger';
+
+/**
+ * Default style map for every Menu slot.
+ *
+ * Base classes are intentionally minimal so consumers can fully
+ * control the visual appearance through `slots` overrides.
+ * No colors are hardcoded -- all visuals come from consumer styles.
+ *
+ * @example
+ * ```typescript
+ * import { menuStyles } from './Menu.styles';
+ * cn(menuStyles.popup, slots?.popup, className);
+ * ```
+ */
+export const menuStyles: StyleSlots<MenuSlot> = {
+  root: '',
+  popup: '',
+  trigger: '',
+  item: '',
+  checkboxItem: '',
+  radioItem: '',
+  group: '',
+  groupLabel: '',
+  separator: '',
+  shortcut: '',
+  arrow: '',
+  highlight: '',
+  submenuTrigger: '',
+};