block: add text-field-shadcn

blocks/text-field-shadcn/TextFieldShadcn.stories.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import googleFont from "../../.storybook/decorators/googleFont";
+import storyDialog from "../../.storybook/decorators/storyDialog";
+import { TextFieldShadcn } from "./index";
+import Usage from "./usage.mdx";
+
+const meta = {
+  title: "Text Field/Shadcn",
+  component: TextFieldShadcn,
+  parameters: {
+    layout: "centered",
+    githubUsername: "siriwatknp", // (optional) Your github username. If provided, your avatar will be displayed in the story toolbar
+  },
+  decorators: [storyDialog(Usage), googleFont([])],
+} satisfies Meta<typeof TextFieldShadcn>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Shadcn: Story = {
+  render: () => (
+    <div className="flex flex-col gap-2">
+      <TextFieldShadcn />
+      <TextFieldShadcn error />
+    </div>
+  ),
+};

blocks/text-field-shadcn/TextFieldShadcn.tsx

@@ -0,0 +1,66 @@
+import React from "react";
+import TextField, { TextFieldProps } from "@mui/material/TextField";
+
+export function TextFieldShadcn(props: TextFieldProps) {
+  return (
+    <TextField
+      label="Username"
+      placeholder="shadcn"
+      helperText="This is your public display name."
+      {...props}
+      sx={{
+        "--radius": "0.5rem",
+        "--ring": "var(--mui-palette-text-primary)",
+        "--input": "rgba(var(--mui-palette-common-onBackgroundChannel) / 0.23)",
+        "& legend": {
+          display: "none",
+        },
+        "& label": {
+          position: "initial",
+          transform: "none",
+          pointerEvents: "auto",
+          fontSize: "0.875rem",
+          fontWeight: 500,
+          color: "text.primary",
+          "&.Mui-focused, &.Mui-error": {
+            color: "text.primary",
+          },
+        },
+        "& .MuiFormHelperText-root": {
+          marginInline: 0,
+          mt: 1,
+          fontSize: "0.875rem",
+        },
+        "& .MuiOutlinedInput-root:hover:not(.Mui-error) .MuiOutlinedInput-notchedOutline":
+          {
+            borderColor: "var(--input)",
+          },
+        "& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline":
+          {
+            borderColor: "var(--input)",
+            borderWidth: "1px",
+            outline: "2px solid var(--ring)",
+            outlineOffset: "2px",
+          },
+        "& .Mui-error": {
+          "--input": "var(--mui-palette-error-main)",
+          "--ring": "var(--mui-palette-error-main)",
+        },
+        "& .MuiOutlinedInput-notchedOutline": {
+          top: 0,
+          borderColor: "var(--input)",
+          borderRadius: "calc(var(--radius) - 2px)",
+        },
+        "& .MuiInputBase-root": {
+          mt: 1,
+        },
+        "& .MuiInputBase-input": {
+          minHeight: 40,
+          boxSizing: "border-box",
+          px: 1.5,
+          py: 1,
+        },
+      }}
+    />
+  );
+}

blocks/text-field-shadcn/index.ts

@@ -0,0 +1 @@
+export * from "./TextFieldShadcn";

blocks/text-field-shadcn/usage.mdx

@@ -0,0 +1,14 @@
+import { Meta, Source } from "@storybook/blocks";
+import raw from "./TextFieldShadcn?raw";
+
+<Meta title="TextField/Shadcn" />
+
+## CLI
+
+```sh
+npx mui-treasury@latest clone text-field-shadcn
+```
+
+## TextFieldShadcn
+
+<Source code={raw} language="tsx" />