rename ButtonDelete to Delete

README.md

@@ -25,7 +25,7 @@ Almost all `trunx` components have a `bulma` prop that accepts:
 
 You know, `trunx` is a Super Sayan because it is written in TypeScript. The `bulma` prop can be autocompleted and typos can be avoided thanks to type checking.
 
-<img src="./media/trunks-sword.png"/>
+<img src="./media/trunks-sword.png" height="400"/>
 
 Some `trunx` components render their homomnym HTML tag.
 
@@ -75,9 +75,7 @@ HTML tags related: `A`, `Div`, `Heading`, `P`, `Span`.
 Bulma related:
 
 - `Breadcrumb`
-- `Button`
-- `Buttons`
-- `ButtonDelete`
+- `Button`, `Buttons`
 - `Card`
   - `CardContent`
   - `CardFooter`
@@ -92,6 +90,7 @@ Bulma related:
 - `Container`
 - `Content`
 - `Control`
+- `Delete`
 - `Field`
 - `FieldHorizontal`
   - `FieldBody`
@@ -106,8 +105,7 @@ Bulma related:
   - `HeroBody`
   - `HeroFoot`
   - `HeroHead`
-- `Icon`
-  - `IconText`
+- `Icon`, `IconText`
 - `Input`
 - `Label`
 - `Menu`
@@ -141,8 +139,7 @@ Bulma related:
 - `Section`
 - `Select`
 - `Table`
-- `Tabs`
-  - `Tab`
+- `Tabs`, `Tab`
 - `Textarea`
 
 ### `classnames`

src/doc_snippets.tsx

@@ -11,7 +11,6 @@ import {
   A,
   Button,
   Buttons,
-  ButtonDelete,
   Card,
   CardContent,
   CardFooter,
@@ -23,6 +22,7 @@ import {
   Container,
   Content,
   Control,
+  Delete,
   Div,
   Field,
   FieldBody,
@@ -43,15 +43,15 @@ import {
   ModalCard,
   ModalClose,
   ModalContent,
-  Notification,
   NavbarEnd,
   NavbarMenu,
   NavbarStart,
+  Notification,
   P,
   Progress,
-  Span,
-  Select,
   Section,
+  Select,
+  Span,
   Tab,
   Tabs,
   Textarea,
@@ -261,7 +261,7 @@ export const Snippets: FC = () => (
     </NavbarMenu>
 
     <Notification color="info" variant="light">
-      <ButtonDelete />
+      <Delete />
       Lorem ipsum...
     </Notification>
 

src/react.tsx

@@ -187,20 +187,6 @@ export type ButtonsProps = HTMLAttributes<HTMLDivElement> &
   BulmaProp &
   PluralSizeProp
 
-export const ButtonDelete: FC<ButtonDeleteProps> = ({
-  size,
-  className,
-  children,
-  ...props
-}) => (
-  <button
-    className={classnames<Bulma>(className as Bulma, "delete", is(size))}
-    {...props}
-  />
-)
-export type ButtonDeleteProps = ButtonHTMLAttributes<HTMLButtonElement> &
-  SizeProp<"large">
-
 /**
  * Grid cell.
  *
@@ -218,6 +204,8 @@ export type ButtonDeleteProps = ButtonHTMLAttributes<HTMLButtonElement> &
  * ```
  *
  * @see [bulma docs](https://bulma.io/documentation/grid/grid-cells/)
+ *
+ * Nope! Not that {@link https://en.wikipedia.org/wiki/Cell_(Dragon_Ball) | Cell} 😂.
  */
 export const Cell: FC<PropsWithChildren<CellProps>> = ({
   bulma,
@@ -559,6 +547,25 @@ export type ControlProps = HTMLAttributes<HTMLDivElement> &
     hasIconsRight: boolean
   }>
 
+/**
+ * A versatile delete cross.
+ *
+ * @see [bulma docs](https://bulma.io/documentation/elements/delete/)
+ */
+export const Delete: FC<DeleteProps> = ({
+  size,
+  className,
+  children,
+  ...props
+}) => (
+  <button
+    className={classnames<Bulma>(className as Bulma, "delete", is(size))}
+    {...props}
+  />
+)
+export type DeleteProps = ButtonHTMLAttributes<HTMLButtonElement> &
+  SizeProp<"large">
+
 export const Div: FC<PropsWithChildren<DivProps>> = ({
   bulma,
   className,
@@ -1671,7 +1678,7 @@ export const NavbarStart: FC<PropsWithChildren> = ({ children }) => (
  *
  * ```tsx
  * <Notification color="info" variant="light">
- *   <ButtonDelete />
+ *   <Delete />
  *   Lorem ipsum...
  * </Notification>
  * ```