@justanarthur/modo-ui 0.6.0-canary.9 → 0.6.0

package/components/inputs/file-dropzone/variants.ts

@@ -1,94 +0,0 @@
-/*
- * Local addition (not part of Fluid Functionalism): the pure helpers behind
- * FileDropzone and its rows (size formatting, the accept / size / count
- * checks). No React: the build makes this an entry of its own without
- * `"use client"`, so server code can call them.
- */
-
-const UNITS = ['byte', 'kilobyte', 'megabyte', 'gigabyte', 'terabyte'] as const
-
-/** A byte count as a short localized size: `512 B`, `1.5 MB` (decimal units, as file managers show them). */
-export function formatFileSize(bytes: number, locale?: Intl.LocalesArgument) {
-  let value = bytes
-  let unit = 0
-  while (value >= 1000 && unit < UNITS.length - 1) {
-    value /= 1000
-    unit++
-  }
-  return new Intl.NumberFormat(locale, {
-    style: 'unit',
-    unit: UNITS[unit],
-    unitDisplay: 'short',
-    maximumFractionDigits: unit === 0 ? 0 : 1,
-  }).format(value)
-}
-
-/** Why a file was turned away: its `type` is not in `accept`, its `size` is over `maxSize`, or it is past the `count` of `maxFiles`. */
-export type FileRejectionReason = 'type' | 'size' | 'count'
-
-/** A file the dropzone turned away, and why. */
-export interface FileRejection {
-  file: File
-  reason: FileRejectionReason
-}
-
-function rules(accept: string) {
-  return accept
-    .split(',')
-    .map(rule => rule.trim().toLowerCase())
-    .filter(Boolean)
-}
-
-function matches(rule: string, name: string, type: string) {
-  if (rule.startsWith('.')) return name.endsWith(rule)
-  if (rule.endsWith('/*')) return type.startsWith(rule.slice(0, -1))
-  return type === rule
-}
-
-/** Whether a file passes an `accept` list (`.pdf,image/*`), as the native file input reads it. */
-export function acceptsFile(file: { name: string; type: string }, accept?: string) {
-  if (!accept) return true
-  const name = file.name.toLowerCase()
-  const type = file.type.toLowerCase()
-  return rules(accept).some(rule => matches(rule, name, type))
-}
-
-/** What a drag over the zone will come to: every file taken, some taken and some turned away, or none taken. */
-export type DragVerdict = 'accept' | 'partial' | 'reject'
-
-/**
- * Judges dragged files while they are still in the air. A drag shows MIME
- * types but no names, so a type the drag leaves empty, or an `accept` list
- * with extensions, counts as passing until the drop sorts the files. `limit`
- * is how many one drop may add.
- */
-export function dragVerdict(types: string[], accept: string | undefined, limit: number): DragVerdict {
-  const list = accept ? rules(accept) : []
-  const unsure = !list.length || list.some(rule => rule.startsWith('.'))
-  const passing = types.filter(type => unsure || !type || list.some(rule => matches(rule, '', type.toLowerCase())))
-  if (!passing.length || limit < 1) return 'reject'
-  return passing.length === types.length && types.length <= limit ? 'accept' : 'partial'
-}
-
-interface SortOptions {
-  accept?: string
-  maxSize?: number
-  maxFiles?: number
-  multiple?: boolean
-}
-
-/** Splits picked or dropped files into the ones that pass `accept`, `maxSize` and the count, and the rest with a reason. */
-export function sortFiles(files: File[], { accept, maxSize, maxFiles, multiple }: SortOptions) {
-  const accepted: File[] = []
-  const rejected: FileRejection[] = []
-  const limit = multiple ? (maxFiles ?? Number.POSITIVE_INFINITY) : 1
-
-  for (const file of files) {
-    if (!acceptsFile(file, accept)) rejected.push({ file, reason: 'type' })
-    else if (maxSize != null && file.size > maxSize) rejected.push({ file, reason: 'size' })
-    else if (accepted.length >= limit) rejected.push({ file, reason: 'count' })
-    else accepted.push(file)
-  }
-
-  return { accepted, rejected }
-}

package/components/inputs/input/examples.mdx

@@ -1,166 +0,0 @@
-import Input, { InputAction, InputGroup, Label } from './index'
-import Dropdown from '../../overlays/dropdown'
-import PasswordDemo from './password-demo'
-import Textarea from '../textarea'
-import SizeProvider from '../../../primitives/sizes'
-import { ChevronDown, CircleCheck, Mail, Search } from 'lucide-react'
-
-# Basics
-
-## Basic
-
-A single input with a leading icon.
-
-<div className="w-72 max-w-full">
-  <Input placeholder="Search teamspaces..." icon={Search} />
-</div>
-
-## Variants
-
-`borderless` is invisible until hovered or focused; `bordered` is framed at rest.
-
-<div className="flex flex-col gap-3 w-72 max-w-full">
-  <Input placeholder="Borderless" />
-  <Input variant="bordered" placeholder="Bordered" />
-</div>
-
-## With a Label
-
-`Label` pairs with the input through `htmlFor` and `id`.
-
-<div className="flex flex-col gap-1 w-72 max-w-full">
-  <Label htmlFor="input-email">Email</Label>
-  <Input id="input-email" placeholder="you@example.com" icon={Mail} />
-</div>
-
-# Content
-
-## Adornments
-
-`startAdornment` and `endAdornment` hold a prefix, a unit or an icon beside the text. They light with the field, and icons take the ladder's glyph size.
-
-<div className="flex flex-col gap-3 w-72 max-w-full">
-  <Input variant="bordered" startAdornment="https://" placeholder="example.com" />
-  <Input variant="bordered" endAdornment="kg" defaultValue="72" />
-  <Input variant="bordered" icon={Mail} defaultValue="ada@example.com" endAdornment={<CircleCheck />} />
-</div>
-
-## Actions
-
-An `InputAction` sits 4px inside the ring. Here it reveals the password; a press keeps the caret in the field.
-
-<div className="flex flex-col gap-3 w-72 max-w-full">
-  <PasswordDemo variant="bordered" placeholder="Password" defaultValue="correct horse" />
-</div>
-
-## Popup from an adornment
-
-A searchable Dropdown in `startAdornment`: its panel is portalled out of the field, so a press inside it never refocuses the input. Click the search field and type; a press on the field's own padding still focuses the input.
-
-<div className="flex flex-col gap-3 w-72 max-w-full">
-  <Input
-    variant="bordered"
-    type="tel"
-    placeholder="Phone number"
-    startAdornment={
-      <Dropdown.Menu>
-        <Dropdown.Trigger render={<InputAction label="Country code">+1<ChevronDown /></InputAction>} />
-        <Dropdown.Content defaultCheckedIndex={0}>
-          <Dropdown.Search filter placeholder="Search countries" />
-          {['+1 United States', '+31 Netherlands', '+33 France', '+44 United Kingdom', '+49 Germany', '+421 Slovakia', '+81 Japan'].map((country, i) => (
-            <Dropdown.Item key={country} index={i} label={country} />
-          ))}
-          <Dropdown.Empty>No countries found</Dropdown.Empty>
-        </Dropdown.Content>
-      </Dropdown.Menu>
-    }
-  />
-</div>
-
-## Compact adornments
-
-A compact field steps its adornments and actions down with it.
-
-<div className="flex flex-col gap-3 w-72 max-w-full">
-  <PasswordDemo size="compact" variant="bordered" placeholder="Password" />
-  <Input size="compact" variant="bordered" endAdornment="EUR" defaultValue="1,200" />
-</div>
-
-## Density without size
-
-`size` is a step of the size ladder, not the native `<input size>` width. Leave it off and the surrounding SizeProvider sets the height: one provider makes a whole form compact, with nothing on each field.
-
-```tsx
-// A host whose props keep the native `size` attribute: drop it, let the provider decide.
-function TextField({ size: _nativeSize, ...props }) {
-  return <Input {...props} />
-}
-
-<SizeProvider size="compact">
-  <TextField size={20} placeholder="Height from the provider" />
-</SizeProvider>
-```
-
-<SizeProvider size="compact">
-  <div className="flex flex-col gap-3 w-72 max-w-full">
-    <Input variant="bordered" placeholder="Compact from the provider" />
-    <Input variant="bordered" icon={Mail} placeholder="So is this one" />
-  </div>
-</SizeProvider>
-
-# States
-
-## Read-only
-
-`readOnly` keeps the value selectable and copyable; hover shows the ring, but the fill never lifts.
-
-<div className="flex flex-col gap-3 w-72 max-w-full">
-  <Input readOnly defaultValue="INV-2026-0042" />
-  <Input readOnly variant="bordered" icon={Mail} defaultValue="billing@example.com" />
-</div>
-
-## Invalid
-
-`invalid` turns the field destructive.
-
-<div className="flex flex-col gap-1 w-72 max-w-full">
-  <Label htmlFor="input-invalid" invalid>
-    Email
-  </Label>
-  <Input id="input-invalid" placeholder="you@example.com" icon={Mail} defaultValue="bad@" invalid />
-</div>
-
-# Group
-
-`InputGroup` stacks labelled fields; the hover highlight follows the pointer from field to field.
-
-<InputGroup>
-  <InputGroup.Field index={0} label="Name" placeholder="Your name" />
-  <InputGroup.Field index={1} label="Email" placeholder="you@example.com" icon={Mail} />
-</InputGroup>
-
-## Group with a Textarea
-
-A field's children replace its Input: a `Textarea` joins the group's hover and takes the field's error.
-
-<InputGroup>
-  <InputGroup.Field index={0} label="Subject" placeholder="What's it about?" />
-  <InputGroup.Field index={1} label="Message">
-    <Textarea placeholder="Write your message" />
-  </InputGroup.Field>
-</InputGroup>
-
-## Group Error
-
-An `error` message renders below the field and marks it invalid.
-
-<InputGroup>
-  <InputGroup.Field
-    index={0}
-    label="Email"
-    placeholder="you@example.com"
-    icon={Mail}
-    defaultValue="bad@"
-    error="Please enter a valid email address."
-  />
-</InputGroup>